@charset "utf-8";

/*----------------------------------------------------------------
 ClassStyle
 -----------------------------------------------------------------
 c/p
 <link href="./asset/css/class.css" rel="stylesheet" type="text/css" media="screen,print" />
----------------------------------------------------------------*/

/*----------------------------------------------------------------
 class
----------------------------------------------------------------*/
/* remove style
-----------------------------------------------------*/
.remove-all,
.remove-all *{
	border				: none			!important;
	background			: none			!important;
	color				: var(--text-color)			!important;
	margin				: 0				!important;
	padding				: 0				!important;
	list-style			: none outside	!important;
	font-weight			: normal		!important;
	font-style			: normal		!important;
	font-size			: 12px			!important;
}
.remove-space,
.remove-space *{
	margin				: 0				!important;
	padding				: 0				!important;
}
.remove-border,
.remove-border *{
	border				: none			!important;
}
.remove-background,
.remove-background *{
	background			: none			!important;
}
.remove-fontcolor,
.remove-fontcolor *{
	color				: var(--text-color)			!important;
}
.remove-fontstyle,
.remove-fontstyle *{
	font-weight			: normal		!important;
	font-style			: normal		!important;
}
.remove-liststyle,
.remove-liststyle *{
	list-style			: none outside	!important;
}

/* clear
-----------------------------------------------------*/
.clear{
	clear				: both;
}

/* inline-block
-----------------------------------------------------*/
.inline-block{
	display				: inline-block;
}

/* clearfix
-----------------------------------------------------*/
.clearfix:after{
	content				: ".";
	height				: 0;
	clear				: both;
	display				: block;
	visibility			: hidden;
}
.clearfix{
	display				: inline-block;
}



/* responsive-map
-----------------------------------------------------*/
@media screen and (max-width: 768px) {
.responsive-map{
	height				: 0;
	overflow			: hidden;
	padding-top			: 56.25%;
	position			: relative;
}
.responsive-map iframe{
	position			: absolute;
	top					: 0;
	left				: 0;
	width				: 100%;
	height				: 100%;
}
}

/* responsive-embed
-----------------------------------------------------*/
.responsive-embed{
	height				: 0;
	overflow			: hidden;
	padding-top			: 56.25%;
	position			: relative;
}
.responsive-embed iframe{
	position			: absolute;
	top					: 0;
	left				: 0;
	width				: 100%;
	height				: 100%;
}

/* aspect-ratio
-----------------------------------------------------*/
.aspect-ratio16x9{
	aspect-ratio		: 16 / 9;
	object-fit			: cover;
	width				: 100%;
}
.aspect-ratio4x3{
	aspect-ratio		: 4 / 3;
	object-fit			: cover;
	width				: 100%;
}
.aspect-ratio1x1{
	aspect-ratio		: 1 / 1;
	object-fit			: cover;
	width				: 100%;
}


/* overflow-table
-----------------------------------------------------*/
@media screen and (max-width: 768px) {
.overflow-table table{ width:100%; }
.overflow-table{
	width				: 100%;
	-webkit-overflow-scrolling: touch;
	overflow-scrolling	: touch;
	overflow			: auto;
	white-space			: nowrap;
	cursor				: pointer;
}
}

/* indent
-----------------------------------------------------*/
/* 1em ---------------------------*/
.indent1{
	padding-left		: 1em;
}
/* indent 1em --------------------*/
.text-indent1{
	padding-left		: 1em;
	text-indent			: -1em;
}

/* align
-----------------------------------------------------*/
/* box ---------------------------*/
.align-left		{ float: left; }
.align-center	{ margin: 0 auto; }
.align-right	{ float: right; }

/* text --------------------------*/
.text-left		{ text-align: left; }
.text-center	{ text-align: center; }
.text-right		{ text-align: right; }

/* flex box
-----------------------------------------------------*/
.flex{
	display				: flex;
}
.flex-left		{ justify-content: flex-start; }
.flex-center	{ justify-content: center; }
.flex-right		{ justify-content: flex-end; }
.flex-justify	{ justify-content: space-between; }
.flex-interval	{ justify-content: space-around; }

/* valign */
.flex-valign-top		{ align-items: flex-start; }
.flex-valign-center		{ align-items: center; }
.flex-valign-baseline	{ align-items: baseline; }
.flex-valign-bottom		{ align-items: flex-end; }
.flex-valign-stretch	{ align-items: stretch; }

/* column ratio */
.flex-ratio1{ flex: 1; }
.flex-ratio2{ flex: 2; }
.flex-ratio3{ flex: 3; }
.flex-ratio4{ flex: 4; }
.flex-ratio5{ flex: 5; }

/* column direction */
.flex-horizontal	{ flex-direction: row; }
.flex-vertical		{ flex-direction: column; }


/* font
-----------------------------------------------------*/
/* font-style --------------------*/
.font-bold		{ font-weight	: bold; }
.font-italic	{ font-style	: italic; }
.font-oblique	{ font-style	: oblique; }
.font-underline	{ text-decoration	: underline; }

