@charset "utf-8";

/*----------------------------------------------
共通設定
---------------------------------------------*/

.c_tac {
	text-align: center;
}

.c_flexc {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.c_link {
	transition: .3s;
}

.c_link:hover {
	filter: brightness(80%);
}

.c_en {
	font-family: "Prompt", sans-serif;
}

@media (max-width: 1280px) {
	.c_flexc {
		flex-direction: row;
	}
}

/*幅の設定
---------------------------------------------*/
.c_w960 {
	width: 960px;
	margin: 0 auto;
}

.c_w1280 {
	width: 1280px;
	margin: 0 auto;
}

@media (max-width: 1320px) {
	.c_w1280 {
		width: 100%;
		padding-left: 40px;
		padding-right: 40px;
	}
}

@media (max-width: 1040px) {
	.c_w960 {
		width: 100%;
		padding-left: 40px;
		padding-right: 40px;
	}
}

@media (max-width: 500px) {

	.c_w960,
	.c_w1280 {
		width: 100%;
		padding-left: 20px;
		padding-right: 20px;
	}
}

/*マージンの設定
---------------------------------------------*/
.c_mb100 {
	margin-bottom: 100px;
}

.c_mb80 {
	margin-bottom: 80px;
}

.c_mb40 {
	margin-bottom: 40px;
}

.c_mb20 {
	margin-bottom: 20px;
}

.c_mb10 {
	margin-bottom: 10px;
}

.c_mb5 {
	margin-bottom: 5px;
}

@media (max-width: 1050px) {
	.c_mb100 {
		margin-bottom: 50px;
	}

	.c_mb80 {
		margin-bottom: 40px;
	}

	.c_mb40 {
		margin-bottom: 20px;
	}

	.c_mb20 {
		margin-bottom: 10px;
	}
}

/*フォント
---------------------------------------------*/
.c_fw500 {
	font-weight: 500;
}

.c_fw600 {
	font-weight: 600;
}

.c_fw700 {
	font-weight: 700;
}

.c_fw900 {
	font-weight: 900;
}

.c_lh18 {
	line-height: 1.8;
}

.c_en {
	font-family: "Outfit", sans-serif;
}

/*カラー
---------------------------------------------*/
.c_cl_wh {
	color: var(--wh);
}

.c_cl_bk {
	color: var(--bk);
}

.c_cl_gr {
	color: var(--gr);
}

.c_cl_pa {
	color: var(--pa);
}

.c_cl_pink {
	color: var(--pink);
}

.c_cl_lemon {
	color: var(--lemon);
}

.c_cl_or {
	color: var(--or);
}

.c_cl_ye {
	color: var(--ye);
}

.c_cl_red {
	color: var(--red);
}

.c_cl_brown {
	color: var(--brown);
}

.c_cl_eme {
	color: var(--eme);
}

.c_cl_bl {
	color: var(--bl);
}

.c_cl_navy {
	color: var(--navy);
}

/* 背景 */

.c_bg_wh {
	background-color: var(--wh);
}

.c_bg_bl {
	background-color: var(--bl);
}

.c_bg_gr {
	background-color: var(--gr);
}

.c_bg_grsub {
	background-color: var(--grsub);
}

.c_bg_grli {
	background-color: var(--grli);
}

.c_bg_pa {
	background-color: var(--pa);
}

.c_bg_pasub {
	background-color: var(--pasub);
}

.c_bg_pali {
	background-color: var(--pali);
}

.c_bg_pink {
	background-color: var(--pink);
}

.c_bg_pinksub {
	background-color: var(--pinksub);
}

.c_bg_pinkli {
	background-color: var(--pinkli);
}

.c_bg_or {
	background-color: var(--or);
}

.c_bg_orsub {
	background-color: var(--orsub);
}

.c_bg_orli {
	background-color: var(--orli);
}

.c_bg_ye {
	background-color: var(--ye);
}

.c_bg_yesub {
	background-color: var(--yesub);
}

.c_bg_yeli {
	background-color: var(--yeli);
}

.c_bg_red {
	background-color: var(--red);
}

.c_bg_redsub {
	background-color: var(--redsub);
}

.c_bg_redli {
	background-color: var(--redli);
}

.c_bg_brown {
	background-color: var(--brown);
}

.c_bg_brownsub {
	background-color: var(--brownsub);
}

.c_bg_brownli {
	background-color: var(--brownli);
}

.c_bg_eme {
	background-color: var(--eme);
}

.c_bg_emesub {
	background-color: var(--emesub);
}

.c_bg_emeli {
	background-color: var(--emeli);
}

.c_bg_bl {
	background-color: var(--bl);
}

.c_bg_blsub {
	background-color: var(--blsub);
}

.c_bg_blli {
	background-color: var(--blli);
}

.c_bg_navy {
	background-color: var(--navy);
}

.c_bg_navysub {
	background-color: var(--navysub);
}

.c_bg_navyli {
	background-color: var(--navyli);
}

/*----------------------------------------------
改行設定
---------------------------------------------*/
.c_br-pc {
	display: block;
}

.c_br-tab {
	display: none;
}

.c_br-sp {
	display: none;
}

@media (max-width: 1160px) {
	.c_br-pc {
		display: none;
	}

	.c_br-tab {
		display: block;
	}

	.c_br-sp {
		display: none;
	}
}

@media (max-width: 500px) {
	.c_br-pc {
		display: none;
	}

	.c_br-tab {
		display: none;
	}

	.c_br-sp {
		display: block;
	}
}

/*表示の設定
---------------------------------------------*/
.c_display-pc {
	display: block;
}

.c_display-sp {
	display: none;
}

@media (max-width: 500px) {
	.c_display-pc {
		display: none;
	}

	.c_display-sp {
		display: block;
	}
}

/*----------------------------------------------
共通タイトル
---------------------------------------------*/
.c_ttl {
	font-size: 5rem;
}

@media (max-width: 1280px) {
	.c_ttl {
		font-size: 3rem;
	}
}

@media (max-width: 500px) {
	.c_ttl {
		font-size: 2.4rem;
		line-height: 1.1;
	}
}

/*----------------------------------------------
共通ボタン
---------------------------------------------*/


/*----------------------------------------------
共通の動き
---------------------------------------------*/


.c_poyo,
.c_fuwa,
.c_mvfade,
.c_fadeUp,
.c_fadeLeft,
.c_fadeScale {
	opacity: 0;
}

/* その場で */
.is_fadeIn {
	animation-name: fadeInAnime;
	animation-duration: 2s;
	animation-fill-mode: forwards;
	opacity: 0;
}

@keyframes fadeInAnime {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/* 下から */

.is_fadeUp {
	animation-name: fadeUpAnime;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	opacity: 0;
}

@keyframes fadeUpAnime {
	from {
		opacity: 0;
		transform: translateY(100px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* 左から */

.is_fadeLeft {
	animation-name: fadeLeftAnime;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	opacity: 0;
}

@keyframes fadeLeftAnime {
	from {
		opacity: 0;
		transform: translateX(-100px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

.is_fadeScale {
	animation-name: fadeScaleAnime;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	opacity: 0;

}

@keyframes fadeScaleAnime {
	from {
		transform: scale(0.5) translateY(200px);
		opacity: 0;
	}

	to {
		opacity: 1;
		transform: scale(1) translateY(0px);
	}
}

.is_poyo {
	animation: poyoyon2 1s ease-in-out forwards;
}

@keyframes poyoyon2 {
	0% {
		transform: scale(1.0, 1.0) translate(0, 0);
	}

	15% {
		transform: scale(0.98, 0.9) translate(0, 5px);
	}

	30% {
		transform: scale(1.02, 1.0) translate(0, 8px);
	}

	50% {
		transform: scale(0.98, 1.05) translate(0, -8px);
	}

	70% {
		transform: scale(1.0, 0.9) translate(0, 5px);
	}

	100% {
		transform: scale(1.0, 1.0) translate(0, 0);
	}

	0%,
	100% {
		opacity: 1;
	}
}