body{
  background-color: lightyellow;
}
.header {
  height: 250px;
  background-color: yellow;
}
.footer{
  height: 250px;
  background: black;
  color: #fff;
  clear: both;
}
.main-contents, .left-navi, .right-navi {
  height: 3700px;
}
.main-contents {
  background-color: white;
  color: #fff;
  float: left;
  width: 70%; /*********/
}
.left-navi {
  height: 10px; /******追加****左カラム長さ****/
  background-color: blue;
  color: #fff;
  width: 3%;  /************/
  float: right;
}
.right-navi {
  background-color: green;
  color: #fff;
  float: right;
  width: 29.5%;/***********/
}
.main{
  width: 97%;/*****-3% left-navi *********/
  float: right;
}
/***************************************/
@media screen and (max-width: 800px){ /**ex*600px**IPAD OK*/
  .main, .left-navi,.main-contents, .right-navi{
  width: 100%;
  }
}
/*******************************************************************/
/********************** Youtube Background *********************************************/
/*******************************************************************/
html, .container {
                font-family: 'Lato', sans-serif;
                color: #1d1d1d;
                padding: 5px; /*上下左右のbody隙間増える*5px**/
                margin: 0px;
            }
            body { height: 40vh; }

            .example-marquee {
                position: relative;
            }

            .content {
                display: table;
                width: 60%;
                min-height: 35vh; /*********高さ巾*****25vh*******/
                z-index: 2;
                position: relative;
            }

            .content .inner {
                display: table-cell;
                vertical-align: middle;
                text-align: center;
                padding-left: 6px;
                padding-right: 6px;
            }

            .content .inner h1 {
                font-size: 52px;
                color: white;
                text-shadow: 0px 1px 3px rgba(0,0,0,0.5);
            }


/*************************************************************/
/*****************************************/
/************** H1 **********************/
h2{
	padding:10px;
	font-size:20px;
	border:2px solid #325A8C;
	border-radius: 20px 10px 40px 15px/50px 40px 10px 20px;
}
/****************************************/

/******************リセット****************************************/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}



/*******************************************************************/
/********************************************/
/*******************************************/

/*************************************************/
/*************************************************/
ul.sidenav {
	list-style-type: none;
	margin: 0;
	padding: 0;
	width: 200px;
	background-color: #f1f1f1;
	position: relative;
	overflow: auto;
}
ul.sidenav li a {
	display: block;
	color: #000000;
	padding: 8px 16px;
	text-decoration: none;
}
ul.sidenav li a.active {
	background-color: #da3c41;
	color: white;
}
ul.sidenav li a:hover:not(.active) {
	background-color: #1b2538;
	color: white;
}
div.content {
	margin-left: 25%;
	padding: 1px 16px;
	height: 1000px;
}
@media screen and (max-width: 900px) {
	ul.sidenav {
		width: 100%;
		height: auto;
		position: relative;
	}
	ul.sidenav li a {
		float: left;
		padding: 15px;
	}
	div.content {
		margin-left: 0;
	}
}
@media screen and (max-width: 480px) {
	ul.sidenav li a {
		text-align: center;
		float: none;
	}
}

/******************************************************/
/******************** list *****right******************************/
/*******************************************************/
/* 構造に関する記述 */
.list {
  display: table;
  table-layout: fixed;
  width: 90%;
}
.list-box {
  display: table-cell;
  padding: 5px;
  vertical-align: up;
}
.list-img {
  max-height: 70px;
  overflow: hidden;
  text-align: center;
}
.list-img img {
  width: 100px;
}
 
/* 中身のデザインに関する記述 */
.list-cat {
  background-color: #3ae;
  border-radius: 10px;
  color: #fff;
  font-size: 10px;
  padding: 0 5px;
}
.list-date {
  color: #aaa;
  font-size: 10px;
  margin-left: 10px;
}
.list-text h2 {
  color: #000;
  font-size: 14px;
  line-height: 1.4;
  margin-right: 10px;
}
/*******************************************/

