/*
 * Version: 3.5
 *
 * Note: Ayakarin does not use this and but ayakarin.css instead.
 */

/*  Fonts  */

/* Japaese font(s) should be included only for JA pages.
@font-face {
	font-family: 'M PLUS Rounded 1c';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/MPLUSRounded1c-Regular-Subset.eot");
	src: url("fonts/MPLUSRounded1c-Regular-Subset.eot?#iefix") format("embedded-opentype"),url("fonts/MPLUSRounded1c-Regular-Subset.woff") format("woff"),url("fonts/MPLUSRounded1c-Regular-Subset.ttf") format("truetype");
	font-display: swap;
}
@font-face {
	font-family: 'Noto Serif JP';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/NotoSerifJP-Regular-Subset.woff") format("woff");
}
*/

/* https://ics.media/entry/200317/ */
* {
	font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", san-serif;
	font-size: var(--font-size-medium);
}

ruby > rt {
	font-size: 50%;
}

h1, h1 * {
	font-size: var(--font-size-xlarge);
}

h2, h2 * {
	font-size: var(--font-size-large);
	color: var(--brand-color-1-dark);
}

h1 span, h2 span, h3 span {
	display: inline-block;
}

p {
	font-family: 'Roboto', sans-serif;
	font-family: sans-serif;
	line-height: 150%;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	max-width: 35em;
	text-align: justify;
}

p:last-child {
	margin-bottom: 0;
}

/* Standard list */
ul {
	padding-top: var(--ul-padding-top);
	padding-bottom: var(--ul-padding-bottom);
	padding-left: var(--horizontal-margin-triple);
}

ul li {
	padding-top: var(--vertical-margin-quarter);
	padding-bottom: var(--vertical-margin-quarter);
}

input, textarea, select {
	border: 2px solid #ccc;
	border-radius: 4px;
	background-color: #f8f8f8;
}

input, select {
	box-sizing: border-box;
	padding: 3px 5px;
}

input[type="text"] {
	width: 100%;
	text-overflow: ellipsis;
}

input[type="email"], input[type="number"] {
	text-overflow: ellipsis;
}

input[type="submit"], input[type="button"] {
	cursor: pointer;
}

input[type="submit"] {
	color: white;
	background-color: var(--brand-color-1);
	padding-left: var(--horizontal-margin-triple);
	padding-right: var(--horizontal-margin-triple);
}

input[type="submit"]:focus {
	background-color: var(--brand-color-1-light);
}

input[type="submit"]:hover {
	background-color: var(--brand-color-1-light);
}

textarea {
	width: 100%;
	padding: 3px 5px;
	box-sizing: border-box;
	resize: none;
}

form {
	width: 100%;
}

@media (orientation: portrait) {
	h1 {
		text-align: center;
	}

	ul {
		padding-left: 30px;
		padding-right: 5%;
	}	
}

/* Make it sure using a local fonts when it comes to user input free text */
input[type="text"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="datetime"],
input[type="month"],
textarea {
	font-family: sans-serif;
}

/* Some Common Style Class BEGIN */
.text-emphasis {
	font-weight: bold;
}

.anchor {
	display: block;
	padding-top: var(--header-height);
	margin-top: calc(-1 * var(--header-height));
}

.icon-medium {
	width: var(--icon-size-medium);
	position: relative;
	top: var(--vertical-margin-eighth);
}

.icon-large {
	width: var(--icon-size-large);
	position: relative;
	top: var(--vertical-margin-eighth);
}

.icon-xxlarge {
	width: var(--font-size-xxlarge);
	height: var(--font-size-xxlarge);
	position: relative;
	top: var(--vertical-margin-eighth);
}

