/*===============================================================================================================================================*/
/* Font setting variables */
/*===============================================================================================================================================*/
:root
{	--text-color: #333;
	--link-color: #0090DC;
	--link-hover-color: #10A0EC;
	--jap-sans-serif-fonts: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "游ゴシック", "游ゴシック体", "YuGothic", "Yu Gothic", "ＭＳ ゴシック", "MS Gothic", "HiraKakuProN-W3", "TakaoExゴシック", "TakaoExGothic", "Droid Sans Japanese", sans-serif;
	--jap-serif-fonts: "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "游明朝", "游明朝体", "YuMincho", "Yu Mincho", "ＭＳ 明朝", "MS Mincho", "HiraMinProN-W3", "TakaoEx明朝", "TakaoExMincho", "Droid Sans Japanese", serif;
	--eng-serif-fonts: "Times New Roman", "Times", serif;
	--eng-sans-serif-fonts: "Verdana", "Geneva", "Arial", sans-serif;
	--mono-fonts: "Consolas", "Monaco", "Liberation Mono", "Courier New", monospace;
	--serif-fonts: var(--jap-serif-fonts);
	--sans-serif-fonts: var(--jap-sans-serif-fonts);
}

/*===============================================================================================================================================*/
/* Font sizes for different viewports starting at 4K or wider and going downward
/* Note: For larger screens, these don't necessarily break at standard points, but for percent scalability relative to the size
/*===============================================================================================================================================*/
html
{	
	
	font-family: var(--sans-serif-fonts, sans-serif);
	font-size: 28px;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@media screen and (max-width: 3799px)
{	html
	{	font-size: 0.75vw;
	}
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@media screen and (max-width: 2399px)
{	html
	{	font-size: 18px;
	}
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@media screen and (max-width: 1919px)
{	html
	{	font-size: 17px;
	}
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@media screen and (max-width: 1599px)
{	html
	{	font-size: 16px;
	}
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@media screen and (max-width: 1023px)
{	html
	{	font-size: 15px;
	}
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@media screen and (max-width: 767px)
{	html
	{	font-size: 14px;
	}
}

/*===============================================================================================================================================*/
/* Main document wrapper tag */
/*===============================================================================================================================================*/
#document-wrap
{	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	box-sizing: border-box;
}

#document-wrap > *
{
	position: relative;
}

/*===============================================================================================================================================*/
/*===============================================================================================================================================*/
/*===============================================================================================================================================*/
/*===============================================================================================================================================*/
/* Common Layout Classes */
/* The exact padding and margins can potentially vary by design */
/*===============================================================================================================================================*/
/*===============================================================================================================================================*/
/*===============================================================================================================================================*/
/*===============================================================================================================================================*/
.content-wrap
{	display: flex;
	flex-direction: column;
	align-items: center;
	padding-left: 1rem;
	padding-right: 1rem;
}
.content-wrap:last-child
{	flex: 1 1 0%;
}

/* ------------------------ */
.content
{	width: 100%;
	max-width: 65%;
	box-sizing: border-box;
	margin: 0 auto;
}
.content:not(:last-child)
{	margin-bottom: 4rem;
}
.content:last-child
{	flex: 1 1 0%;
}
.content.pad
{	padding-top: 2em;
	padding-bottom: 2em;
}

/* ------------------------ */
.sub-content
{	padding: 0 1rem;
}
.sub-content:not(:last-child)
{	margin-bottom: 2rem;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@media screen and (max-width: 1919px)
{	.content
	{	max-width: 1280px;
	}
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@media screen and (max-width: 1599px)
{	.content:not(:last-child)
	{	margin-bottom: 3rem;
	}
	.sub-content:not(:last-child)
	{	margin-bottom: 1.5rem;
	}
}


/*===============================================================================================================================================*/
/*===============================================================================================================================================*/
/* Viewport override classes
/*===============================================================================================================================================*/
/*===============================================================================================================================================*/

/* PC (Desktop) displays  */
/*-----------------------------------------------------------------------------------------------------------------------------------------------*/
.pc, .pc-block
{	display: block;
}
.pc-inline
{	display: inline;
}
.pc-inline-block
{	display: inline-block;
}

/* SMT (mobile) are invisible during desktop display */
.smt, .smt-block, .smt-inline, .smt-inline-block, .smt-ib
{	display: none;
}

/* SMT (Mobile) displays */
/*----------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 799px)
{	.pc, .pc-block, .pc-inline, .pc-inline-block
	{	display: none;
	}
	.smt, .smt-block
	{	display: block;
	}
	.smt-inline
	{	display: inline;
	}
	.smt-inline-block, .smt-ib
	{	display: inline-block;
	}

/* smt-change-XXX will change the PC's display type to another */
	.smt-change-block
	{	display: block !important;
	}
	.smt-change-inline
	{	display: inline !important;
	}
	.smt-change-inline-block, .smt-change-ib
	{	display: inline-block !important;
	}
}