/* General purpose CSS 
Revised and Updated: 7/28/2019 */
/*===============================================================================================================================================*/

/*===============================================================================================================================================*/
/* Default general settings, font(s), and text size
/*===============================================================================================================================================*/
html
{	font-size: 14px;
	line-height: 1.6em;
	scroll-behavior: smooth;
}

body
{	background-color: #FFF;
	width: 100%;
	min-width: 320px;
	margin: 0 auto;
	padding: 0;
	position: relative;
	color: #222;
	font-size: inherit;
	line-height: inherit;
	font-weight: normal;
	font-style: normal;
	text-align: left;
	word-wrap: break-word;
}

/* Japanese Font settings */
/*===============================================================================================================================================*/
html,
html[lang=ja] .sans-serif,
html[lang=ja] .gothic,
.jap-sans, 
.jap-sans-serif
{	font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "MS Pゴシック", "MS P Gothic", Arial, Helvetica, sans-serif;
}

html[lang=ja] .serif,
.jap-serif,
.mincho
{	font-family: "ヒラギノ明朝 Pro W4","Hiragino Mincho Pro","HGS明朝B","MingLiU","SimSun","ＭＳ Ｐ明朝",serif;
}

/* English font settings */
/*===============================================================================================================================================*/
html[lang=en],
html[lang=en] .sans-serif,
html[lang=en] .gothic,
.eng-sans,
.eng-sans-serif
{	font-family: Verdana, Geneva, Arial, sans-serif;
}

html[lang=en] .serif,
.eng-serif,
.times
{	font-family: "Times New Roman", Times, serif;
}



/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* Media query font size changes */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
@media screen and (max-width: 599px)
{	html
	{	font-size: 13px;
	}
}

@media screen and (max-width: 399px)
{	html
	{	font-size: 12px;
	}
}

/*===============================================================================================================================================*/
/*===============================================================================================================================================*/
/* Common document layout IDs and classes
/*===============================================================================================================================================*/
/*===============================================================================================================================================*/
#document-wrap
{	position: relative;
	overflow: hidden;
}

.content-wrap
{	padding: 0 10px;
	border: 0px solid #AAA;
}
.content-wrap.pad-small
{	padding-top: 20px;
	padding-bottom: 20px;
}
.content-wrap.pad
{	padding-top: 50px;
	padding-bottom: 50px;
}
.content-wrap.pad-big
{	padding-top: 80px;
	padding-bottom: 80px;
}
.content-wrap.pad-top-small
{	padding-top: 20px;
}
.content-wrap.pad-bottom-small
{	padding-bottom: 20px;
}
.content-wrap.pad-top
{	padding-top: 50px;
}
.content-wrap.pad-bottom
{	padding-bottom: 50px;
}
.content-wrap.pad-top-big
{	padding-top: 80px;
}
.content-wrap.pad-bottom-big
{	padding-bottom: 80px;
}

/* */
.content-wrap.bt,
.content-wrap.btb,
.content-wrap.bbt
{	border-top-width: 1px;
}
.content-wrap.bb,
.content-wrap.btb,
.content-wrap.bbt
{	border-bottom-width: 1px;
}
.content-wrap.bb + .bt,
.content-wrap.bb + .btb,
.content-wrap.bb + .bbt,
.content-wrap.btb + .bt,
.content-wrap.btb + .btb,
.content-wrap.btb + .bbt,
.content-wrap.bbt + .bt,
.content-wrap.bbt + .btb,
.content-wrap.bbt + .bbt
{	border-top-width: 0;
}
.content-wrap.bb:last-child,
.content-wrap.btb:last-child,
.content-wrap.bbt:last-child
{	border-bottom-width: 0;
}

/* */
.content
{	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	border: 0px solid #AAA;
}

/*-----------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 799px)
{	.content-wrap.pad
	{	padding-top: 20px;
		padding-bottom: 20px;
	}
	.content-wrap.pad-big
	{	padding-top: 40px;
		padding-bottom: 40px;
	}
	.content-wrap.pad-top
	{	padding-top: 20px;
	}
	.content-wrap.pad-bottom
	{	padding-bottom: 20px;
	}
	.content-wrap.pad-top-big
	{	padding-top: 40px;
	}
	.content-wrap.pad-bottom-big
	{	padding-bottom: 40px;
	}
}

/*==========================================================================================================================================================*/
/* Base tags - Redefinitions */
/*==========================================================================================================================================================*/
*
{	margin: 0;
	padding: 0;
	border: 0;
	font-size: 1em;
	line-height: inherit;
	color: inherit;
	font-weight: inherit;
	font-style: inherit;
	font-family: inherit;
	text-indent: 0;
}

/* HTML5 resets */
/*===============================================================================================================================================*/
header, main, footer,
section, article,
nav, aside,
figure, figcaption,
address
{	display: block;
	line-height: 1.6em;
}

/* Block tags reset line heights as font size changes are likely */
/*===============================================================================================================================================*/
div,
h1, h2, h3, h4, h5, h6, p,
ol, ul, li, dl, dt, dd,
table, tbody, tfoot, thead, tr, th, td,
blockquote,
form,
fieldset, legend,
input[type=text], input[type=password], input[type=number],
textarea,
select, option
{	line-height: 1.6em;
}

/* The small tag, by default, should have a set size reduction */
small
{	font-size: 0.8em;
}

/* Fixes potential indentation bugs that may arise with inline-block before/afters */
::before, ::after
{	text-indent: 0;
}

/* iPhone or Safari overrides */
button,
input[type=submit], input[type=reset]
{	-webkit-appearance: none;
	-webkit-border-radius: 0;
}

/*===============================================================================================================================================*/
/* Device display override classes */
/*===============================================================================================================================================*/

/* Forced override of display settings. These stay constant regardless of the viewport */
/* These can also be useful when setting certain classes in JS */
/*-----------------------------------------------------------------------------------------------------------------------------------------------*/
.force-display-none
{	display: none !important;
}
.force-inline
{	display: inline !important;
}
.force-block
{	display: block !important;
}
.force-inline-block, .ib
{	display: inline-block !important;
}

/* 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;
	}
}

/*==========================================================================================================================================================*/
/* 	Image resets - these settings are suitale for responsive design and scaling. 
	Emoji should still be inline, however. */
