@charset "UTF-8";
/* CSS Document */
	
	
	/* The navigation bar */
.navbar {
  overflow: hidden;
  background: linear-gradient(180deg, rgba(194,255,190,1) 0%, rgba(194,255,190,0) 100%);
  position: fixed; /* Set the navbar to fixed position */
  top: 0; /* Position the navbar at the top of the page */
  height:150px;
  width: 100%; /* Full width */

}
.navbar_bottom {
  background: linear-gradient(0deg, rgba(0,5,255,0.9) 0%, rgba(0,5,255,0) 100%);
  minimum width: 1000px;
  position: fixed; /* Set the navbar to fixed position */
  bottom:0; /* Position the navbar at the top of the page */
  height:130px;
  width: 100%; /* Full width */

}

.navbar_bottom a {
float: center;
display: inline-block;
  text-align: center;
  padding: 5px;
  text-decoration: none;
  color: #00FF66;
  font-family: 'Karla', sans-serif;
  font-weight: bold;
  margin-bottom:0;

}


.navbar_bottom a:hover {
 
  text-decoration: underline;

}
.navbar_bottom2 {
float: center;
margin-top:60px;
line-height: 0.8;

}
.navbar2 {
float: left;
margin-left:10px;
margin-top:5px;

}

.navbar3 {
float: right;
margin-right:10px;

}

/* Links inside the navbar */
.navbar a {
  float: right;
  display: block;
  text-align: center;
  padding: 5px;
  text-decoration: underline;
  color: black;
  font-family: 'Karla', sans-serif;
}

/* Change background on mouse-over */
.navbar a:hover {
text-decoration: none;

}

.navbar2 a {
  text-align: center;
  padding-left:20%;
  text-decoration: underline;
  color: black;
 
}

/* Main content */
.main {
max-width: 900px;
min-width:500px;
  margin-top: 100px; /* Add a top margin to avoid content overlay */
  margin-left: 30px;
}

.main a{
  text-align: center;
  text-decoration: underline;
  color: black;

}
.main a:hover{
  text-align: center;
  text-decoration: none;
  color: black;

}
.title_marder{
font-family: 'Karla', sans-serif;
font-size: 20pt;
line-height: 1;
}
.title_marder2{

font-family: 'Noto Serif JP'700,Georgia,serif;
font-size: 14pt;
line-height: 0.5;
}

.image_marder {
border:none;
font-family: 'Karla', sans-serif;
font-size:10pt;
line-height: 1.3;
text-align:right;

}
.image_marder_in {
width: 100%;
height:auto;
}
.image_marder_in2 {
width: 50%;
height:auto;
text-alig:left;
margin-right:50%;
}

.main2 {
padding:15px;
background-image: url("images/background.png" );
background-size:1300px;
align: center;
float: none;
display:inline-block;
max-width: 600px;
min-width:500px;
margin-top: 50px; 
  color: #00FF66;
  font-family: 'Karla', sans-serif;
  font-weight: bold;/* Add a top margin to avoid content overlay */
  /* text-shadow: -2px 0 blue, 0 2px blue, 3px 0 blue, 0 -2px blue;*/
  background-color:rgba(0,5,255,0.4);
 
}
.main2 a{
color: #00FF66;
text-decoration: underline;
}
.main22{
font-weight:100;
}
.main2 a:hover{
color: white;
text-decoration: underline;
}
.main3 {
align: center;
float: none;
display:inline-block;
max-width: 800px;
min-width:500px;
margin-top: 100px; 
  color:  #FD0080;;
  font-family: 'Karla', sans-serif;
  font-weight: bold;/* Add a top margin to avoid content overlay */
}

.image_book{

margin-bottom:10px;
}

body {
	margin:0 0 0 0;    
	padding:0 0 0 0;
	background-color: #C2FFBE;
	font-family: 'Noto Serif JP',Georgia,serif;
    font-size: 18px;
    line-height: 1.75;
}
.a {
	position:fixed;
	bottom:0;
	margin-right:25%;
	margin-left:0%;
	z-index:10;
	text-align:center;

	
}
.b {
	position:fixed;
	bottom:0;
	padding-right:10%;
	padding-left:10%;
	margin-right:32%;
	margin-left:32%;
	z-index:10;
	text-align:center;

	
}
.a2 {
	position:fixed;
	top:0;
	margin-left:0;
	z-index:10;
	text-align:center;
	vertical-align:middle;
	
}
.a3 {
	position:relative;
	margin-left:0;
	z-index:15;
	
}
#imagediv { /* Set rules to fill background */
  min-height: 100%;
  min-width: 1024px;
	
  /* Set up proportionate scaling */
  width: 100%;
  height: auto;
	
  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;}
