@charset "utf-8";

/*
*****************************************************************************************


クラス名はTaildwind.cssにできれば添わせる
以下のサイトの左メニューの下の方を参照
https://tailwindcss.com/docs/installation


*****************************************************************************************
*/

@media screen and (min-width: 768.02px) {
	.is-sp {
		display: none !important;
	}
}

@media screen and (max-width: 768px) {
	.is-pc {
		display: none !important;
	}
}

[hidden], .hidden {
	display: none !important;
}

@media screen and (min-width: 768.02px) {
	.md/:hidden {
		display: none !important;
	}
}

/*
*****************************************************************************************

Layout

*****************************************************************************************
*/


/* Display */

/* blockが使われているので */

.blok {
	display: block !important;
}

.inline-block {
	display: inline-block !important;
}

/*
*****************************************************************************************

Flexbox & Grid

*****************************************************************************************
*/


/*
*****************************************************************************************

Spacing

*****************************************************************************************
*/

.m-0 {
	margin: 0 !important;
}

.mt-0 {
	margin-top: 0 !important;
}

.mb-0 {
	margin-bottom: 0 !important;
}

@media (min-width:768.02px) {

	.md\:m-0 {
		margin: 0 !important;
	}
    
	.md\:mt-0 {
		margin-top: 0 !important;
	}
	
	.md\:mb-0 {
		margin-bottom: 0 !important;
	}

}

/*
*****************************************************************************************

Sizing

*****************************************************************************************
*/

@media (max-width:768) {

	.sp\:w-auto {
		width: auto;
	}

}

/*
*****************************************************************************************

Typography

*****************************************************************************************
*/


/* Text Align */

.text-center {
	text-align: center !important;
}

.text-right {
	text-align: right !important;
}

/*
*****************************************************************************************

Backgrounds

*****************************************************************************************
*/

.bg-white {
	background: #fff !important;
}

.bg-beige {
	background: var(--beige-light) !important;
}

/*
*****************************************************************************************

Borders

*****************************************************************************************
*/


/*
*****************************************************************************************

Filters

*****************************************************************************************
*/


/*
*****************************************************************************************

Filters

*****************************************************************************************
*/


/*
*****************************************************************************************

Tables

*****************************************************************************************
*/


/*
*****************************************************************************************

Transitions & Animation

*****************************************************************************************
*/

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes fadeOut {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

/*
*****************************************************************************************

Transforms

*****************************************************************************************
*/


/*
*****************************************************************************************

Interactivity

*****************************************************************************************
*/