/*==========================================================================================================================================================*/
img,svg
{	max-width: 100%;
	height: auto;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.emoji img,
img.emoji
{	display: inline;
}

/*==========================================================================================================================================================*/
/* 	Link resets - Links don't really need to be underlined or have a default color unless clearly within some text. */
/*==========================================================================================================================================================*/
/* Give links no default color nor underline by default */
a
{	color: inherit;
	text-decoration: none;
}

a:hover
{	text-decoration: none;
}

/* Links clearly within plain text (almost always a P tag) should look a different color than the text. */ 
/* To emulate this with other tags, use the .text-link class */
/*----------------------------------------------------------------------------------------------------------------------------------------------*/
p a,
.text-link a, a.text-link
{	color: #0071BC;
}

p a:hover, 
.text-link a:hover, a.text-link:hover,
p label:hover,
.text-link label:hover, label.text-link:hover
{	color: #0091DC;
	text-decoration: underline;
}

/* For some links (e.g. images), this will provide a simple hover animation for opacity */
/*----------------------------------------------------------------------------------------------------------------------------------------------*/
.img-link a:hover,
a.img-link:hover
{	opacity: 0.75;
}

/*==========================================================================================================================================================*/
/* Clickable area (links, buttons, etc) settings */
/*==========================================================================================================================================================*/
/* Clickable areas should have a cursor change to indicate that they are clickable. */
a, button, label,
input[type=checkbox], input[type=radio],
input[type=submit], input[type=reset],
[onclick]
{	cursor: pointer;
}

a:not([href]):not([onclick]),
button:not([onclick])
{	cursor: default;
}
input[type=text][onclick],
input[type=password][onclick]
{	cursor: text;
}

/*==========================================================================================================================================================*/
/* List overrides */
/*==========================================================================================================================================================*/
ol, ul, li,
dl, dt, dd
{	list-style: none;
	list-style-type: none;
}

/*==========================================================================================================================================================*/
/* Table overrides */
/*==========================================================================================================================================================*/
table
{	border-spacing: 0;
	empty-cells: show;
	border-collapse: collapse;
	table-layout: fixed;
	width: 100%;
}

table tr th, table tr td
{	word-wrap: break-word;
	vertical-align: top;
}

/*===============================================================================================================================================*/
/* Dynamic pages and inputs */
/*==========================================================================================================================================================*/
input[type=text], input[type=password], input[type=number],
textarea, select
{	box-sizing: border-box;
	border: 1px solid;
	font-size: 16px;	/* Done to ensure no auto zooming on iPhones */
}

input[type=checkbox], input[type=radio]
{	margin-top: 0;
	margin-bottom: 0;
	padding: 0;
}

textarea
{	max-width: 100%;
	resize: vertical;
}

/* This class (generally used on a div) forces an input, select, or textarea inside of it to be the full size of its parent.
/* To control specific widths, resize the parent tag (or its parent tag).
/* Such sizing is FAR more reliable than sizing the bare input and gives much better control maintaining a uniform appearance. */
.input-holder
{	overflow: hidden;
	padding: 1px;
	box-sizing: border-box;
}

.input-holder > input,
.input-holder > textarea,
.input-holder > select
{	width: 100%;
	display: block;
}

/* Captions placed beside text inputs (e.g. "First Name").
/* This is generally a parent of an .input-holder and allows a caption to be on either side of the input.
/* Needs an accompanying .fr (right side) or .fl (left side) for the caption itself. */
.input-holder-caption
{	position: relative;
	overflow: hidden;
	text-align: left;
}

.input-holder-caption > .fr
{	padding-left: 0.5em;
}
.input-holder-caption > .fl
{	padding-right: 0.5em;
}

/* For phone numbers, this will put 3 boxes of equal width complete with dashes in the middle.
/* FORMAT: Main tag is .phone-inputs-wrap, next is .phone-inputs, then div children containing text inputs.
/* (Should generally only use 3 total divs) */
.phone-inputs-wrap
{	overflow: hidden;
}

/* Children divs have padding on either side, but this will extend them to the edge for perfect, equal width. */
.phone-inputs
{	margin-left: -0.5em;
	margin-right: -0.5em;
}

.phone-inputs > div
{	display: inline-block;
	vertical-align: top;
	width: 6em;
	max-width: 33.3333%;
	max-width: calc(100% / 3);
	box-sizing: border-box;
	position: relative;
	padding-right: 0.5em;
	padding-left: 0.5em;
}
.phone-inputs > div::after
{	content: "-";
	line-height: 1.2em;
	width: 1em;
	right: -0.5em;
	top: 50%;
	margin-top: -0.6em;
	position: absolute;
	text-align: center;
}

.phone-inputs > div:nth-child(3n)::after,
.phone-inputs > div:last-child::after
{	content: none;
}
.phone-inputs > div > input
{	width: 100%;
	display: block;
}

/* For dates, this will assume the format of:  (Jan, 01, 2XXX)
/* FORMAT: Main tag is .date-inputs-wrap, next is .date-inputs, then div children containing selects. */
.date-inputs-wrap
{	overflow: hidden;
}

/* Children divs have padding on either side, but this will extend them to the edge for perfect, equal width. */
.date-inputs
{	margin-left: -0.5em;
	margin-right: -0.5em;
}

.date-inputs > div
{	display: inline-block;
	vertical-align: top;
	padding: 0 0.5em;
	box-sizing: border-box;
}

.date-inputs > div:nth-child(1)
{	max-width: 32.5%;
}
.date-inputs > div:nth-child(2)
{	max-width: 32.5%;
}
.date-inputs > div:nth-child(3)
{	max-width: 35%;
}

.date-inputs > div > select
{	display: block;
	width: 100%;
}

.date-inputs > div > select option
{	padding-right: 1em;
}

/* radio/checkbox */
.multi-inputs
{}
.multi-inputs > div
{	display: inline-block;
	vertical-align: top;
}
.multi-inputs > div:not(:last-child)
{	margin-right: 1em;
}

.multi-inputs > div > label
{	display: inline-block;
}

.multi-inputs.use-mt
{	margin-top: -1em;
}
.multi-inputs.use-mt > div
{	margin-top: 1em;
}

/* Indents checkboxes or radios */
.indent-input
{	padding-left: 25px;
	text-indent: -25px;
}
.indent-input input[type=checkbox],
.indent-input input[type=radio]
{	width: 20px;
	display: inline-block;
	margin: 0 5px 0 0;
	text-indent: 0;
}

/*===============================================================================================================================================*/
/*===============================================================================================================================================*/
/* 	Boxes (general)
----------------------------------------------------------------------------
	By default creates a gray area with some padding.
	.outline-box creates a white area with some padding and a border
/*===============================================================================================================================================*/
/*===============================================================================================================================================*/
.box
{	background-color: #F0F0F0;
	padding: 15px;
	margin: 0 auto;
}
.outline-box
{	background-color: #FFF;
	padding: 15px;
	border: 1px solid currentColor;
	margin: 0 auto;
}

.box:not(:last-child),
.outline-box:not(:last-child)
{	margin-bottom: 20px;
}

/*===============================================================================================================================================*/
/*===============================================================================================================================================*/
/* 	Buttons (general)
----------------------------------------------------------------------------
	By default, creates a gray BG button object. Can have one or two buttons in a tag.
	If only one button is in the tag, then it'll stretch out
/*===============================================================================================================================================*/
/*===============================================================================================================================================*/
.btns
{	text-align: center;
	margin: 0 auto;
	font-size: 1.2em;
	font-weight: bold;
}

.btns:not(:last-child)
{	margin-bottom: 20px;
}

.btns > *
{	background-color: #E0E0E0;
	display: inline-block;
	vertical-align: top;
	box-sizing: border-box;
	padding: 15px 15px 15px 15px;
	width: 48%;
	position: relative;
	border: 1px solid transparent;
}
.btns > :only-child
{	width: 100%;
}
.btns > a:hover,
.btns > button:hover
{	background-color: #F0F0F0;
}

.btns > :not(:last-child)
{	margin-right: 4%;
}

/*	limit-size -  Will limit the size of the buttons.
	In general it's better to set the parent tag's max-width or the .btn tag's max-width rather than use this
/*----------------------------------------------------------------------------------------------------------------------------------------------*/
.btns.limit-size > *
{	max-width: 200px;
}
.btns.limit-size > :only-child
{	max-width: 400px;
}

/* 	auto-size - The buttons' sizes will be auto instead of a fixed percent.
/*----------------------------------------------------------------------------------------------------------------------------------------------*/
.btns.auto-size > *,
.btns.auto-size > :only-child
{	width: auto;
}
.btns.auto-size > :not(:last-child)
{	margin-right: 20px;
}

/* 	.smt-break will make all buttons be one on a line and full width for mobile devices */
/*----------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 799px)
{	.btns.smt-break > *
	{	display: block;
		width: auto;
		max-width: none;
		margin: 0 auto 20px;
	}
	.btns.smt-break > :last-child
	{	margin-bottom: 0;
	}
}

/*===============================================================================================================================================*/
/* Button decorations */
/*===============================================================================================================================================*/
/* 	arrow-icon - Will put a simple arrow on the right side of the button
/*----------------------------------------------------------------------------------------------------------------------------------------------*/
.btns.arrow-icon > *,
.btns > .arrow-icon
{	padding-right: 1.5em;
	padding-left: 1.5em;
}

.btns.arrow-icon > ::after,
.btns > .arrow-icon::after
{	content: "";
	border: 0 solid;
	border-top-width: 2px;
	border-right-width: 2px;
	width: 0.5em;
	height: 0.5em;
	margin-top: -0.25em;
	position: absolute;
	right: 0;
	margin-right: 0.75em;
	top: 50%;
	box-sizing: border-box;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	z-index: 2;
}

/* 	img-icon - General markup to place an image icon before the button's text 
	Additional classes will be needed to actually put in the background-image part */
/*----------------------------------------------------------------------------------------------------------------------------------------------*/
.btns > .img-icon::before
{	background-repeat: no-repeat;
	background-position: center center;
	-webkit-background-size: 100% auto;
	background-size: 100% auto;
	content: "";
	width: 1.5em;
	height: 1.5em;
	display: inline-block;
	vertical-align: middle;
	margin-right: 0.5em;
}
.btns > .img-icon:empty::before
{	margin-right: 0;
}

/* Colors */
/* ---------------------------------------------- */
.btns > .white
{	background-color: #FFF;
	color: #333;
	border-color: #333;
}
.btns > a.white:hover,
.btns > button.white:hover
{	background-color: #EEE;
}

.btns > .black
{	background-color: #111;
	color: #FFF;
}
.btns > a.black:hover,
.btns > button.black:hover
{	background-color: #333;
}

.btns > .gray
{	background-color: #666;
	color: #FFF;
}
.btns > a.gray:hover,
.btns > button.gray:hover
{	background-color: #888;
}

.btns > .pink
{	background-color: #E64664;
	color: #FFF;
}
.btns > a.pink:hover,
.btns > button.pink:hover
{	background-color: #FF6684;
}
.btns > .blue
{	background-color: #5AB4C8;
	color: #FFF;
}
.btns > a.blue:hover,
.btns > button.blue:hover
{	background-color: #7AD4E8;
}

/*===============================================================================================================================================*/
/*===============================================================================================================================================*/
/* Text with preceding icons (e.g. dots, triangles, arrows)
----------------------------------------------------------------------
By default, the tag will have left padding and indentation applied.
.pre-icon-parent can be used to make all child tags have the icon applied

Ideal uses: bullet lists
/*===============================================================================================================================================*/
/*===============================================================================================================================================*/
.pre-icon,
.pre-icon-parent > *
{	padding-left: 1em;
	text-indent: -1em;
	box-sizing: border-box;
	display: block;
}

/* Square */
.pre-icon.square::before,
.pre-icon.dot::before,
.pre-icon-parent.square > *::before,
.pre-icon-parent.dot > *::before
{	background-color: currentColor;
	content: "";
	width: 0.6em;
	height: 0.6em;
	margin: 0 0.2em;
	display: inline-block;
	box-sizing: border-box;
}

/* Circular dot */
.pre-icon.dot::before,
.pre-icon-parent.dot > *::before
{	border-radius: 50%;
}

/* Triangle pointing right */
.pre-icon.triangle::before,
.pre-icon-parent.triangle > *::before
{	content: "";
	border-left: 0.5em solid currentColor;
	border-top: 0.4em solid transparent;
	border-bottom: 0.4em solid transparent;
	margin-right: 0.25em;
	margin-left: 0.25em;
	display: inline-block;
	vertical-align: 0.1em;
	box-sizing: border-box;
}

/* Arrow pointing right */
.pre-icon.arrow::before,
.pre-icon-parent.arrow > *::before
{	content: "";
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	border-radius: 0;
	margin-left: 0;
	margin-right: 0.5em;
	width: 0.5em;
	height: 0.5em;
	display: inline-block;
	vertical-align: 0.1em;
	box-sizing: border-box;
}

/* Remove icon */
.pre-icon.no-icon::before,
.pre-icon-parent > .no-icon::before
{	content: none;
}

/*===============================================================================================================================================*/
/*===============================================================================================================================================*/
/* Numeric lists 
-------------------------------------
Simply inserts numbers before the child tags.  Will adjust size appropriately for lists of 10 or more items
/*===============================================================================================================================================*/
/*===============================================================================================================================================*/
.numeric-list
{	counter-reset: counter0;
}
.numeric-list > *
{	padding-left: 1.5em;
	text-indent: -1.5em;
	counter-increment: counter0;
	display: block;
	box-sizing: border-box;
}

.numeric-list > ::before
{	content: counter(counter0) ".";
	display: inline-block;
	min-width: 1.5em;
	text-align: right;
	box-sizing: border-box;
	padding-right: 0.5em;
}

.numeric-list > :nth-child(1):nth-last-child(n+10),
.numeric-list > :nth-child(2):nth-last-child(n+9),
.numeric-list > :nth-child(3):nth-last-child(n+8),
.numeric-list > :nth-child(4):nth-last-child(n+7),
.numeric-list > :nth-child(5):nth-last-child(n+6),
.numeric-list > :nth-child(6):nth-last-child(n+5),
.numeric-list > :nth-child(7):nth-last-child(n+4),
.numeric-list > :nth-child(8):nth-last-child(n+3),
.numeric-list > :nth-child(9):nth-last-child(n+2),
.numeric-list > :nth-child(n+10)
{	padding-left: 2em;
	text-indent: -2em;
}
.numeric-list > :nth-child(1):nth-last-child(n+10)::before,
.numeric-list > :nth-child(2):nth-last-child(n+9)::before,
.numeric-list > :nth-child(3):nth-last-child(n+8)::before,
.numeric-list > :nth-child(4):nth-last-child(n+7)::before,
.numeric-list > :nth-child(5):nth-last-child(n+6)::before,
.numeric-list > :nth-child(6):nth-last-child(n+5)::before,
.numeric-list > :nth-child(7):nth-last-child(n+4)::before,
.numeric-list > :nth-child(8):nth-last-child(n+3)::before,
.numeric-list > :nth-child(9):nth-last-child(n+2)::before,
.numeric-list > :nth-child(n+10)::before
{	min-width: 2em;
}

/*===============================================================================================================================================*/
/*===============================================================================================================================================*/
/* Pagination (general) 
-------------------------------------
Assumes direct A tags for prev/next as well as possible first/last navigation
Assumes a direct OL tag with A tags inside for the pages

By default, puts just a generic gray BG color on the links.
/*===============================================================================================================================================*/
/*===============================================================================================================================================*/
.pagination
{	text-align: center;
	padding: 1px 0;
	font-size: 1em;
	position: relative;
}

.pagination a
{	background-color: #E0E0E0;
	line-height: inherit;
}

.pagination a[href]:hover
{	background-color: #F0F0F0;
}

.pagination > a,
.pagination > ol,
.pagination > ol > li
{	box-sizing: border-box;
	display: inline-block;
	vertical-align: top;
	line-height: inherit;
}

.pagination > ol > li > *
{	display: block;
}

.pagination > ol > li > .current
{	background-color: #EEE;
}

/*===============================================================================================================================================*/
/*===============================================================================================================================================*/
/* Sub menus (general)
---------------------------------
Tags that will make a child tag called .sub-menu appear when they gain focus.
.sub-menu will disappear after focus on the parent .sub-menu-parent is lost.

/*===============================================================================================================================================*/
/*===============================================================================================================================================*/
.sub-menu-parent
{ 	position: relative;
}

.sub-menu 
{ 	background-color: #E0E0E0;
	visibility: hidden;
	opacity: 0;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1;
	-webkit-transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
	transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
}

.sub-menu-parent:focus .sub-menu,
.sub-menu-parent:hover .sub-menu 
{	visibility: visible;
	opacity: 1;
	z-index: 1;
	-webkit-transition-delay: 0s, 0s, 0.3s;
	transition-delay: 0s, 0s, 0.3s; /* this removes the transition delay so the menu will be visible while the other styles transition */
}

/*===============================================================================================================================================*/
/*===============================================================================================================================================*/
/* Common division formatting */
/*===============================================================================================================================================*/
/*===============================================================================================================================================*/
.items2 > li,
.items2 > div,
.items3 > li,
.items3 > div,
.items4 > li,
.items4 > div
{	display: inline-block;
	vertical-align: top;
	margin-right: 2%;
	box-sizing: border-box;
}

.items2 > li,
.items2 > div
{	width: 49%;
}
.items2.full-width > li,
.items2.full-width > div
{	width: 50%;
	margin-right: 0;
}

.items3 > li,
.items3 > div
{	width: 32%;
}
.items3.full-width > li,
.items3.full-width > div
{	width: 33.3333%;
	width: calc(100% / 3);
	margin-right: 0;
}

.items4 > li,
.items4 > div
{	width: 23.5%;
}
.items4.full-width > li,
.items4.full-width > div
{	width: 25%;
	margin-right: 0;
}

.items2 > li:nth-child(2n),
.items2 > div:nth-child(2n),
.items3 > li:nth-child(3n),
.items3 > div:nth-child(3n),
.items4 > li:nth-child(4n),
.items4 > div:nth-child(4n)
{	margin-right: 0;
}

.items2:not(.no-margin) > li:nth-child(n+3),
.items2:not(.no-margin) > div:nth-child(n+3),
.items3:not(.no-margin) > li:nth-child(n+4),
.items3:not(.no-margin) > div:nth-child(n+4),
.items4:not(.no-margin) > li:nth-child(n+5),
.items4:not(.no-margin) > div:nth-child(n+5)
{	margin-top: 2%;
}

@media screen and (max-width: 799px)
{	.items2:not(.leave) > li,
	.items2:not(.leave) > div,
	.items2.full-width:not(.leave) > li,
	.items2.full-width:not(.leave) > div,
	.items3:not(.leave) > li,
	.items3:not(.leave) > div,
	.items3.full-width:not(.leave) > li,
	.items3.full-width:not(.leave) > div,
	.items4:not(.leave) > li,
	.items4:not(.leave) > div,
	.items4.full-width:not(.leave) > li,
	.items4.full-width:not(.leave) > div
	{	display: block;
		vertical-align: baseline;
		margin-right: auto;
		margin-left: auto;
		width: auto;
	}
	.items2:not(.leave) > li:nth-child(n+3),
	.items2:not(.leave) > div:nth-child(n+3),
	.items3:not(.leave) > li:nth-child(n+4),
	.items3:not(.leave) > div:nth-child(n+4),
	.items4:not(.leave) > li:nth-child(n+5),
	.items4:not(.leave) > div:nth-child(n+5)
	{	margin-top: 0;
	}
	.items2:not(.no-margin):not(.leave) > li:not(:last-child),
	.items2:not(.no-margin):not(.leave) > div:not(:last-child),
	.items3:not(.no-margin):not(.leave) > li:not(:last-child),
	.items3:not(.no-margin):not(.leave) > div:not(:last-child),
	.items4:not(.no-margin):not(.leave) > li:not(:last-child),
	.items4:not(.no-margin):not(.leave) > div:not(:last-child)
	{	margin-bottom: 20px;
	}

	.items4.leave.leave2 > li,
	.items4.leave.leave2 > div
	{	width: 49%;
	}
	.items4.leave.leave2 > li:nth-child(4n),
	.items4.leave.leave2 > div:nth-child(4n)
	{	margin-right: 2%;
	}
	.items4.leave.leave2.full-width > li,
	.items4.leave.leave2.full-width > div
	{	width: 50%;
		margin-right: 0;
	}
	.items4.leave.leave2 > li:nth-child(2n),
	.items4.leave.leave2 > div:nth-child(2n)
	{	margin-right: 0;
	}
	.items4.leave.leave2:not(.no-margin) > li:nth-child(n+3),
	.items4.leave.leave2:not(.no-margin) > div:nth-child(n+3)
	{	margin-top: 2%;
	}
}



/*===============================================================================================================================================*/
/*===============================================================================================================================================*/
/* SMT Menu (general) */
/*===============================================================================================================================================*/
/*===============================================================================================================================================*/
#smt-top-menu-wrap
{	background-color: #000;
	background-color: rgba(0,0,0,0.7);
	position: fixed;
	top: -100%;
	bottom: 100%;
	left: 0;
	right: 0;
	z-index: 9999;
	-webkit-transition: all 0.15s ease-in-out 0s;
	transition: all 0.15s ease-in-out 0s;
	overflow: auto;
}

#smt-top-menu-wrap.active
{	top: 0;
	bottom: 0;
}

#smt-top-menu
{	background-color: #888;
	visibility: hidden;
	transition-delay: 0.2s;
	transition-timing-function: linear;
	transition-duration: 0.25s;
	transition-property: opacity;
	opacity: 0;
}

.active #smt-top-menu
{	opacity: 1;
	visibility: visible;
}


/*===============================================================================================================================================*/
/*===============================================================================================================================================*/
/* iframe holders (YT videos, Google Maps, etc.) */
/*===============================================================================================================================================*/
/*===============================================================================================================================================*/
.iframe-holder
{	background-color: #AAA;
	padding-top: 50%;
	position: relative;
}

.iframe-holder > iframe
{	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

/*===============================================================================================================================================*/
/*===============================================================================================================================================*/																																							 
/* Other common */
/*===============================================================================================================================================*/
/*===============================================================================================================================================*/
/* Text alignment (should never be overwritten, thus important) */
.tl
{	text-align: left !important;
}
.tc
{	text-align: center !important;
}
.tr
{	text-align: right !important;
}
.tj
{	text-align: justify !important;
}

/* Text appearance */
.bold
{	font-weight: bold !important;
}
.italic
{	font-style: italic !important;
}
.strike
{	text-decoration: line-through !important;
}
.underline
{	text-decoration: underline !important;
}

/*===============================================================================================================================================*/
/* Widths */
/*===============================================================================================================================================*/
.w-auto
{	width: auto !important;
}
.w100percent
{	width: 100%;
}

/* max widths */
.max1200px,.max1100px,.max1000px,
.max900px,.max800px,.max700px,.max600px,.max500px,
.max400px,.max300px,.max250px,.max200px,.max150px,.max100px,
.max75px,.max50px
{	margin-left: auto;
	margin-right: auto;
}

.max1200px
{	max-width: 1200px;
}
.max1100px
{	max-width: 1100px;
}
.max1000px
{	max-width: 1000px;
}
.max900px
{	max-width: 900px;
}
.max800px
{	max-width: 800px;
}
.max700px
{	max-width: 700px;
}
.max600px
{	max-width: 600px;
}
.max500px
{	max-width: 500px;
}
.max400px
{	max-width: 400px;
}
.max300px
{	max-width: 300px;
}
.max250px
{	max-width: 250px;
}
.max200px
{	max-width: 200px;
}
.max150px
{	max-width: 150px;
}
.max100px
{	max-width: 100px;
}
.max75px
{	max-width: 75px;
}
.max50px
{	max-width: 50px;
}

/* min-widths */
.min1em, .min2em, .min3em, .min4em, .min5em,
.min6em, .min7em, .min8em, .min9em, .min10em
{	display: inline-block;
}

.min1em
{	min-width: 1em;
}
.min2em
{	min-width: 2em;
}
.min3em
{	min-width: 3em;
}
.min4em
{	min-width: 4em;
}
.min5em
{	min-width: 5em;
}
.min6em
{	min-width: 6em;
}
.min7em
{	min-width: 7em;
}
.min8em
{	min-width: 8em;
}
.min9em
{	min-width: 9em;
}
.min10em
{	min-width: 10em;
}

/*===============================================================================================================================================*/
/* Simple inline block formatting with b tags */
/*===============================================================================================================================================*/
.b-ib b,
.b-ib-smt-i b
{	display: inline-block;
	font-weight: inherit;
}

@media screen and (max-width: 799px)
{	.b-ib-smt-i b
	{	display: inline;
	}
}

/*===============================================================================================================================================*/
/* Pre-determined margins settings that do not change with screen size */
/*===============================================================================================================================================*/
/* MLR */
.mlr0,.mrl0
{	margin-left: 0 !important;
	margin-right: 0 !important;
}
.mlr-auto,.mrl-auto
{	margin-left: auto !important;
	margin-right: auto !important;
}

/* MT */
.mt0
{	margin-top: 0 !important;
}
.mt5
{	margin-top: 5px !important;
}
.mt10
{	margin-top: 10px !important;
}
.mt15
{	margin-top: 15px !important;
}
.mt20
{	margin-top: 20px !important;
}
.mt30
{	margin-top: 30px !important;
}
.mt40
{	margin-top: 40px !important;
}

/* MB */
.mb0
{	margin-bottom: 0 !important;
}
.mb5
{	margin-bottom: 5px !important;
}
.mb10
{	margin-bottom: 10px !important;
}
.mb15
{	margin-bottom: 15px !important;
}
.mb20
{	margin-bottom: 20px !important;
}
.mb30
{	margin-bottom: 30px !important;
}
.mb40
{	margin-bottom: 40px !important;
}

/* Give auto bottom margins tags for spacing */
.parent-not-last-mb10 > *:not(:last-child),
.not-last-mb10:not(:last-child)
{	margin-bottom: 10px;
}

.p-mb p:not(:last-child),
.p-mb-direct > p:not(:last-child),
.oh-mb > .oh:not(:last-child),
.parent-not-last-mb20 > *:not(:last-child),
.not-last-mb20:not(:last-child)
{	margin-bottom: 20px;
}

.parent-not-last-mb30 > *:not(:last-child),
.not-last-mb30:not(:last-child)
{	margin-bottom: 30px;
}

.parent-not-last-mb40 > *:not(:last-child),
.not-last-mb40:not(:last-child)
{	margin-bottom: 40px;
}

/*===============================================================================================================================================*/
/* Pre-determined padding settings that do not change with screen size */
/*===============================================================================================================================================*/
/* PT */
.pt0
{	padding-top: 0 !important;
}
.pt10
{	padding-top: 10px !important;
}
.pt20
{	padding-top: 20px !important;
}
.pt30
{	padding-top: 30px !important;
}

/* PB */
.pb0
{	padding-bottom: 0 !important;
}
.pb10
{	padding-bottom: 10px !important;
}
.pb20
{	padding-bottom: 20px !important;
}
.pb30
{	padding-bottom: 30px !important;
}

/* PLR/PRL */
.plr0,.prl0
{	padding-left: 0 !important;
	padding-right: 0 !important;
}
.plr10,.prl10
{	padding-left: 10px !important;
	padding-right: 10px !important;
}
.plr20,.prl20
{	padding-left: 20px !important;
	padding-right: 20px !important;
}

/*===============================================================================================================================================*/
/* Floats */
/*===============================================================================================================================================*/
.fl
{	float: left;
}
.fr
{	float: right;
}

/*===============================================================================================================================================*/
/* Overflow */
/*===============================================================================================================================================*/
.oh
{	overflow: hidden;
}
.ov
{	overflow: visible;
}

/*===============================================================================================================================================*/
/* Indenting (Generally for easily formatting lists) */
/*===============================================================================================================================================*/
.indent1
{	padding-left: 1em;
	text-indent: -1em;
}
.indent2
{	padding-left: 2em;
	text-indent: -2em;
}
.indent3
{	padding-left: 3em;
	text-indent: -3em;
}
.indent4
{	padding-left: 4em;
	text-indent: -4em;
}
.indent5
{	padding-left: 5em;
	text-indent: -5em;
}
.indent6
{	padding-left: 6em;
	text-indent: -6em;
}
.indent7
{	padding-left: 7em;
	text-indent: -7em;
}
.indent8
{	padding-left: 8em;
	text-indent: -8em;
}
.indent9
{	padding-left: 9em;
	text-indent: -9em;
}
.indent10
{	padding-left: 10em;
	text-indent: -10em;
}


/*===============================================================================================================================================*/
/*===============================================================================================================================================*/
/* CSS Decorations */
/*===============================================================================================================================================*/
/*===============================================================================================================================================*/

/*	Shadows after boxes - Should be placed as a standalone div tag with no content */
/*===============================================================================================================================================*/
.after-shadow
{	position: relative;
	height: 20px;
	overflow: hidden;
}
.after-shadow::after
{	background-image: -webkit-radial-gradient(rgba(0,0,0,0.25) 15%,rgba(0,0,0,0),rgba(0,0,0,0) 70%);
	background-image: radial-gradient(rgba(0,0,0,0.25) 15%,rgba(0,0,0,0),rgba(0,0,0,0) 70%);
	content: "";
	position: absolute;
	left: -10%;
	right: -10%;
	bottom: 0;
	height: 200%;
}

/*===============================================================================================================================================*/
/*===============================================================================================================================================*/
/*===============================================================================================================================================*/
/* Customized CSS starts here */
/*===============================================================================================================================================*/
/*===============================================================================================================================================*/
/*===============================================================================================================================================*/
#document-overlays
{}

/* */
#document-overlays .darken
{	background-color: #000000;
	background-color: rgba(0,0,0,0.5);
	background-color: #00000080;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 2;
	display: none;
}
#document-overlays .darken.on
{	display: block;
}

/* */
#document-overlays .window
{	position: fixed;
	z-index: 3;
	left: -150%;
	top: 0;
	bottom: 0;
	padding: 80px 10px 20px;
	box-sizing: border-box;
	overflow: hidden;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	max-width: 100%;
}

#document-overlays .window.on
{	display: block;
	left: 50%;
}
#document-overlays .window .window-position-h
{	height: 100%;
	overflow: hidden;
}

#document-overlays .window .window-position-v
{	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	max-height: 100%;
	overflow: auto;
	
}

/* */
#document-overlays .window .window-widgets
{	background-color: #5AB4C8;
	padding: 10px 10px;
	text-align: right;
}
#document-overlays .window .window-widgets button
{	background-color: #F0F0F0;
	width: 30px;
	height: 30px;
	display: inline-block;
	vertical-align: top;
	font-weight: bold;
}
#document-overlays .window .window-widgets button:hover
{	background-color: #FFFFA0;
}

#document-overlays .window .window-content-wrap
{	-webkit-transform: scale(0,1);
	transform: scale(0,1);
	transform-origin: 100% 50%;
	height: 100%;
}

#document-overlays .window .window-content
{	box-sizing: border-box;
	padding: 20px;
	background-color: #FFF;
}

#document-overlays .window.on .window-content-wrap
{	transition: linear 0.2s transform;
	-webkit-transform: none;
	transform: none;
	min-width: 50px;
	min-height: 50px;
}
#document-overlays .sub-window:not(.on)
{	display: none;
}

/*-----------------------------------------------------------------------------------------------------------------------------------------------*/
header
{	background-color: #EBEBEB;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 9999;
	overflow: hidden;
	border-bottom: 1px solid #555;
	box-shadow: 0 4px 6px rgba(0,0,0,0.5);
	min-width: 320px;
}

header > div
{	position: relative;
}

/* ----- */
#header-navi
{	display: grid;
	grid-template-columns: 120px 1fr 140px 260px;
	height: 70px;
	text-align: center;
	position: relative;
}

/* */
#header-navi .logo
{	display: inline-block;
	vertical-align: top;
	box-sizing: border-box;
	min-width: 120px;
	height: 100%;
	grid-column: 1 / 2;
	grid-row: 1 / 2;
}

#header-navi .logo a
{	display: block;
	height: 100%;
	box-sizing: border-box;
	padding: 0 20px;
}
#header-navi .logo a:hover
{	background-color: #5AB4C8;
}

#header-navi .logo .site-logo-container
{	width: 100%;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	position: relative;
}

/* */
#header-navi .links-wrap
{	display: inline-block;
	vertical-align: top;
	box-sizing: border-box;
	height: 100%;
	grid-column: 2 / 3;
	grid-row: 1 / 2;
}

#header-navi .links
{	overflow: hidden;
	height: 100%;
	text-align: left;
	font-size: 0.925em;
}

#header-navi .links a
{	padding: 0 25px;
	display: inline-block;
	vertical-align: middle;
	height: inherit;
	text-align: center;
}
#header-navi .links a p
{	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	left: 0;
	right: 0;
	top: 50%;
	position: relative;
	line-height: 1.4em;
}
#header-navi .links a p span
{	display: block;
}
#header-navi .links a:hover
{	background-color: rgba(0,255,255,0.1);
}
#header-navi .links a:hover p
{	text-shadow: 0px 0px 6px #0FF;
}

/* */
#header-navi .lang-switch-wrap
{	display: inline-block;
	vertical-align: top;
	box-sizing: border-box;
	min-width: 140px;
	height: 100%;
	grid-column: 3 / 4;
	grid-row: 1 / 2;
}
#header-navi .lang-switch
{	padding: 0 20px;
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

#header-navi .lang-switch a
{	background-color: #787878;
	display: inline-block;
	vertical-align: middle;
	width: 50%;
	text-align: center;
	color: #D2D2D2;
	font-weight: bold;
	padding-top: 2px;
	padding-bottom: 2px;
}
#header-navi .lang-switch a:hover
{	background-color: #3A94A8;
	color: #F0F0F0;
}
#header-navi .lang-switch a.active
{	background-color: #5AB4C8;
	color: #FFF;
	
}

/* */
#header-navi .reserve-btn
{	position: relative;
	vertical-align: top;
	display: inline-block;
	box-sizing: border-box;
	min-width: 260px;
	height: 100%;
	grid-column: 4 / 5;
	grid-row: 1 / 2;
}

#header-navi .reserve-btn .btns
{	height: 100%;
}

#header-navi .reserve-btn a
{	display: block;
	height: inherit;
	position: relative;
	font-weight: bold;
}

#header-navi .reserve-btn a p
{	top: 50%;
	left: 0;
	right: 0;
	padding: inherit;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	position: absolute;
}
#header-navi .reserve-btn a p > span
{	display: inline-block;
}

/* */
#header-navi .mobile-ctrl
{	background-color: #CCC;
	position: absolute;
	right: 10px;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	width: 50px;
	cursor: pointer;
	padding: 10px;
	box-sizing: border-box;
	border-radius: 5px;
	display: none;
}
#header-navi .mobile-ctrl u
{	display: block;
	border-top: 2px solid;
	border-bottom: 1px solid #0007;
}
#header-navi .mobile-ctrl u:not(:last-child)
{	margin-bottom: 8px;
}
#header-navi .mobile-ctrl:hover
{	background-color: #CDD;
}
#header-navi .mobile-ctrl:hover u
{	border-top-color: #366;
}

/* */
#header-mobile
{	background-color: #EBEBEB;
	display: none;
}
#header-mobile ul
{	border-top: 2px solid #666;
}

#header-mobile ul > li
{	border-bottom: 1px solid #C8C8C8;
}

#header-mobile ul > li a
{	display: block;
	padding: 10px;
	text-align: center;
}
#header-mobile ul > li a:hover
{	background-color: rgba(0,255,255,0.1);
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
@media screen and (max-width: 1365px)
{	#header-navi
	{	grid-template-columns: 120px 1fr 120px 240px;
	}
	#header-navi .links a
	{	padding-right: 15px;
		padding-left: 15px;
	}
	#header-navi .lang-switch-wrap
	{	min-width: 120px;
	}
	#header-navi .reserve-btn
	{	min-width: 240px;
	}
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@media screen and (max-width: 1199px)
{	#header-navi
	{	grid-template-columns: 100px 1fr 100px 180px;
	}
	#header-navi .logo
	{	min-width: 100px;
	}
	#header-navi .logo a
	{	padding: 0 10px;
	}
	#header-navi .links
	{	font-size: 0.9125em;
	}
	#header-navi .links a
	{	padding-right: 10px;
		padding-left: 10px;
	}
	#header-navi .lang-switch-wrap
	{	min-width: 100px;
	}
	#header-navi .lang-switch
	{	padding-left: 10px;
		padding-right: 10px;
	}
	#header-navi .reserve-btn
	{	min-width: 180px;
		font-size: 0.9em;
	}
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@media screen and (max-width: 1023px)
{	#header-navi
	{	grid-template-columns: 100px 1fr 100px 110px;
	}
	#header-navi .links
	{	font-size: 0.9em;
	}

	#header-navi .reserve-btn
	{	min-width: 110px;
		font-size: 0.875em;
	}
	#header-navi .reserve-btn a p > span:not(.important)
	{	display: none;
	}
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@media screen and (max-width: 799px)
{	#header-navi
	{	display: block;
		height: 70px;
		text-align: left;
	}

/* */
	#header-navi .logo
	{	min-width: 0;
		width: 100px;
	}

	#header-navi .links-wrap,
	#header-navi .reserve-btn
	{	display: none;
	}
	#header-navi .lang-switch-wrap
	{	display: block;
		position: absolute;
		right: 65px;
		top: 0;
		min-width: 120px;
	}
	
	#header-navi .mobile-ctrl
	{	display: block;
	}
	.mobile-menu #document-overlays .darken
	{	display: block;
	}
	.mobile-menu  #header-mobile
	{	display: block;
	}
}

/*-----------------------------------------------------------------------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------------------------------------------------------*/
#main-content
{	position: relative;
	z-index: 1;
	padding-top: 70px;
	box-sizing: border-box;
	min-height: 100vh;
	display: grid;
	grid-template-rows: 1fr auto;
	overflow: hidden;
}

main
{	overflow: hidden;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@media screen and (max-width: 799px)
{	#main-content
	{	display: block;
		min-height: 0;
	}
}

/*-----------------------------------------------------------------------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------------------------------------------------------*/
#main-img
{	position: relative;
}

#main-img img
{	width: 100%;
}

#main-img .overlay
{	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}


/*-----------------------------------------------------------------------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------------------------------------------------------*/
.anchor-scroll
{	padding-top: 70px;
	margin-top: -70px;
}

/*-----------------------------------------------------------------------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------------------------------------------------------*/
.header1
{	font-size: 1.1em;
	text-align: center;
}
.header1:not(:last-child)
{	margin-bottom: 20px;
}

.header1 strong
{	display: block;
	font-size: 2em;
	line-height: 1em;
	font-weight: bold;
	position: relative;
	letter-spacing: 3px;
}
.header1 strong::after
{	border-bottom: 5px solid;
	content: "";
	display: block;
	width: 100px;
	margin-top: 15px;
	margin-left: auto;
	margin-right: auto;
}
.header1 strong:not(:last-child)
{	margin-bottom: 15px;
}

.header1.tl strong::after
{	margin-left: 0;
}

.header1 small
{	display: block;
	font-size: 1em;
}

/* ----- */
.header2
{	font-size: 1.25em;
	text-align: center;
	padding: 10px;
	border-top: 1px solid;
	border-bottom: 1px solid;
}
.header2:not(:last-child)
{	margin-bottom: 20px;
}

/* ----- */
.header3
{	color: #5AB4C8;
	font-size: 1.25em;
	font-weight: bold;
	text-align: center;
}
.header3:not(:last-child)
{	margin-bottom: 20px;
}

/* ----- */
.header4
{	font-size: 1.25em;
	font-weight: bold;
	padding-left: 1em;
	text-indent: -1em;
}
.header4::before
{	background-color: #5AB4C8;
	content: "";
	display: inline-block;
	width: 0.6em;
	height: 0.6em;
	border-radius: 50%;
	margin: 0 0.2em;
}
.header4:not(:last-child)
{	margin-bottom: 5px;
}

/* ----- */
.header5
{	font-size: 1.25em;
	font-weight: bold;
	text-align: center;
}
.header5:not(:last-child)
{	margin-bottom: 20px;
}

/* ----- */
.header6
{	background-color: #F0F0F0;
	font-size: 1.15em;
	font-weight: bold;
	padding: 10px;
}
.header6:not(:last-child)
{	margin-bottom: 20px;
}
.header6.brown
{	background-color: #887469;
	color: #FFF;
}
.header6.blue
{	background-color: #69BED2;
	color: #FFF;
}

/* ----- */
.header7
{	font-size: 1.35em;
	font-weight: bold;
	text-align: center;
}
.header7:not(:last-child)
{	margin-bottom: 40px;
}

.header7::after
{	content: "";
	-webkit-mask-image: url("../img/common/logo/main-logo-no-text.svg");
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: top center;
	-webkit-mask-size: 100% auto;
	mask-image: url("../img/common/logo/main-logo-no-text.svg");
	mask-repeat: no-repeat;
	mask-position: top center;
	mask-size: 100% auto;
	background-color: currentColor;
	background-repeat: no-repeat;
	background-position: top center;
	background-size: 100% auto;
	width: 4.5em;
	height: 1.6em;
	display: block;
	margin: 5px auto 0;
}


/* ---------- */
.lead
{	font-size: 1.05em;
}

/* ---------- */
.site-logo-container
{	position: relative;
	padding-top: 59.8%;
}
.site-logo-container img,
.site-logo-container svg
{	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	left: 0;
	top: 0;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@media screen and (max-width: 799px)
{	.header1
	{	font-size: 1em;
		text-align: center;
	}
	.header1 strong
	{	font-size: 1.5em;
	}
	.header1 strong::after
	{	border-bottom-width: 3px;
	}

/* ----- */
	.header2
	{	font-size: 1.1em;
	}

/* ----- */
	.header3
	{	font-size: 1.1em;
	}

/* ----- */
	.header4
	{	font-size: 1.1em;
	}
	
/* ----- */
	.header5
	{	font-size: 1.1em;
	}
	
/* ----- */
	.header6
	{	font-size: 1.05em;
	}
}


/* ---------- */
.input-progress
{	overflow: hidden;
}
.input-progress ol
{	margin-left: -15px;
	margin-right: -15px;
	counter-reset: counter0;
}

.input-progress ol > li
{	display: inline-block;
	width: 33.3333%;
	width: calc(100% / 3);
	box-sizing: border-box;
	padding: 0 15px;
	position: relative;
	counter-increment: counter0;
}
.input-progress ol > li::after
{	content: "";
	border-left: 14px solid #AAA;
	border-top: 9px solid transparent;
	border-bottom: 9px solid transparent;
	position: absolute;
	right: -7px;
	top: 50%;
	margin-top: -9px;
}

.input-progress ol > li p
{	background-color: #AAA;
	padding: 10px;
	border-radius: 8px;
	color: #FFF;
	font-size: 1.2em;
	font-weight: bold;
	
}
.input-progress ol > li p::before
{	background-color: #FFF;
	width: 1.8em;
	color: #AAA;
	font-size: 1.6em;
	line-height: 1.8em;
	font-weight: normal;
	content: counter(counter0);
	border-radius: 50%;
	display: inline-block;
	vertical-align: middle;
	margin-right: 10px;
	text-align: center;
}

.input-progress ol > li.active p
{	background-color: #E64664;
}
.input-progress ol > li.active p::before
{	color: #E64664;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@media screen and (max-width: 799px)
{	.input-progress ol > li p
	{	text-align: center;
		font-size: 1em;
	}
	.input-progress ol > li p::before
	{	font-size: 1.5em;
		display: block;
		margin: 0 auto 5px;
	}
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@media screen and (max-width: 479px)
{	.input-progress ol
	{	margin-left: -10px;
		margin-right: -10px;

	}
	.input-progress ol > li
	{	padding-left: 10px;
		padding-right: 10px;
	}
	.input-progress ol > li::after
	{	border-left-width: 10px;
		border-top-width:  7px;
		border-bottom-width: 7px;
		right: -6px;
		margin-top: -7px;
	}
	.input-progress ol > li p
	{	font-size: 0.95em;
		padding-left: 5px;
		padding-right: 5px;
	}
}

/* ---------- */
.form-inputs
{	margin: 0 auto;
}
.form-inputs .err
{	color: #E64664;
}

.form-inputs dl
{	margin: 0 auto;
}
.form-inputs dl:not(:last-child)
{	margin-bottom: 20px;
}

.form-inputs dl > dt,
.form-inputs dl > dd
{	display: inline-block;
	vertical-align: top;
	box-sizing: border-box;
}

.form-inputs dl > dt
{	width: 35%;
	padding-right: 3em;
	padding-top: 5px;
	padding-bottom: 5px;
	position: relative;
	line-height: 1.4em;
}

.form-inputs dl.req > dt::after
{	background-color: #E64664;
	content: "\005FC5\009808";	/* 必須 */
	color: #FFF;
	position: absolute;
	right: 0;
	top: -1px;
	padding: 1px 0.5em;
	line-height: 1.2em;
	margin-top: 5px;
}

html[lang=en] .form-inputs dl.req > dt::after
{	content: "Req";
}

.form-inputs dl > dd
{	width: 65%;
	padding-left: 20px;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@media screen and (max-width: 799px)
{	.form-inputs dl > dt,
	.form-inputs dl > dd
	{	display: block;
		width: auto;
		margin: 0 auto;
	}
	.form-inputs dl > dt
	{	background-color: #F0F0F0;
		margin-bottom: 20px;
	}
	.form-inputs dl > dd
	{	padding-left: 0;
	}
}

/* ---------- */
.pagination:not(:last-child)
{	margin-bottom: 40px;
}

.pagination a
{	padding: 5px;
	min-width: 2.5em;
	line-height: 2em;
	box-sizing: border-box;
}

.pagination > a:not(:last-child),
.pagination > ol:not(:last-child),
.pagination > ol > li:not(:last-child)
{	margin-right: 10px;
}

.pagination > a:not([href])
{	background-color: #CCC;
	opacity: 0.5;
	cursor: not-allowed;
}

.pagination > ol > li > .current
{	background-color: #5AB4C8;
	color: #FFF;
}

/* ---------- */
.access-list
{	counter-reset: counter0;
	overflow: auto;
	margin-left: -35px;
	margin-right: -35px;
}

.access-list > li
{	display: inline-block;
	vertical-align: top;
	width: 33.3333%;
	width: calc(100% /3);
	position: relative;
	counter-increment: counter0;
	box-sizing: border-box;
	padding: 0 35px;
	white-space: normal;
}
.access-list > li:nth-child(n+4)
{	margin-top: 20px;
}
.access-list > li::before
{	background-color: #333;
	content: counter(counter0);
	display: block;
	margin: 0;
	color: #FFF;
	font-size: 1.2em;
	width: 1.8em;
	line-height: 1.8em;
	text-align: center;
	font-weight: bold;
}

.access-list > li::after
{	content: "";
	width: 20px;
	height: 20px;
	border: 0 solid #333;
	border-top-width: 3px;
	border-right-width: 3px;
	position: absolute;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	right: -8px;
	top: 30px;
	margin-top: 25%;
}
.access-list > li:nth-child(3n)::after
{	content: none;
}
.access-list > li:last-child::after
{	content: none !important;
}

.access-list > li img
{	width: 100%;
	margin: 0 auto 20px;
}

/* ---- */
.access-scroll-indicator
{	position: relative;
	margin-bottom: 20px;
	overflow: hidden;
	display: none;
}

.access-scroll-indicator p
{	position: relative;
	z-index: 2;
	padding: 0 10px 5px;
}
.access-scroll-indicator::after
{	content: "";
	position: absolute;
	left: -20px;
	right: 20px;
	bottom: 0;
	height: 1.5em;
	-webkit-transform: skewX(45deg);
	transform: skewX(45deg);
	border: 0 solid #CCC;
	border-bottom-width: 1px;
	border-right-width: 1px;
}

/* ---- */
.access-map-container
{	margin: 0 auto;
}
.access-map-container .iframe-holder
{	padding-top: 0;
	height: 300px;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@media screen and (max-width: 1199px)
{	.access-map-container .iframe-holder
	{	padding-top: 35%;
		height: auto;
	}
}
@media screen and (max-width: 799px)
{	.access-map-container .iframe-holder
	{	padding-top: 40%;
	}
}
@media screen and (max-width: 599px)
{	.access-map-container .iframe-holder
	{	padding-top: 50%;
	}
}

/*-----------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 799px)
{	.access-list
	{	margin-left: -20px;
		margin-right: -20px;
		white-space: nowrap;
		padding-bottom: 10px;
	}

	.access-list > li
	{	width: 240px;
		padding-left: 20px;
		padding-right: 20px;
	}
	.access-list > li::after
	{	width: 16px;
		height: 16px;
		right: -6px;
		top: 24px;
		margin-top: 24%;
	}
	
	.access-list > li:nth-child(n+4)
	{	margin-top: 0;
	}
	.access-list > li:nth-child(3n)::after
	{	content: "";
	}

/* */
	.access-scroll-indicator
	{	display: block;
	}
}

/*-----------------------------------------------------------------------------------------------------------------------------------------------*/
.menu-course
{	background-color: #7BE1CC;
	background-image: -webkit-linear-gradient(left, #7BE1CC, #7BC3FF);
	background-image: linear-gradient(to right, #7BE1CC, #7BC3FF);
}

/* --- */
.menu-list
{	position: relative;
	margin: 30px auto 0;
	padding: 45px 15px;
}
.menu-list:not(:last-child)
{	margin-bottom: 30px;
}


.menu-list figcaption
{	color: #FFF;
	max-width: 480px;
	position: relative;
	z-index: 2;
	margin: -60px auto 20px;
	padding: 30px 10px;
}
.menu-list figcaption span
{	display: block;
	position: relative;
	z-index: 2;
	text-align: center;
}

.menu-list::before, .menu-list::after,
.menu-list figcaption::before, .menu-list figcaption::after
{	content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 20px;
    bottom: 20px;
    z-index: 1;
}

.menu-list::before, .menu-list::after
{	background-color: #FFF;
	z-index: 1;
}
.menu-list figcaption::before, .menu-list figcaption::after
{	background-color: #000;
}

.menu-list::before, .menu-list figcaption::before
{	-webkit-transform: skewY(2deg);
	transform: skewY(2deg);
}
.menu-list::after, .menu-list figcaption::after
{	-webkit-transform: skewY(-2deg);
	transform: skewY(-2deg);
}

.menu-list .text
{	position: relative;
	z-index: 3;
	max-width: 600px;
	margin: 0 auto;
}
.menu-list .text > ul
{	background-color: #FFF;
}

.menu-list .text > ul:not(:last-child)
{	margin-bottom: 30px;
}

.menu-list .text > ul .header3
{	margin-bottom: 0;
}
.menu-list .text > ul > li:not(:last-child)
{	margin-bottom: 20px;
}

.menu-list .text > ul > li > ul
{	padding-left: 1em;
}

/* ---- */
.menu-list .text .price-layout
{	display: flex;
	justify-content: space-between;
}
.menu-list .text .price-layout:not(:last-child)
{	margin-bottom: 5px;
}

/*-----------------------------------------------------------------------------------------------------------------------------------------------*/
.detail-list
{}
.detail-list > dl
{	padding: 0 10px;
	border-bottom: 0px solid #CCC;
}
.detail-list > dl:not(:last-child)
{	padding-bottom: 10px;
	border-bottom-width: 1px;
	margin-bottom: 10px;
}

.detail-list > dl > dt,
.detail-list > dl > dd
{	display: inline-block;
	vertical-align: top;
	box-sizing: border-box;
}

.detail-list > dl > dt
{	width: 30%;
	font-weight: bold;
	font-size: 1.05em;
}
.detail-list > dl > dd
{	width: 70%;
	padding-left: 1em;
}

/*-----------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 799px)
{	.detail-list > dl
	{	padding: 0;
	}
	.detail-list > dl:not(:last-child)
	{	padding-bottom: 0;
		border-bottom-width: 0;
		margin-bottom: 20px;
	}

	.detail-list > dl > dt,
	.detail-list > dl > dd
	{	display: block;
		width: auto;
		padding: 0 10px;
	}
	.detail-list > dl > dt
	{	border-bottom: inherit;
		border-bottom-width: 1px;
		margin-bottom: 5px;
		padding-bottom: 5px;
	}
}

/*-----------------------------------------------------------------------------------------------------------------------------------------------*/
footer
{	overflow: hidden;
}

/* ---- */
#footer-top
{	background: url("../img/common/footer/footer-bg.jpg") top center no-repeat;
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
	position: relative;
	color: #FFF;
	text-align: center;
	padding: 80px 0;
}

#footer-top .logo
{	width: 240px;
	margin: 0 auto 20px;
}

#footer-top .logo a
{	display: block;
}


#footer-top .links
{	text-align: center;
	font-size: 1.2em;
}
#footer-top .links > li
{	display: inline-block;
vertical-align: middle;
}
#footer-top .links > li:not(:last-child)
{	margin-right: 20px;
}
#footer-top .links > li a
{	display: block;
	padding: 4px 5px;
}
#footer-top .links > li a:hover
{	text-shadow: 0 0 6px #6FF;
	text-decoration: underline;
}

/* ---- */
#footer-bottom
{	background-color: #222;
	color: #FFF;
	padding-top: 20px;
	padding-bottom: 20px;
}

/* ---- */
#page-top-icon
{	background-color: #E2E2E2;
	position: fixed;
	right: 0;
	bottom: 0;
}

#page-top-icon a
{	position: relative;
	width: 60px;
	height: 60px;
	display: block;
	z-index: 1;
}
#page-top-icon a:hover
{	background-color: #E2FFFF;
}

#page-top-icon a img
{	position: absolute;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	width: 70%;
	width: calc(100% - 20px);
}
footer a.insta {
	display: inline-block;
	width: 32px;
	vertical-align: middle;
}
footer a.insta img {
	width: 100%;
}