/*
.annotes-col {
	flex-direction: column;
}

.annotes-left-aligned {
	align-items: flex-start;
}

.annotes-pane {
	width: 100%;
	background-color: white;
	border: 1px solid var(--brand-color-1-transparent);
	border-radius: var(--border-radius-tight);
}

.annotes-pane-title {
	align-items: flex-start;
	width: 100%;
	padding: var(--vertical-margin-half) var(--horizontal-margin-half);
}

.annotes-pane .annotes-box {
	width: 100%;
	padding: var(--vertical-margin-half) var(--horizontal-margin-half);
}

.annotes-pane ~ .annotes-pane {
	margin-top: var(--vertical-margin-single);
}

.annotes-btn {
	font-size: var(--font-size-medium);
	border-radius: 3px;
	-webkit-box-shadow: none;
	box-shadow: none;
	border: 1px solid grey;
	cursor: pointer;
}

.annotes-btn:disabled {
	cursor: not-allowed;
	opacity: 0.5;
}

.annotes-btn-lc-m {
	padding: var(--vertical-margin-half) var(--horizontal-margin-half);
}

.annotes-btn-lc-m:hover {
	background-color: lightgrey;
	border-color: #269abc;
}

.annotes-btn-ac-m {
	padding: var(--vertical-margin-half) var(--horizontal-margin-half);
	background-color: var(--cta-color-1);
	color: white;
}

.annotes-btn-ac-l {
	padding: var(--vertical-margin-single) var(--horizontal-margin-single);
	background-color: var(--cta-color-1);
	color: white;
	font-size: var(--font-size-large);
}

.annotes-btn-ac-m:hover, .annotes-btn-ac-l:hover {
	background-color: var(--cta-color-1-light);
}


.annotes-btn-bc1-m {
	padding: var(--vertical-margin-half) var(--horizontal-margin-half);
	background-color: var(--brand-color-1);
	color: var(--brand-color-1c);
}

.annotes-btn-bc1-l {
	padding: var(--vertical-margin-single) var(--horizontal-margin-single);
	background-color: var(--brand-color-1);
	color: var(--brand-color-1c);
	font-size: var(--font-size-large);
}

.annotes-btn-bc1-m:hover, .annotes-btn-bc1-l:hover {
	background-color: var(--brand-color-1-light);
}

.annotes-form-row {
	align-items: flex-start;
}

.annotes-form-col + .annotes-form-col {
	margin-left: var(--horizontal-margin-single);
}

.annotes-form-two-col {
	width: 50%;
	position: relative;
	min-height: 1px;
	float: left;
}

.annotes-form-two-col:nth-child(2) {
	padding-left: var(--horizontal-margin-single);
}

.annotes-form-group {
	flex-direction: column;
	margin-bottom: var(--vertical-margin-single);
	align-items: flex-start;
}

.annotes-form-group label {
	font-weight: bold;
	white-space: nowrap;
}

.annotes-form-group label span {
	font-weight: normal;
	font-style: italic;
}

.annotes-form-group div {
	width: 100%;
}

input[type="text"].annotes-form-text-5 {
	width: calc(var(--font-size-medium) * 5);
}

input[type="text"].annotes-form-fullname-en {
	width: calc(var(--font-size-medium) * 20);
}

input[type="text"].annotes-form-phone {
	width: calc(var(--font-size-medium) * 9);
}

input[type="email"].annotes-form-email,
input[type="text"].annotes-form-email {
	width: calc(var(--font-size-medium) * 15);
}

div.annotes-form-radio-item {
	width: 20vw;
	height: var(--vertical-margin-triple);
	border: 1px solid grey;
	border-radius: var(--border-radius-tight);
}

.annotes-form-radio-item input {
	margin: 0;
	margin-left: var(--horizontal-margin-half);
}

.annotes-form-radio-item label {
	margin-left: var(--horizontal-margin-half);
}

.annotes-form-action-box {
	justify-content: space-between;
	width: 100%;
	padding: var(--vertical-margin-single) var(--horizontal-margin-single);
}

.annotes-form-padding-mark,
.annotes-form-validated-mark,
.annotes-form-error-mark {
	display: none;
	margin-left: var(--vertical-margin-half);
	font-size: var(--font-size-xlarge);
	font-weight: bold;
}

.annotes-form-padding-mark {
	color: white;
	display: block;
}

.annotes-form-validated-mark {
	color: forestgreen;
}
	
.annotes-form-group.has-error label,
.annotes-form-error-text,
.annotes-form-error-mark {
	color: #dd4b39;
	border-color: #dd4b39;
	box-shadow: none;
}

.annotes-form-group.has-error .annotes-form-control {
	border-color: #dd4b39;
}

.annotes-form-group.has-error .annotes-form-error-mark {
	display: block;
}

.annotes-form-group.has-error .annotes-form-padding-mark {
	display: none;
}

.annotes-form-group [data-validated=true][data-changed=true],
.annotes-form-group select[data-changed=true],
.annotes-form-group fieldset[role=radiogroup][data-changed=true] {
	border-color: green;
}

.annotes-form-group [data-validated=true][data-changed=true] ~ .annotes-form-validated-mark,
.annotes-form-group select[data-changed=true] ~ .annotes-form-validated-mark,
.annotes-form-group fieldset[role=radiogroup][data-changed=true] ~ .annotes-form-validated-mark {
	display: block;
}

.annotes-form-group [data-validated=true][data-changed=true] ~ .annotes-form-padding-mark,
.annotes-form-group select[data-changed=true] ~ .annotes-form-padding-mark,
.annotes-form-group fieldset[role=radiogroup][data-changed=true] ~ .annotes-form-padding-mark {
	display: none;
}

.annotes-form-group [data-validated=true][data-changed=true]:focus,
.annotes-form-group select[data-changed=true]:focus,
.annotes-form-group fieldset[role=radiogroup][data-changed=true]:focus,
.annotes-form-group input:focus,
.annotes-form-group.has-error .annotes-form-control:focus,
.annotes-form-group select:focus {
	outline-style: none;
	border-color: var(--brand-color-1);
	box-shadow: 0 0 var(--horizontal-margin-quarter) var(--brand-color-1);
}


.annotes-filled-circle {
	box-sizing: border-box;
	cursor: auto;
	pointer-events: none;
	width: calc(var(--font-size-medium) * 1.5);
	height: calc(var(--font-size-medium) * 1.5);
	color: rgb(255, 255, 255);
	display: flex;
	flex-direction: row;
	-webkit-box-align: center;
	align-items: center;
	-webkit-box-pack: center;
	justify-content: center;
	font-size: var(--font-size-medium);
	font-weight: bold;
	position: relative;
	background: black;
	border-radius: 50%;
	border-width: 0px;
	border-style: initial;
	border-color: initial;
	border-image: initial;
	transition: background 0.5s ease-in-out 0s, border 0.5s ease-in-out 0s;
}
*/

