html,body {
background-color: #FFFFFF;
font-size:100%;
margin:0px;
padding:0px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-image: url(images/bg.png);
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
}


::-moz-selection {
color:#848484;
background-color: #b1d3ee;
}

::selection {
color:#848484;
background-color: #b1d3ee; 
}

::-webkit-scrollbar {
width:0.75rem; 
background: #d7e3f6;  
}

::-webkit-scrollbar-thumb {
 background: linear-gradient(to bottom, #d7e3f6, #7f97c9); /* your gradient colors /
/ Optional: add border-radius for a rounded handle */
border-radius: 10px;
-webkit-border-radius: 0.625rem;
-moz-border-radius: 0.625rem;
border-radius: 0.625rem;
}


.content-first img {
max-width: 100%;
height: auto;	
}


a:link, a:visited {
color:#aebf8a;
font-weight: 600;
text-decoration: none;
text-decoration: underline;

}

a:hover {
color:#77ae7b;
text-decoration: underline;
}

.center {
text-align: justify;
text-align-last: center;
}

.justify {
text-align: justify;
}


.card {
filter: grayscale(100%) opacity(0.5);
-webkit-filter: grayscale(100%) opacity(0.5);
width:12%;
height: auto;
margin:0 1%;
} 


.header img {
width:100%;
display: block;
-webkit-box-shadow: 0px 0px 4rem -1.9375rem rgba(0,0,0,0.36);
-moz-box-shadow: 0px 0px 4rem -1.9375rem rgba(0,0,0,0.36);
box-shadow: 0px 0px 4rem -1.9375rem rgba(0,0,0,0.36);
height: auto;
}

.header {
position: relative;
width: 100%;
height: auto;
}

.navi-wrap {
position: absolute;
max-width: 100%;
bottom: 0px;
left:0px;
right: 0px;
z-index: 999999;
}

.line {
display: block;
padding:0.4% 0px;
width: 100%;
margin-bottom: 0.9375rem;
background-color: rgba(255, 255, 255, 0.6);
}


.navi-line {
padding:3% 0px;
border-bottom:;
background-color: rgba(255, 255, 255, 0.6);
width: 100%;
}


.fix {
position: fixed;
top:0px;
border-bottom:solid 0.0625rem #d1cfcf;
background-color:#FFFFFF;
-webkit-box-shadow: 0px 0px 4rem -1.9375rem rgba(0,0,0,0.36);
-moz-box-shadow: 0px 0px 4rem -1.9375rem rgba(0,0,0,0.36);
box-shadow: 0px 0px 4rem -1.9375rem rgba(0,0,0,0.36);
}



 .top {
background-color: #7c8cbf;
width: 100%;
height: 0.125rem;
}
 
.justify {
text-align: 
}

.center {
text-align: center;
}

.divider {
text-align: center;
display: block;
margin:3.125rem auto;
}

.divider img {
width:256px;
height:77px;
}

 .links {
text-align: center;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 0.8125rem;
padding:0px 0px;
color:#77ae7b;
text-transform: uppercase;
}


.footer p {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.25rem;
font-size: 0.5625rem;
text-align: center;
color:#525881;
}
       

.footer {
-webkit-box-shadow: 0px 0px 4rem -1.9375rem rgba(0,0,0,0.36);
-moz-box-shadow: 0px 0px 4rem -1.9375rem rgba(0,0,0,0.36);
box-shadow: 0px 0px 4rem -1.9375rem rgba(0,0,0,0.36);
padding:0.625rem 2.1875rem;
background-color: #7f97c9;
}

.links a, .links a:link, .links a:visited {
color:#77ae7b;
line-height: 2.5rem;
text-decoration: none;
}


.content-first {
width: 70%;
margin: 8.125rem auto;
color:#727272;
font-family: 'Open Sans', sans-serif;
} 


.content-first p {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 0.875rem;
line-height: 1.8125rem;
color:#727272;
}


ul {
list-style-type: hiragana-iroha;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 0.875rem;
color:#727272;
line-height: 2.8125rem;
}


ol {
list-style-type: hiragana-iroha;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 0.875rem;
color:#727272;
line-height: 2.8125rem;
}

.content-first h1::first-letter{
font-weight: 800;
color:#8ba7e0;
}


.content-first h1 {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 1.875rem;
color:#000000;
padding-bottom: 0.325rem;
line-height: 2.5rem;
text-transform: uppercase;
}


.content-first h2 {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 1rem;
color:#8e8e8e;
text-transform: uppercase;
line-height: 2.5rem;
}


strong {
font-weight: 700;
}


i {
letter-spacing: 0.0625rem;
color:#f1a2cd;
}


u {
color:#fb9656;
}


p strong {
color:#94ba88;
font-weight: 700;
}

b {
color:#94ba88;
font-weight: 700;
}

p img {
padding: 0;
margin: 0;
line-height: 0;
border: 0;
}

input, textarea, select {
    outline: none !important;
    margin: 0px;
    padding: 0.3125rem 1.25rem;
    box-sizing: border-box;
    border: dashed 0.0625rem #99a6b0;
    background-color: #f8f8f8;
    font-size: 0.75rem;
    font-family: "Open Sans", sans-serif;
    color: #6e7ee4;
    text-align: justify;
 }

input:hover, textarea:hover, select:hover {
    background-color: #ffffff;
	color: #525881;
}


 .flex {
display: flex;
width:90%;
margin: 0 auto;
flex-wrap: wrap;
justify-content: center;
}

.navi {

}

.navi a, .navi a:link {
color:#606060;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
margin:0px 1.375rem;
font-size: 0.8125rem;
vertical-align: middle;
text-decoration: none;
line-height: 3.75rem;
letter-spacing: 0.125rem;
text-transform: uppercase;
}

.navi a:hover {
color:#7c8cbf;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
margin:0px 1.375rem;
font-size: 0.8125rem;
vertical-align: middle;
text-decoration: none;
line-height: 3.75rem;
letter-spacing: 0.125rem;
text-transform: uppercase;
}


.vertical-line {
margin-left: 0.875rem;
margin-right: 0.625rem;
}



.logo{
padding-left:3%;
font-family: 'Open Sans', sans-serif;
font-size: 2.375rem;
line-height: 3.75rem;
text-transform: uppercase;
color: #7f97c9;
}

.mobile{
width: 100%;
text-align:  center;
padding-left:3%;
font-family: 'Open Sans', sans-serif;
font-size: 1.5625rem;
line-height: 3.75rem;
text-transform: uppercase;
cursor: pointer;
display: none;
}

.main-head {
display: block;
}

.mobile-h {
display: none;
}


@media screen and (max-width: 400px) {
  
.show a:link { line-height: 2.5rem; margin: 0.625rem;
}

.main-head { display: none;
}
 
.mobile-h { display: block; }

}

@media screen and (max-width: 1000px) {

.logo, .navi, .line {  display: none;  } 

.show { display: block; width: 100%; text-align: center; } 

.show a:link { font-size: 0.625rem; }

.mobile{ font-size: 1.125rem; text-align: center; display: block; }

}



@media screen and (min-width: 1440px) { 
html  {
 font-size: 106%;
} }


@media screen and (min-width: 1600px) { 
html  {
 font-size: 116%;
} }


@media screen and (min-width: 1680px) { 
html  {
 font-size: 123%;
} }


@media screen and (min-width: 1920px) { 
html  {
  font-size: 141%;

} }
 

@media screen and (min-width: 2560px) { 
html  {
  font-size: 188%;

} }

/* Start https://www.cursors-4u.com */ 
* {
	cursor: url(https://cur.cursors-4u.net/nature/nat-4/nat351.cur), auto !important;} 
/* End https://www.cursors-4u.com */

/* 
  SEE BOTTOM FOR DEMO STYLES
*/
/** Pure CSS quotations **/
blockquote {
position: relative;
font: 400 0.875rem 'Open Sans', sans-serif;
padding: 1em 0 0 0;
color: #727272;
}

blockquote::before {
  position: absolute;
  content: "‘";
  color: #7f97c9;
  font:700 15em/2em sans-serif;
  opacity: 20%;
  top: -0.5em;
  left: -0.05em;
  right: unset;
}

blockquote::after {
  position: absolute;
  content: "‘";
  color: #7f97c9;
  font:700 15em/2em sans-serif;
  opacity: 50%;
  top: -0.5em;
  left: -0.25em;
  right: unset;
}

blockquote[role='review']::before {
  position: absolute;
  content: "’";
  color: var(--color-primary);
  font:700 15em/2em sans-serif;
  opacity: 20%;
  top: -0.5em;
  left: unset;
  right: 0.25em;
}

blockquote[role='review']::after {
  position: absolute;
  content: "’";
  color: var(--color-primary);
  font:700 15em/2em sans-serif;
  opacity: 50%;
  top: -0.5em;
  left: unset;
  right: 0.05em;
}

blockquote cite {
font: 400 1.875rem 'Open Sans', sans-serif;
margin: 1em 0 0 0;
padding-bottom: 0.625rem;
line-height: 2.5rem;
text-transform: uppercase;
color:#000000;
}

blockquote cite::before {
	content: "✃  ";
	color: #7f97c9;
}

blockquote q {
	quotes: "" "" "" "";
	display: block;
}

blockquote q::before {
	content: no-open-quote;
}

blockquote q::after{
	content: no-close-quote;
}

blockquote i {
	letter-spacing: 0.0625rem;
	color:#f1a2cd;
}

blockquote b {
	color:#94ba88;
	font-weight: 700;
}

/*
  GLOBAL STYLES (FOR DEMO PURPOSES ONLY)
*/
:root {
	interpolate-size:allow-keywords;
	font-family:sans-serif;
	--color-primary:#9f76b6;
	--color-secondary:#523965;
	--color-accent:#cba1da;
	--color-danger:#c13e34;
	--color-info:#006080;
	--color-fade-min:#fffcff;
	--color-fade-med:#f7f2f9;
	--color-fade-max:#d8d2dB;
	--color-dark-min:#8d64a3;
	--color-dark-med:#6d4b80;
	--color-dark-max:#583e6c;
	--color-title:#2f3749;
	--color-text:#969aa3;
	--color-text-hover:#6d4b80;
	--color-text-active:#523965;
	--color-link:var(--color-primary);
	--color-link-hover:#6d4b80;
	--color-link-active:#523965;
	--padding-min:.625rem;
	--padding-med:1rem;
	--padding-max:2.25rem;
	--radius-min:clamp(0rem,calc(var(--radius-med) - var(--padding-med) / 2),var(--radius-med));
	--radius-med:1rem;
	--radius-max:clamp(var(--radius-med),calc(var(--radius-med) + var(--padding-med) / 2),calc(var(--radius-med) * 1.5));
	--shadow-outset:0 .5rem 1.25rem #00000010,0 .35rem .75rem #00000015;
	--transition-min:0.15s;
	--transition-med:0.3s;
	--transition-max:0.6s;
	--block-size-min:4rem;
	--block-size-med:6rem;
	--block-size-max:8rem;}

.shadow-outset {
	-webkit-box-shadow:var(--shadow-outset);
	box-shadow:var(--shadow-outset);}
	
.border-rounded {
	-webkit-border-radius:var(--radius-med);
	border-radius:var(--radius-med);}
	
.background-white {
	background-color:white;}
	
.border-rounded .border-rounded {
	-webkit-border-radius:var(--radius-min);
	border-radius:var(--radius-min);}
	
[class*='border'][class*='background'] {
	padding:var(--padding-med) calc(var(--padding-med) * 2);}
	
	
.collecttable {
		display: inline-block;
		vertical-align: top;
		width: 49%;
		padding: 0;
		margin: 0;
		line-height: 0;
}

.dimmedCard
{opacity:0.5;
	filter:alpha(opacity=30);}
	

/* Toggle Sections
-------------------------------------------------------------- */
.toggle-box {
  display: none;
}

.toggle-box + label {
  cursor: pointer;
  display: block;
  font-weight: bold;
  line-height: 21px;
  margin-bottom: 5px;
  color: rgba(12, 79, 120, 1); 
}

.toggle-box + label + div {
  display: none;
  margin-bottom: 10px;
}

.toggle-box:checked + label + div {
  display: block;
}

.toggle-box + label:before {
  background-color: rgba(115, 202, 255, 0.41);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  color: rgba(12, 79, 120, 1);
  content: "+";
  display: block;
  float: left;
  font-weight: bold;
  height: 20px;
  line-height: 20px;
  margin-right: 5px;
  text-align: center;
  width: 20px;
}

.toggle-box:checked + label:before {
  content: "\2212";
}