/******************************************/
/******************************************/
/*********https://maipyon.net/balloon-design/*************************************/
/********************************************/
.article {
  position: relative;
  padding: 10px 5px;
  margin-top: 1em; /***** 3em **ok****上要素との縦間隔**/
}

.balloon-head{
  position: absolute;
  top: -36px;
  width: 50px;
  margin: 0 auto 40px;
  padding: 5px;
  background: #ffb74d;
  text-align: center;
  font-weight: bold;
  color: #fff;
}

.balloon-head::after {
  content: '';
  border: 8px solid transparent;
  border-top-color: #ffb74d;
  position: absolute;
  bottom: -16px;
  left: 50%;
  margin-left: -8px;
}

.move {
  animation: 0.5s move infinite alternate linear;
}

@keyframes move {
  to { transform: transtateY(0); }
  from { transform: translateY(4px); }
}
/***********************************************/
/******************************************************/
/******************** list *****right******************************/
/*******************************************************/
/* 構造に関する記述 */
.list {
  display: table;
  table-layout: fixed;
  width: 90%;
}
.list-box {
  display: table-cell;
  padding: 5px;
  vertical-align: up;
}
.list-img {
  max-height: 70px;
  overflow: hidden;
  text-align: center;
}
.list-img img {
  width: 100px;
}
 
/* 中身のデザインに関する記述 */
.list-cat {
  background-color: #3ae;
  border-radius: 10px;
  color: #fff;
  font-size: 10px;
  padding: 0 5px;
}
.list-date {
  color: #aaa;
  font-size: 10px;
  margin-left: 10px;
}
.list-text h2 {
  color: #000;
  font-size: 14px;
  line-height: 1.4;
  margin-right: 10px;
}
/*************************************************************/
/*************************************************************/
/*********************************************************/
/***********************************footer WAVE********** oK ********************************/
/****** https://deshinon.com/2019/03/03/koseiteki-dokusouteki-footer-css/ :****/
/******************************************************************************/
@import url("https://fonts.googleapis.com/css?family=Lato:400,400i,700");

body {
  font-family: Lato, sans-serif;
}

footer {
  width:94.3vw; /**100vw*94.3vw**ok*/
  position:fixed;
  bottom:0px
}
footer div {
  background-color:#4478e3;
  margin: -5px 0px 0px 0px;
  padding:0px;
  color: #000;
  text-align:center;
}
svg {
  width:100%;
}
.arrow {
  stroke-width: .0px; /** 3px *矢印*/
  stroke:yellow;
}
.topball {
  animation: ball 1.5s ease-in-out;
  animation-iteration-count:infinite;
  animation-direction: alternate;
  animation-delay: 0.3s;
  cursor:pointer;
}

.wave {
  animation: wave 3s linear;
  animation-iteration-count:infinite;
  fill: #4478e3;
}
.drop {
  fill: transparent;
  animation: drop 5s ease infinite normal;
  stroke: #4478e3;
  stroke-width:0.5;
  opacity:.6; 
  transform: translateY(80%);
}
.drop1 {
  transform-origin: 20px 3px;
}
.drop2 {
  animation-delay: 3s;
  animation-duration:3s;
  transform-origin: 25px 3px;
}
.drop3 {
  animation-delay: -2s;
  animation-duration:3.4s;
  transform-origin: 16px 3px;
}
.gooeff {
    filter: url(#goo);
}
#wave2 {
  animation-duration:5s;
  animation-direction: reverse;
  opacity: .6
}
#wave3 {
  animation-duration: 7s;
  opacity:.3;
}
@keyframes drop {
  0% {
    transform: translateY(80%); 
    opacity:.6; 
  }
  80% {
    transform: translateY(80%); 
    opacity:.6; 
  }
  90% { 
    transform: translateY(10%) ; 
    opacity:.6; 
  }
  100% { 
    transform: translateY(0%) scale(1.5);  
    stroke-width:0.2;
    opacity:0; 
  }
}
@keyframes wave {
  to {transform: translateX(-100%);}
}
@keyframes ball {
  to {transform: translateY(20%);}

/****************************************************************************/