/* font-color --------------------*/
.color-red		{ color: #FF0000; }
.color-blue		{ color: #0033FF; }
.color-black	{ color: #000; }

/* font-size ---------------------*/
div.font-small,
div.font-normal,
div.font-midium,
div.font-big{
	display				: inline-block;
	line-height			: 1.6;
}
.font-small		{ font-size: 83%; }
.font-normal	{ font-size: 100%; }
.font-midium	{ font-size: 116%; }
.font-big		{ font-size: 150%; }

/* letter-spacing ----------------*/
.letter-spacing-1	{ letter-spacing: -1px; }
.letter-spacing0	{ letter-spacing: 0px; }
.letter-spacing1	{ letter-spacing: -1px; }

/* margin
-----------------------------------------------------*/
/* 0.5em ----------------------------*/
.margin05	{ margin: 0.5em!important; }
.margin05-x	{ margin-top: 0.5em!important; margin-bottom: 0.5em!important; }
.margin05-y	{ margin-right: 0.5em!important; margin-left: 0.5em!important; }
.margin05-t	{ margin-top: 0.5em!important; }
.margin05-r	{ margin-right: 0.5em!important; }
.margin05-b	{ margin-bottom: 0.5em!important; }
.margin05-l	{ margin-left: 0.5em!important; }

/* 1em ----------------------------*/
.margin1		{ margin: 1em!important; }
.margin1-x		{ margin-top: 1em!important; margin-bottom: 1em!important; }
.margin1-y		{ margin-right: 1em!important; margin-left: 1em!important; }
.margin1-t		{ margin-top: 1em!important; }
.margin1-r		{ margin-right: 1em!important; }
.margin1-b		{ margin-bottom: 1em!important; }
.margin1-l		{ margin-left: 1em!important; }

/* 1.5em ----------------------------*/
.margin1_5		{ margin: 1.5em!important; }
.margin1_5-x	{ margin-top: 1.5em!important; margin-bottom: 1.5em!important; }
.margin1_5-y	{ margin-right: 1.5em!important; margin-left: 1.5em!important; }
.margin1_5-t	{ margin-top: 1.5em!important; }
.margin1_5-r	{ margin-right	: 1.5em!important; }
.margin1_5-b	{ margin-bottom: 1.5em!important; }
.margin1_5-l	{ margin-left: 1.5em!important; }

/* 2em ----------------------------*/
.margin2		{ margin: 2em!important; }
.margin2-x		{ margin-top: 2em!important; margin-bottom: 2em!important; }
.margin2-y		{ margin-right: 2em!important; margin-left: 2em!important; }
.margin2-t		{ margin-top: 2em!important; }
.margin2-r		{ margin-right: 2em!important; }
.margin2-b		{ margin-bottom: 2em!important; }
.margin2-l		{ margin-left: 2em!important; }

/* padding
-----------------------------------------------------*/
/* 0.5em ----------------------------*/
.padding05		{ padding: 0.5em!important; }
.padding05-x	{ padding-top: 0.5em!important; padding-bottom: 0.5em!important; }
.padding05-y	{ padding-right: 0.5em!important; padding-left: 0.5em!important; }
.padding05-t	{ padding-top: 0.5em!important; }
.padding05-r	{ padding-right: 0.5em!important; }
.padding05-b	{ padding-bottom: 0.5em!important; }
.padding05-l	{ padding-left: 0.5em!important; }

/* 1em ----------------------------*/
.padding1		{ padding: 1em!important; }
.padding1-x		{ padding-top: 1em !important; padding-bottom: 1em !important; }
.padding1-y		{ padding-right: 1em!important; padding-left: 1em!important; }
.padding1-t		{ padding-top: 1em!important; }
.padding1-r		{ padding-right: 1em!important; }
.padding1-b		{ padding-bottom: 1em!important; }
.padding1-l		{ padding-left: 1em!important; }

/* 1.5em ----------------------------*/
.padding1_5		{ padding: 1.5em!important; }
.padding1_5-x	{ padding-top: 1.5em!important; padding-bottom: 1.5em!important; }
.padding1_5-y	{ padding-right: 1.5em!important; padding-left: 1.5em!important; }
.padding1_5-t	{ padding-top: 1.5em!important; }
.padding1_5-r	{ padding-right	: 1.5em!important; }
.padding1_5-b	{ padding-bottom: 1.5em!important; }
.padding1_5-l	{ padding-left: 1.5em!important; }

/* 2em ----------------------------*/
.padding2		{ padding: 2em!important; }
.padding2-x		{ padding-top: 2em!important; padding-bottom: 2em!important; }
.padding2-y		{ padding-right: 2em!important; padding-left: 2em!important; }
.padding2-t		{ padding-top: 2em!important; }
.padding2-r		{ padding-right: 2em!important; }
.padding2-b		{ padding-bottom: 2em!important; }
.padding2-l		{ padding-left: 2em!important; }

/* border-radius
-----------------------------------------------------*/
.radius5{
	border-radius			: 5px;
}

/* width
-----------------------------------------------------*/
.width25{ width: 25%; }
.width49{ width: 49%; }
.width50{ width: 50%; }
.width74{ width: 74%; }

/* debug
-----------------------------------------------------*/
.debug{
	border				: 1px solid red;
}