.image {margin:0 0 0 0; padding: 0 0 0 0;border:none;}
.image2 {width:600px; height:auto; height:auto; opacity: 0.9;}
.image2:hover {opacity: 1;}
.arrow {margin-bottom: 0; vertical-align:bottom;}
#textdiv {position:relative; top:0px; width:50%; margin-left:25%; margin-right:25%; height:100px;; padding: 0px; border: 0px; z-index:1;}
#textdiv2 {position:relative;top:0; width:50%; margin-left: 25%;margin-right:25%; border: 4px blue solid; padding: 0px 10px 10px 10px; z-index:1;}
#textdiv2:hover {background-color: #FF0847;}
#textdiv8 {position:relative;top:0; width:90%; margin-left: 5%;margin-right:5%; border: 4px blue solid; padding: 0px 10px 10px 10px; z-index:1;}
#textdiv8:hover {background-color: #FF0847;}
#textdiv10 {position:relative;top:0; width:90%; margin-left: 5%;margin-right:5%; border: 4px #FF0847 solid; padding: 0px 10px 10px 10px; z-index:1;}
#textdiv10:hover {background-color: blue;}
#textdiv11 {position:relative;top:0; width:auto; border: none; padding: 0px 10px 10px 10px; z-index:1;}
#textdiv11 {position:relative;top:0; width:auto; border: none; padding: 0px 10px 10px 10px; z-index:1;opacity:0.8;}
#textdiv11:hover {position:relative;top:0; width:auto; border: none; padding: 0px 10px 10px 10px; z-index:1;opacity:1;}
#textdiv9 {position:relative;top:0; width:96%; margin-left: 2%;margin-right:2%; border: 4px blue solid; padding: 0px 10px 10px 10px; z-index:1;}
#textdiv9:hover {background-color: #FF0847;}
#textdiv3 {position : fixed;top:0px; width:70%; margin-left: 25%;margin-right:25%; padding: 0px; border: 0px;}
#textdiv4 {position : fixed; margin-left:20px; padding-left:0; text-align:left}
#textdiv99 { top:0px; width:80%; margin-left:-47%; padding-left: 20px; border: 0px; z-index:1;position:relative;text-align:left;align:left;}

.title {font-size:100px;color: #7EDCAD;text-align:center;font-family: 'raleway', sans-serif;font-weight: bold;line-height:10px;margin-top:100px;letter-spacing: 0px;}
.title:hover{color: #F00;}
text_cont {font-size: 14px;}
.title22 {font-size: 16px;text-align: center;color: #FFF;font-family: 'gentium basic', serif; font-style:italic;letter-spacing: 0px; font-weight:normal;marging-right:25%;}
.title23 {font-size: 16px;text-align: center;color: blue;font-family: 'helvetica', sans-serif;line-height:26px;letter-spacing: 1px;text-decoration:none;}
.title28 {font-size: 16px;text-align: center;color: #FF0847;font-family: 'helvetica', sans-serif;line-height:26px;letter-spacing: 1px;text-decoration:none;}
.title282 {
color: #FF0847;border-bottom: solid #FF0847;
}
.title282:hover {
color: #FF0847;border-bottom: none;
}
.title23vertical {font-size: 16px;text-align: center;color: blue;font-family: 'helvetica', sans-serif;line-height:26px;letter-spacing: 1px;text-decoration:none;transform: rotate(-90deg);transform-origin: left top 0;
-webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);

  /* also accepts left, right, top, bottom coordinates; not required, but a good idea for styling */
  -webkit-transform-origin: left;
  -moz-transform-origin: left;
  -ms-transform-origin: left;
  -o-transform-origin: left;
  transform-origin: left;

  /* Should be unset in IE9+ I think. */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.title23vertical:hover{color: #FF0847;}
.title22:hover{color: #FF0;}
.barra{text-align: center;}
.title22 a:link{color: #FFF;text-decoration:none;border-bottom: solid 1px; }
.title22 a:visited{color: #FFF;text-decoration:none;border-bottom: solid 1px;}
.title22 a:hover{color: blue;border-bottom: solid blue;}
.title23 a:link{color: blue;border-bottom: solid blue; }

.title23 a:visited{color: blue;border-bottom: solid blue; #FFF;text-decoration:none;border-bottom: solid 1px;}
.title23 a:hover{color: blue;border-bottom: none;}
.title24 {font-size: 22px;text-align: left;color: #FFF;font-family: 'helvetica', sans-serif;border-bottom: solid 1px;left:20px;}
.title24:hover {
	font-size: 22px;
	text-align: right;
	color: #FF0;
	font-family: 'quattrocento', sans-serif;
	border-bottom: solid 1px;
	left:20px;
}
.title25{
	font-size: 16px;text-align: left;color: black;font-family: 'helvetica', sans-serif;line-height:26px;letter-spacing: 1px;text-decoration:none;
}
.title25 a:link{color: #000;border-bottom: solid 1px;}
.title25 a:visited{color: #000;text-decoration:none;border-bottom: solid 1px;}
.title25 a:hover{color: #000;text-decoration:none;border-bottom: none}

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 0px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


</style>