@charset "utf-8";

/*----- flex設定 */
.flex{
	display: flex;
	flex-wrap: wrap;
}
.flexCC{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
}
.flexCB{
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
}
.flexCA{
	display: flex;
	align-items: center;
	justify-content: space-around;
	flex-wrap: wrap;
}
.flexCS{
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: wrap;
}
.flexCE{
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
}
.flexSC{
	display: flex;
	align-items: flex-start;
	justify-content: center;
	flex-wrap: wrap;
}
.flexSB{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-wrap: wrap;
}
.flexSA{
	display: flex;
	align-items: flex-start;
	justify-content: space-around;
	flex-wrap: wrap;
}
.flexSS{
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	flex-wrap: wrap;
}
.flexSE{
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
	flex-wrap: wrap;
}
.flexEC{
	display: flex;
	align-items: flex-end;
	justify-content: center;
	flex-wrap: wrap;
}
.flexEB{
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
}
.flexEA{
	display: flex;
	align-items: flex-end;
	justify-content: space-around;
	flex-wrap: wrap;
}
.flexEE{
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	flex-wrap: wrap;
}

/* ----- 横幅設定 */
.w100{
	width: 100%;
}
.w50{
	width: 50%;
}
.w25{
	width: 25%;
}

/* ----- 3点リーダー */
.trimming{
	width: 100%;
	overflow: hidden;
	display: block;
}
.trimming__inner{
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

/* -----リスト設定 */
.list-dot li,
.list-circle li,
.list-circle2 li,
.list-square li,
.list-no li,
.list-ast{
	text-indent: -1em;
	padding-left: 1em;
}
.list-dot li:before{
	content: "・";
}
.list-ast li:before{
	content: "※";
}
.list-circle li:before{
	content: "●";
}
.list-circle2 li:before{
	content: "○";
}
.list-square li:before{
	content: "■";
}
.list-no > li:nth-of-type(1):before{
	content: "\002460";
}
.list-no > li:nth-of-type(2):before{
	content: "\002461";
}
.list-no > li:nth-of-type(3):before{
	content: "\002462";
}
.list-no > li:nth-of-type(4):before{
	content: "\002463";
}
.list-no > li:nth-of-type(5):before{
	content: "\002464";
}
.list-no > li:nth-of-type(6):before{
	content: "\002465";
}
.list-no > li:nth-of-type(7):before{
	content: "\002466";
}
.list-no > li:nth-of-type(8):before{
	content: "\002467";
}
.list-no > li:nth-of-type(9):before{
	content: "\002468";
}
.list-no > li:nth-of-type(10):before{
	content: "\002469";
}
.list-no > li:nth-of-type(11):before{
	content: "\00246a";
}
.list-no > li:nth-of-type(12):before{
	content: "\00246b";
}
.list-no > li:nth-of-type(13):before{
	content: "\00246c";
}
.list-no > li:nth-of-type(14):before{
	content: "\00246d";
}
.list-no > li:nth-of-type(15):before{
	content: "\00246e";
}
.list-no > li:nth-of-type(16):before{
	content: "\00246f";
}
.list-no > li:nth-of-type(17):before{
	content: "\002470";
}
.list-no > li:nth-of-type(18):before{
	content: "\002471";
}
.list-no > li:nth-of-type(19):before{
	content: "\002472";
}
.list-no > li:nth-of-type(20):before{
	content: "\002473";
}

/*----- アニメーション（GSAP） */
/* マスク */
.g-mask{
	display: block;
	overflow: hidden;
	z-index: 5000;
	position: relative;
}
.g-mask::before{
	width: 100%;
	height: 100%;
	left: -100%;
	top: 0;
	z-index: 6000;
	transition: 1s ease-in-out;
	background: #eee;
	position: absolute;
	display: block;
	content: "";
}
.g-mask > *{
	width: 100%;
	z-index: -1;
	position: relative;
	left: -100%;
	transition: 1s ease-in-out;
}
.g-mask.on > *{
	left: 0;
}
.g-mask.on::before{
	left: 0;
	animation: g-maks 1s ease-in-out 1s forwards;
}
@keyframes g-maks{
	0%{
		left: 0;
	}
	100%{
		left: 100%;
	}
}

/* 拡大した状態から元のサイズに戻しながら表示（画像での使用を想定） */
.g-view{
	opacity: 0;
	transform: translateY(1.5rem);
	transition: .6s all ease-in-out;
}
.g-view.on{
	transform: translateY(0rem);
	opacity: 1;
}
.g-img{
	overflow: hidden;
	z-index: 5000;
	position: relative;
}
.g-img > *{
	width: 100%;
	transform: scale(1.2);
	filter: blur(.25rem);
	opacity: 0;
	transition: 1s ease-in-out;
}
.g-img.on > *{
	transform: scale(1);
	filter: blur(0);
	opacity: 1;
}
.g-img.end > *{
	transition: none;
}

/* パララックス画像 */
.g-parallaxImg{
	overflow: hidden;
	z-index: 5000;
	position: relative;
}
.g-parallaxImg > *{
	width: 100%;
}

/* 画像拡大 */
.hover_zoom img{
	transition: .3s all ease;
}
.hover_zoom:hover img{
	transform: scale(1.2);
}



/*-------------------------------
	PC専用
-------------------------------*/
@media screen and (min-width:769px) , print{

	.sp,
	.spi,
	.spf,
	.spt,
	.spib{
		display: none !important;
	}
	.pc{
		display: block !important;
	}
	.pci{
		display: inline !important;
	}
	.pcf{
		display: flex !important;
	}
	.pct{
		display: table !important;
	}
	.pcib{
		display: inline-block !important;
	}

	/*----- flex設定 */
	.pcflexCC{
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
	}
	.pcflexCB{
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.pcflexCA{
		display: flex;
		align-items: center;
		justify-content: space-around;
		flex-wrap: wrap;
	}
	.pcflexCS{
		display: flex;
		align-items: center;
		justify-content: flex-start;
		flex-wrap: wrap;
	}
	.pcflexCE{
		display: flex;
		align-items: center;
		justify-content: flex-end;
		flex-wrap: wrap;
	}
	.pcflexSC{
		display: flex;
		align-items: flex-start;
		justify-content: center;
		flex-wrap: wrap;
	}
	.pcflexSB{
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.pcflexSA{
		display: flex;
		align-items: flex-start;
		justify-content: space-around;
		flex-wrap: wrap;
	}
	.pcflexSS{
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		flex-wrap: wrap;
	}
	.pcflexSS{
		display: flex;
		align-items: flex-start;
		justify-content: flex-Start;
		flex-wrap: wrap;
	}
	.pcflexSE{
		display: flex;
		align-items: flex-start;
		justify-content: flex-end;
		flex-wrap: wrap;
	}
	.pcflexEC{
		display: flex;
		align-items: flex-end;
		justify-content: center;
		flex-wrap: wrap;
	}
	.pcflexEB{
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.pcflexEA{
		display: flex;
		align-items: flex-end;
		justify-content: space-around;
		flex-wrap: wrap;
	}
	.pcflexEE{
		display: flex;
		align-items: flex-end;
		justify-content: flex-end;
		flex-wrap: wrap;
	}

	/* ----- 3点リーダー */
	.trimming__inner--pc1{
		-webkit-line-clamp: 1;	
	}
	.trimming__inner--pc2{
		-webkit-line-clamp: 2;	
	}
	.trimming__inner--pc3{
		-webkit-line-clamp: 3;	
	}

}





/*-------------------------------
	SP専用
-------------------------------*/
@media screen and (max-width:768px) , print{

	.pc,
	.pci,
	.pcf,
	.pct,
	.pcib{
		display: none !important;
	}
	.sp{
		display: block !important;
	}
	.spi{
		display: inline !important;
	}
	.spf{
		display: flex !important;
	}
	.spt{
		display: table !important;
	}
	.spib{
		display: inline-block !important;
	}

	/*----- flex設定 */
	.spflexCC{
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
	}
	.spflexCB{
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.spflexCA{
		display: flex;
		align-items: center;
		justify-content: space-around;
		flex-wrap: wrap;
	}
	.spflexCS{
		display: flex;
		align-items: center;
		justify-content: flex-start;
		flex-wrap: wrap;
	}
	.spflexCE{
		display: flex;
		align-items: center;
		justify-content: flex-end;
		flex-wrap: wrap;
	}
	.spflexSC{
		display: flex;
		align-items: flex-start;
		justify-content: center;
		flex-wrap: wrap;
	}
	.spflexSB{
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.spflexSA{
		display: flex;
		align-items: flex-start;
		justify-content: space-around;
		flex-wrap: wrap;
	}
	.spflexSS{
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		flex-wrap: wrap;
	}
	.spflexSE{
		display: flex;
		align-items: flex-start;
		justify-content: flex-end;
		flex-wrap: wrap;
	}
	.spflexEC{
		display: flex;
		align-items: flex-end;
		justify-content: center;
		flex-wrap: wrap;
	}
	.spflexEB{
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.spflexEA{
		display: flex;
		align-items: flex-end;
		justify-content: space-around;
		flex-wrap: wrap;
	}
	.spflexEE{
		display: flex;
		align-items: flex-end;
		justify-content: flex-end;
		flex-wrap: wrap;
	}

	/* ----- 3点リーダー */
	.trimming__inner--sp1{
		-webkit-line-clamp: 1;	
	}
	.trimming__inner--sp2{
		-webkit-line-clamp: 2;	
	}
	.trimming__inner--sp3{
		-webkit-line-clamp: 3;	
	}

}