/* An element with annotes-tooltip-activator must be just before an element with annotes-tooltip as a sibling. */
/* Sizes like padding, border-radius, width are just default value. They are normally overwritten by application level CSS */
/* This is to place the tooltip window at the bottom of the activator element. */
/*
.annotes-tooltip {
	display: none;
	position: absolute;
	padding: 10px;
	border-radius: 5px;
	width: 200px;
	background-color: lightgray;
	cursor: default;
	/* display: inline-block; */
	/* top: 30px; */
	/* left: -145px; */
/* } */

/* This is to add a small triangle arrow above tooltip window. */
/*
.annotes-tooltip:before {
	content: "";
	position: absolute;
	top: calc(var(--font-size-small) * -2);
	right: 10%;
	border: var(--font-size-small) solid transparent;
	border-top: var(--font-size-small) solid lightgray;
	margin-left: calc(var(--font-size-small) * -1);
	transform: rotateZ(180deg);
}

.annotes-tooltip-activator {
	position: relative;
	cursor: pointer;
	display: inline-block;
}
*/

/* The "top" should have a positive amount of the height of the activator element. */
/*
.annotes-tooltip-activator:hover .annotes-tooltip {
	display: inline-block;
	top: 30px;
	left: -145px;
}

@media (orientation: portrait), (max-width: 960px) {
	.annotes-form-row {
		flex-direction: column;
	}

	.annotes-form-col + .annotes-form-col {
		margin-left: 0;
	}

	div.annotes-form-radio-item {
		width: 60vw;
	}
}
*/
/* Some Universal Style Class END */

/* JQuery UI */
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
	font-family: inherit!important;
}
/* END JQuery UI */

