@charset "UTF-8";
/*--------------------------------------------
STATE
---------------------------------------------*/
@media screen and (max-width: 750px){
	.is-pc {
		display: none;
	}
}
@media print,screen and (min-width: 751px){
	.is-sp {
		display: none;
	}
}
/*--------------------------------------------
DATA TEXT
---------------------------------------------*/
[data-before]:before{
	content: attr( data-before );
	white-space: pre;
}
[data-after]:after{
	content: attr( data-after );
	white-space: pre;
}
[data-both]:before{
	content: attr( data-both );
	white-space: pre;
}
[data-both]:after{
	content: attr( data-both );
	white-space: pre;
}

/*--------------------------------------------
TITLE
---------------------------------------------*/
/* HERO TITLE */
@media screen and (max-width: 750px){
	.hero-title {
		margin-bottom: calc( 60 * 100vw / 750 );
	}
	.hero-title img {
		height: calc( 300 * 100vw / 750);
	}
}
@media print,screen and (min-width: 751px){
	.belt-bg {
		background-image: url(/assets/images/home/title-bg01_pc.png);
		background-position: center 25px;
		background-repeat: no-repeat;
		background-size: auto;
	}
	.hero-title {
		align-items: center;
		background-position: center 0;
		background-repeat: no-repeat;
		background-size: auto;
		display: flex;
		height: 300px;
		justify-content: center;
		margin-bottom: 60px;
		position: relative;
	}
	.hero-title img {
		height: 120px;
	}
}
/* TITLE01 */
.title01 {
	text-align: center;
}
@media screen and (max-width: 750px){
	.title01 {
		margin-bottom: calc( 70 * 100vw / 750 );
	}
}
@media print,screen and (min-width: 751px){
	.title01 {
		margin-bottom: 40px;
	}
}
/* TITLE02 */
.title02 {
	letter-spacing: .1em;
	text-align: center;
}
@media screen and (max-width: 750px){
	.title02 {
		border-bottom: calc( 2 * 100vw / 750 ) solid #000;
		font-size: 4rem;
		margin: 0 auto calc( 36 * 100vw / 750 );
		padding-bottom: calc( 24 * 100vw / 750 );
		width: calc( 400 * 100vw / 750 );
	}
}
@media print,screen and (min-width: 751px){
	.title02 {
		border-bottom: 2px solid #000;
		font-size: 3rem;
		margin: 0 auto 36px;
		padding-bottom: 24px;
		width: 400px;
	}
}
/* TITLE03 */
@media screen and (max-width: 750px){
	.title03 {
		font-size: 4rem;
		letter-spacing: .1em;
		margin-bottom: calc( 24 * 100vw / 750 );
		text-align: center;
	}
	.title03 span {
		display: block;
		font-size: 2.6rem;
		margin-top: calc( 12 * 100vw / 750 );
	}
}
@media print,screen and (min-width: 751px){
	.title03 {
		font-size: 3rem;
		margin-bottom: 30px;
	}
	.title03 span {
		font-size: 2rem;
		margin-left: 1em;
	}
}

/*--------------------------------------------
LINK
---------------------------------------------*/
a {
	backface-visibility: hidden;
	will-change: opacity;
	transition: opacity .3s ease-in;
}
a:hover {
	opacity: .6;
}

/*--------------------------------------------
TO TOP
---------------------------------------------*/
#toTop {
	align-items: center;
	background-color: rgba(0, 0, 0, 0.5); 
	border-radius: 50%;
	display: flex;
	justify-content: center;
	position: fixed; 
}
#toTop:before {
	background: url(/assets/images/ui/icon/arw_top.svg) 0 0/ contain no-repeat;
	content: '';
}
@media screen and (max-width: 750px){
	#toTop {
		bottom: calc( 10 * 100vw / 750 ); 
		height: calc( 70 * 100vw / 750 );
		right: calc( 20 * 100% / 750 );
		width: calc( 70 * 100% / 750 );
	}
	#toTop:before {
		height: calc( 35 * 100vw / 750 );
		width: calc( 35 * 100vw / 750 );
	}
}
@media print,screen and (min-width: 751px){
	#toTop {
		bottom: 20px; 
		height: 50px;
		right: 20px; 
		width: 50px;
	}
	#toTop:before {
		background-size: 25px 25px;
		height: 25px;
		width: 25px;
	}
}

/*--------------------------------------------
SLIDER COMMON
---------------------------------------------*/
.slider-arw-btm-wrap {
	padding-bottom: 20px;
}
.slick-prev {
	background-image: url("/assets/images/ui/icon/arw-prev01.png");
}
.slick-next {
	background-image: url("/assets/images/ui/icon/arw-next01.png");
}
.slick-prev,
.slick-next {
	background-repeat: no-repeat;
	font-size: 0;
}
/* SLIDENAV01 */
@media print,screen and (min-width: 751px){
	.slideNav01 {
		margin: 20px 0;
		text-align: center;
	}
	[class^="slideNav01-"] {
		display: inline-block;
		position: relative;
	}
	[class^="slideNav01-"] .slick-arrow {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
	}
	[class^="slideNav01-"] .slick-prev {
		margin-right: 20px;
		right: 100%;
	}
	[class^="slideNav01-"] .slick-next {
		left: 100%;
		margin-left: 20px;
	}
	[class^="slideNav01-"] .slick-prev,
	[class^="slideNav01-"] .slick-next {
		background-color: #efefef;
		background-position: center;
		background-size: 9px 18px;
		height: 30px;
		width: 30px;
	}
}
/* SLIDENAV02 */
[class^="slideNav02-"] .slick-arrow {
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
}
[class^="slideNav02-"] .slick-prev {
	z-index: 8;
}
[class^="slideNav02-"] .slick-prev,
[class^="slideNav02-"] .slick-next {
	background-color: #fff;
	background-position: center;
}
@media screen and (max-width: 750px){
	[class^="slideNav02-"] .slick-prev {
		left: calc( -10 * 100vw / 750 );
	}
	[class^="slideNav02-"] .slick-next {
		right: calc( -10 * 100vw / 750 );
	}
	[class^="slideNav02-"] .slick-prev,
	[class^="slideNav02-"] .slick-next {
		background-size: calc( 15 * 100vw / 750 ) calc( 26 * 100vw / 750 );
		height: calc( 50 * 100vw / 750 );
		width: calc( 50 * 100vw / 750 );
	}
}
@media print,screen and (min-width: 751px){
	[class^="slideNav02-"] .slick-prev {
		left: 0;
	}
	[class^="slideNav02-"] .slick-next {
		right: 0;
	}
	[class^="slideNav02-"] .slick-prev,
	[class^="slideNav02-"] .slick-next {
		background-size: 9px 18px;
		height: 30px;
		width: 30px;
	}
}

/* PROGRESS BAR */
.progress-bars {
	overflow: hidden;
	position: absolute;
	width: 100%;
}
.progress-bar-box {
	background-color: #ccc;
	float: left;
}
.progress-bar-box .bar {
	height: 100%;
	width: 0;
}
@media screen and (max-width: 750px){
	.progress-bars {
		bottom: calc( -20 * 100vw / 750 );
		display: flex;
		justify-content: center;
	}
	.progress-bar-box {
		height: calc( 4 * 100vw / 750 );
		margin-right: calc( 10 * 100vw / 750 );
		width: calc( 70 * 100vw / 750 );
	}
}
@media print,screen and (min-width: 751px){
	.progress-bars {
		bottom: -10px;
	}
	.progress-bar-box {
		height: 2px;
		margin-right: 10px;
		width: 70px;
	}
}