/*  General CSS*/
@media (min-width: 0px) {
	
	.alert-text {
		color: red;
	}

	.annotation, .annotation * {
		font-size: var(--font-size-small);
	}
	
	p.annotation:before {
		content: "※ ";
	}
	
	.wrapper {
		display: flex;
		align-items: center;		
		width: var(--wrapper-width);
		height: auto;
	}
	
	.lo-block {
		display: block;
	}

	/* Centering, wrapping */
	.lo-flex-box-rcw {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		align-items: stretch;
		align-content: stretch;
	}

	/* Centering, wrapping */
	.lo-flex-box-rlw {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: stretch;
		align-content: stretch;
	}

	/* Centering, 1 column */
	.lo-flex-box-1cc {
		flex-direction: column;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		align-content: center;
	}

	
	/* Space between and strech vertically with wrapping */
	.lo-flex-box-2 {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: stretch;
		align-content: space-around;
		margin: auto;
	}

	/* Centering, no wrapping */
	.lo-flex-box-3 {
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center;
		align-items: stretch;
		align-content: stretch;
	}
	
	/* Space between and strech vertically with wrapping */
	/* | MM  MM  MM  MM |                                */
	/* |   MM  MM  MM   |                                */
	.lo-flex-box-4 {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-around;
		align-items: stretch;
		align-content: space-around;
		margin: auto;
	}
	
	.lo-flex-box-4 > a {
		display: block;
	}
}

/*
@media (orientation: landscape) and (min-width: 961px) {
	.annotes-flex-only-for-desktop {
		display: flex;
	}
	.annotes-flex-only-for-mobile {
		display: none;
	}
}
@media (orientation: portrait), (max-width: 960px) {
	.annotes-flex-only-for-desktop {
		display: none;
	}
	.annotes-flex-only-for-mobile {
		display: flex;
	}
}
*/
@media (orientation: landscape) {
	.only-for-landscape {
		display: initial;
	}
	.only-for-portrait {
		display: none;
	}
	/* "display: initial" means "display: inline", so the above method does not work for block, inlie-block, flex etc.
	/* https://stackoverflow.com/questions/17630945/is-there-an-opposite-to-displaynone */
	.block-for-landscape {
		display: block;
	}
	.block-for-portrait {
		display: none;
	}

	.flex-for-landscape {
		display: flex;
	}
	.flex-for-portrait {
		display: none;
	}
}

@media (orientation: portrait) {
	.only-for-landscape {
		display: none;
	}
	.only-for-portrait {
		display: initial;
	}

	.block-for-landscape {
		display: none;
	}
	.block-for-portrait {
		display: block;
	}

	.flex-for-landscape {
		display: none;
	}
	.flex-for-portrait {
		display: flex;
	}

	.wrapper {
		width: 94%;
		/* justify-content: space-between; */
		/* align-items: center; */
	}
}

::selection {color:#ffffff;background:#353434;}
::-moz-selection {color:#ffffff;background:#353434;}

.testimonials #t_navigation a,
header nav ul li a {
	transition:all .2s linear;
	-webkit-transition:all .2s linear;
	/* -moz-transition:all .2s linear; */
	/* -o-transition:all .2s linear; */
}

/* Logo */
/* @media (min-width: 0px) { */

	.logo-with-name-box {
		color: lightskyblue;
		display: flex;
		align-items: flex-end;
	}
	
	.logo-with-name-box a {
		text-decoration: none;
	}

	.logo-with-name-box span {
		display: block;
		line-height: 100%;
		font-weight: bold;
		color: var(--brand-color-blue-light);
	}
	
	img.logo-with-name {
		vertical-align: middle;
		max-height: calc(var(--header-height) * 0.8);
	}

	header .logo-with-name-box img {
		width: var(--header-logo-width);
		max-width: var(--header-logo-max-width);
		height: auto;
		aspect-ratio: 5/1;
	}

	header .logo-with-name-box span {
		font-size: var(--font-size-xlarge);
		padding-left: var(--horizontal-margin-quarter);
	}
/* } */
@media (orientation: portrait), (max-width: 960px) {
	.logo-with-name-box {
		height: calc(var(--header-height) * 0.5);
		align-items: center;
		text-align: center;
	}
	header .logo-with-name-box img {
		/* width: 90%; */
		width: 40vw; /* CLS fix */
		height: calc(var(--header-height) * 0.4); /* CLS fix */
	}
}

/* END Logo */

/* Header BEGIN */
/* @media (min-width: 0px) { */

	.header-shrunken {
		display: none;
	}

	.header-main {
		width: 98%;
		display: flex;
		height: var(--header-height);
		justify-content: space-between;
		align-items: center;
		transition: .3s;
		margin: 0 auto;
		color: var(--brand-color-1);
	}

	header a {
		color: var(--brand-color-1);
		font-family: Roboto, sans-serif;
		font-family: sans-serif;
		font-weight: bold;
	}

	header a.ofo {
		color: var(--brand-color-2);
	}

	header.shrunken-header {
		height: var(--header-height-shrunken);
		transition: .3s;
	}
		
	.header-fix {
		width: 100%;
		height: var(--header-height);
		background-color: white;
		position: fixed;
		z-index: 10000;
		box-shadow: var(--horizontal-margin-eighth) var(--vertical-margin-eighth) 3px rgba(0,0,0,0.4);
		/* transition: .3s; */
	}

	header.shrunken-header .header-fix {
		height: var(--header-height-shrunken);
		transition: .3s;
	}

	header.with-breadcrumb, header.with-breadcrumb .header-fix {
		height: var(--header-with-breadcrumb-height);
		transition: .3s;
	}

	header.with-breadcrumb.shrunken-header, header.with-breadcrumb.shrunken-header .header-fix {
		height: var(--header-with-breadcrumb-height-shrunken);
		transition: .3s;
	}
	

	.wrapper.header-main {
		height: var(--header-height);
		justify-content: space-between;
		margin: 0 auto;
		transition: .3s;
	}

	header.shrunken-header .wrapper.header-main {
		height: var(--header-height-shrunken);
		transition: .3s;
	}

	header .menu-icon {
		display: block;
		width: 35px;
		height: 35px;
		float: right;
		margin-top: 23px;
		display: none;
	}

	header .breadcrumb {
		display: none;
	}

	header.with-breadcrumb .breadcrumb {
		display: flex;
		align-items: center;
		height: var(--header-breadcrumb-height);
		background-color: #dadada;
		border-top-style: solid;
		border-top-width: 1px;
		border-top-color: grey;
	}
	
	header.with-breadcrumb .breadcrumb .wrapper {
		padding-left: var(--horizontal-margin-quarter);
		margin: 0 auto;
	}
	
	header.with-breadcrumb .breadcrumb .wrapper, header.with-breadcrumb .breadcrumb .wrapper a {
		font-size: var(--font-size-small);
		color: #2c2c2c;
	}
/* } */

@media (orientation: landscape) {
	.menu-in-header.at-the-right ul {
		justify-content: flex-end;
	}

	.menu-in-header.at-the-left ul {
		justify-content: flex-start;
	}

	.at-the-right .menu-item-in-header {
		margin-left: var(--horizontal-margin-double);
	}
}

@media (orientation: portrait), (max-width: 960px) {

	/* header, .header-fix { */
		/* height: var(--header-height); */
	/* } */

	header .wrapper {
		height: 100%;
	}

	header .logo {
		float: none;
		margin-top: 0;
	}

	header .menu-icon {
		display: block;
		margin-top: 0;
		margin-right: var(--horizontal-margin-single);
		float: none;
		width: var(--header-icon-height);
		height: var(--header-icon-height);
	}

	header .menu-icon img {
		width: var(--header-icon-height); /* CLS fix */
		height: var(--header-icon-height); /* CLS fix */
	}

	header nav {
		display: block;
		background: var(--brand-color-1);
		margin: 0;
		padding: 0;
		border-left: 0;
		border-top: 1px #2c2c2c solid;
		overflow: hidden;
		text-align: center;
		z-index: 9999;
		height: auto;
		width: 98%;
		transition: .3s;
		border-bottom-left-radius: 2px; 
		border-bottom-right-radius: 2px; 
	}

	header nav.show_menu {
		display: block;
	}

	header nav ul {
		display: block;
		height: auto;
		list-style: none;
		padding: 0 0;
	}

	header nav ul li {
		float: left;
		margin: 0;
		padding: 0 0;
		width: 100%;
		line-height: 120%;
		letter-spacing: 1px;
		text-align: center;
		border-bottom: 1px #2c2c2c solid;
	}

	header nav ul li:first-child {
		margin-left: 0;
	}

	header nav ul li:last-child{
		border-bottom: 0;
	}

	header nav ul li a {
		display: block;
		width: 100%;
		padding: 0.75em 0;
		color: white;
		text-decoration: none;
	}

	header nav ul li a:active {
		display: block;
		width: 100%;
		padding: 20px 0;
		background: #2c2c2c;
	}
	
}
/* END header  */

/* Image Grid */
@media (min-width: 0px) {
	
	.image-gird--item {
		width: var(--image-grid-width);
		margin-bottom: var(--vertical-margin-single);
		margin-top: var(--vertical-margin-single);
	}
	
	.image-gird--item img {
		box-shadow: var(--horizontal-margin-eighth) var(--vertical-margin-eighth) 3px rgba(0,0,0,0.4);
		border-radius: var(--horizontal-margin-double);
	}

	.image-grid--item-image-with-overlay {
		position: relative;
	}
	
	.image-grid--item-image-overlay-text {
		/* color: #9EBFF8; */
		/* color: lemonchiffon; */
		color: #ffff99;
		font-weight: bold;
		text-shadow:
			var(--text-shadow-size-medium) var(--text-shadow-size-medium) var(--text-shadow-size-medium) black,
			calc(-1 * var(--text-shadow-size-medium)) var(--text-shadow-size-medium) var(--text-shadow-size-medium) black,
			var(--text-shadow-size-medium) calc(-1 * var(--text-shadow-size-medium)) var(--text-shadow-size-medium) black,
			calc(-1 * var(--text-shadow-size-medium)) calc(-1 * var(--text-shadow-size-medium)) var(--text-shadow-size-medium) black,
			var(--text-shadow-size-medium) 0px var(--text-shadow-size-medium) black,
			0px var(--text-shadow-size-medium) var(--text-shadow-size-medium) black,
			calc(-1 * var(--text-shadow-size-medium)) 0px var(--text-shadow-size-medium) black,
			0px calc(-1 * var(--text-shadow-size-medium)) var(--text-shadow-size-medium) black;
		position: absolute;
		top: var(--vertical-margin-quarter);
		left: var(--horizontal-margin-half);
	}
	
	.image-grid--item-caption {
		text-align: center;
	}

	.image-grid--item-caption.double-line {
		height: var(--vertical-margin-quadruple);
	}
	
	.image-grid--item-caption-longtext {
		font-size: var(--font-size-small);
	}
	
}

/*  Standard Section  */
@media (min-width: 0px) {
	.section {
		width: 100%;
		overflow: hidden;
		margin-top: var(--vertical-margin-double);
		padding-top: var(--vertical-margin-double);
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}

	.section.continued-from-above {
		margin-top: 0;
	}

	.section.section-listing {
		margin-left: 2%;
		width: 90%;
	}
	
	section.section a {
		color: black;
	}

	
	section h2 {
		padding-bottom: var(--vertical-margin-half);
	}
	
	.section-subsection {
		width: var(--wrapper-width);
	}

	.section-subsection.flexbox {
		display: flex;
		flex-wrap: wrap;
	}

	.section-subsection.multi-column {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		align-items: center;
	}

	.section-subsection.title {
		margin-bottom: var(--vertical-margin-single);
		flex-wrap: wrap;
	}

	.section-subsection.title > .annotation {
		padding-left: var(--horizontal-margin-quadruple);
	}

	.section-subsection.annotation {
		margin-top: var(--vertical-margin-single);
	}

	.section-subsection.annotation * {
		font-size: var(--font-size-small);
	}

	.section-last {
		margin-bottom: 0;
	}

	.section-caption {
		display: block;
		width: 40%;
		/* -webkit-background-size: cover; */
		/* -moz-background-size: cover; */
		/* -o-background-size: cover; */
		background-size: cover;
	}

	.section-title {
		position: relative;
		display: block;
		font-weight: 600;
		color: #999999;
		margin-bottom: var(--vertical-margin-half);
		padding-left: var(--horizontal-margin-quadruple);
		letter-spacing: .5px;
		text-shadow: 1px 1px 2px var(--brand-color-1-light);
	}
	
	.section-title span {
		font-weight: 600;
		color: #999999;
		text-shadow: 2px 2px 3px var(--brand-color-1-light);
	}

	.section-title:before {
		position: absolute;
		left: 0;
		top: 0.425em;
		width: var(--horizontal-margin-triple);
		height: var(--vertical-margin-single);
		background-color: var(--brand-color-1);
		border-radius: 2px 2px 2px 2px;
		content: "";
	}

	.section-tagline {
		position: relative;
		color: #3c4858;
		font-size: var(--font-size-xlarge);
		font-weight: 500;
		margin-bottom: 2%;
	}

	.section-details {
		display: block;
		width: 60%;
		margin-left: 3%;
		/* float: left; */
		/* padding: 80px 0; */
	}

	.section.caption-right .section-details {
		margin-left: 0;
		margin-right: 3%;
	}

	.section.description-right .section-details {
		margin-left: 0;
		margin-right: 3%;
	}

	.section-details h3 {
		color: #fff;
		font-size: 30px;
		font-weight: bold;
		text-transform: uppercase;
		max-width: 560px;
		margin: 0 0 3.333333333333333% 40px;
		letter-spacing: 1px;
		line-height: 40px;
	}

	.section-details p {
		/* max-width: 560px; */
		/* margin: 0 0 3.333333333333333% 0; */
		letter-spacing: 1px;
	}

	.section-details a {
		color: #fff;
		font-size: 16px;
		margin: 0 0 0 40px;
		text-decoration: none;
	}

	.section-details a span {
		margin-left: 10px;
	}

	.section-flexbox {
		width: 68%;
		display: flex;
		justify-content: space-between;
	}

	/* Number of column is just determined by flex box based on the width of each item. */
	.section-flexbox-item.two-column {
		width: 46%;
	}

	.section-subsection.three-column .section-flexbox-item {
		width: 33%;
	}

	.section-flexbox-item.four-column {
		width: calc(100vw * 0.15);
		height: calc(100vw * 0.15);
	}

	.section-flexbox-item.five-column {
		width: calc(100vw * 0.12);
		height: calc(100vw * 0.12);
	}

	.section-subsection .table-row {
		display: flex;
		width: 100%;
		margin-bottom: 15px;
	}

	.section-subsection .table-head, .section-subsection .table-body {
		border-bottom-style: dashed;
		border-bottom-width: 2px;
		border-bottom-color: #679aef;
	}
		
	.section-subsection .table-head {
		display: inline-flex;
		align-items: center;
		padding-left: var(--horizontal-margin-half);
		width: 10%;
		background-color: var(--brand-color-1-transparent);
	}

	.section-subsection .table-body {
		padding-left: var(--horizontal-margin-single);
	}

	.section-subsection .table-body span {
		display: block;
	}

	.section-subsection .table-body span p:first-child {
		margin-top: 0;
	}
} /* END @Media All */

@media (orientation: landscape) and (min-width: 961px) {
	.section-subsection .table-head {
		width: 30%;
	}
	.section-subsection .table-body {
		width: 90%; /* Header:Body width ration is set to 10:90 as default for landscape screen. */
	}
} /* @media landscape */

@media (orientation: portrait) {
	
	.section {
		padding-top: var(--vertical-margin-double);
	}

	section.section .wrapper {
		flex-direction: column;
		align-items: center;
	}

	.section.section-listing {
		margin-left: auto;
		margin-right: auto;
	}
	
	.section-title {
		padding-left: 0px;
		margin-left: 3%;
		margin-right: 3%;
	}

	.section-title:before {
		top: calc(-1 * var(--vertical-margin-single));
		left: -3%;
	}
	
	.section-subsection {
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.section-subsection.title {
		justify-content: start;
	}

	.section-subsection.title > .annotation {
		padding-left: 3%;
	}

	.section-subsection > div, .section-subsection > form {
		/* width: 90%!important; */
		width: 90%;
	}

	.section-subsection.one-column-for-portrait {
		flex-direction: column;
	}	

	.section-subsection.one-column-for-portrait .section-flexbox-item {
		width: 90%;
	}	

	.section-flexbox-item.four-column { /* four becomes two on portrait screen */
		width: calc(100vw * 0.45);
		height: calc(100vw * 0.45);
	}
	
	.section-flexbox-item.one-column-for-portrait {
		width: calc(100vw * 0.9);
	}

	.section-caption {
		width: 100%;
		height: auto;
		order: 1;
	}

	.section-tagline {
		margin: 0 0;
	}

	.section-details {
		width: 100%;
		height: auto;
		padding: 20px 0;
		margin-left: 0;
		order: 2;
	}

	.section.caption-right .section-details {
		margin-right: 0;
	}

	.section.description-right .section-details {
		margin-right: 0;
	}
	
	.section-details h3,
	.section-details p,
	.section-details a {
		font-size: 16px;
		display: block;
		text-align: left;
	}

	.section-details h3,
	.section-details a {
		margin: 0 auto;
	}

	.section-details p,
	
	.section-subsection.annotation {
		/* width: 90%; */
	}
	
	.section-subsection.tabular {
		flex-direction: column;
		align-items: center;
	}

	.section-subsection .table-row {
		margin-left: 0;
		flex-direction: column;
	}
	
	.section-subsection .table-head {
		width: 60%;
		border-bottom-style: none;
		background-color: inherit;
		font-weight: bold;
	}

	.section-subsection .table-body span {
		margin-bottom: 15px;
	}


} /* END @Media Portrait */

/* Image Slider */
@media (min-width: 0px) {
	.slider {
		width: 100%;
		overflow: hidden;
		padding-top: var(--vertical-margin-quadruple);
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		align-items: center;
	}

	.slider-inner {
		display: flex;
		justify-content: center;
		padding-top: 20px;
	}

	.flex-caption {
		width: 98%;
		padding: 2%;
		left: 0;
		bottom: 0;
		background: var(--brand-color-1);
		color: #fff;
		text-shadow: 0 -1px 0 rgba(0,0,0,.3);
		font-size: var(--font-size-small);
		font-family: 'M PLUS Rounded 1c', san-serif;
	}
}

@media (orientation: landscape) {
	.slider-caption, .slider-inner {
		width: var(--wrapper-width);
	}

	.flexslider {
		width: 80%;
	}
}

@media (orientation: portrait) {
	.slider-caption {
		width: 100%;
	}
	
	.slider-inner {
		width: 80%;
	}

	.flexslider {
		width: 100%;
	}

	.flex-caption {
		font-size: 12px;
	}
}	
/* END Image Slider */

/* Form General */
@media (min-width: 0px) {

	.section.form {
		padding-top: var(--vertical-margin-single);
	}

	.section.form form {
		margin-top: var(--vertical-margin-single);
	}

	.section.form span.radio-button {
		display: inline;
		border: 2px none #ccc;
		border-radius: 4px;
		background-color: #f8f8f8;
		padding-right: var(--horizontal-margin-half);
	}

	.section.form .mandatory {
		color: red;
		vertical-align: super;	
	}

	.section.form .missed-mandatory {
		border-color: red;
	}
	
	.section.form span.radio-button.missed-mandatory {
		border-color: red;
		border-style: solid;
	}

	.section.form .section-subsection .table-head, .section.form .section-subsection .table-body {
		border-bottom-style: none;
	}

	.section.form .table-head {
		font-weight: bold;
	}
	
	.section.form .submit-button {
		width: 100%;
		text-align: center;
	}
	
} /* @media all */

@media (orientation: portrait) {
	.section.form .table-body {
		padding-left: 0;
	}
} /* @media portrait */

/* END Form General */

/* Contact Form */
@media (orientation: landscape) {
	.section.form.contact .section-subsection .table-head {
		width: 18%;
	}
	.section.form.application .section-subsection .table-head {
		width: 24%;
	}
}

@media (orientation: portrait) {
	.section.form.contact {
		padding-top: 0;
		margin-top: 0;
	}
	.section.form.contact .section-subsection .table-head {
		width: 100%;
	}
	.section.form.application .section-subsection .table-head {
		width: 55%;
	}
}
/* END Contact Form */

/*  Footer  */
@media (min-width: 0px) {
	footer {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: var(--vertical-margin-quintuple) 0;
		border-top: 1px #dedede solid;
		background: grey;
		text-align: center;
		margin-top: var(--vertical-margin-double);
	}
	
	footer .logo {
		width: var(--header-logo-width);
		/* height: calc(var(--header-logo-width) * 86 / 98); */
		height: auto;
		aspect-ratio: 86/98;
		filter: var(--filter-to-brand-color-1);
	}
	
	footer div, footer a {
		font-size: var(--font-size-small);
	}
	
	footer .sitemap {
		margin-top: var(--vertical-margin-double);
	}
	
	footer .sitemap a {
		margin-right: var(--horizontal-margin-half);
		margin-left: var(--horizontal-margin-half);
		margin-top: var(--vertical-margin-half);
		margin-bottom: var(--vertical-margin-half);
	}

	footer .rights {
		color: #EBEBEB;
		/* font-size: var(--font-size-small); */
		margin-top: 30px;
	}

	footer .rights a {
		text-decoration: none;
		font-weight: bold;
		color: #3b3b3b;
	}
}