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: 2700px;
}
.main-contents {
  background-color: white;
  color: #fff;
  float: left;
  width: 70%; /*********/
}
.left-navi {
  height: 10px; /******追加****左カラム長さ****/
  background-color: white;
  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);
            }


/*************************************************************/
/******https://cotodama.co/flexbox_responsive/*******写真の横にテキスト****/
/*************************************************************/
flex{
  max-width: 600px;
 }
img{
  max-width: 97%;
  display: block;
  margin: 0 auto; /****0****/
}
@media screen and (min-width:600px) {
  .flex{
    display:flex;
    flex-wrap:nowrap;
    justify-content:space-between;
  }
  .item+.item{
    margin-left:1.0em;
  }
}
/*****************************************/
/************** 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;
}


/*********************padding 235px****ok*******************/
/*******************************************************************/
/***************************** GOOGLE MAP ******ok***********/
/*******************************************************************/
.gmap {
height: 0;
overflow: hidden;
padding-bottom: 56.25%;
position: relative;
}
.gmap iframe {
position: absolute; /*absolute*/
left: 0; /*****0***/
top: 0;
height: 90%;
width: 95%; /******95%**ok****/
}
/********************************************/
/*******GOOGLE MAP  中央に置く**https://www.granfairs.com/blog/staff/centering-by-css******/
/********************************************/
.gmap {
  width: 100%;
  margin: 0 auto;
  max-width: 880px;
}
/*******************************************/
/****************** flex box ***************/
[class^="img-flex-3"] {
	margin-bottom: 10px;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}

.img-flex-2 img { width: 49%; }
.img-flex-3 img { width: 32%; }
.img-flex-4 img { width: 24%; }
/*************************************************/
/*************************************************/
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;
	}
}
/**********************ひとこと*********************************************/
/**************https://maipyon.net/wordpress-howto-write/*******************/
/*******************************************************************/
.hitokoto{
  background: rgba(215, 253, 205, 0.61);
  margin: 0em 0; /*****0.1em***上との隙間******/
  padding: 35px; /****ok******/
  border-radius: 10px;
margin-left: 8px; /***8px*ok******/
width: 180px;　/***180px* ok ******/

}

.hitokoto-circle1{
  font-size: 16px;
  line-height: 1.5;
  position: absolute;
  margin-top: -37px;
  font-weight: bold;
  color: #fff;
  background-color:#4caf50;
  border-radius: 50%;
  text-align: center;
  width: 24px;
  height:24px;
}

.hitokoto-circle1:after{
  content: "と";
  position: absolute;
  margin-top: .2em;
  font-weight: bold;
  color: #fff;
  background-color:#4caf50;
  border-radius: 50%;
  text-align: center;
  width: 24px;
  height: 24px;
}

.hitokoto-circle2:before{
  content: "";
  position: absolute;
  top: 100%;
  margin-left: -12px;
  border: 5px solid transparent;
  border-top: 10px solid #4caf50;
  -ms-transform: rotate(-20deg);
  -webkit-transform: rotate(-20deg);
  transform: rotate(-20deg);
}

.hitokoto-circle2{
  position: absolute;
  font-size: 16px;
  line-height: 1.5;
  margin-top: -37px;
  margin-left: 40px;
  font-weight: bold;
  color: #fff;
  background-color:#4caf50;
  border-radius: 50%;
  text-align: center;
  width: 24px;
  height: 24px;
}

.hitokoto-circle2:after{
  content: "と";
  position: absolute;
  margin-top: .2em;
  font-weight: bold;
  color: #fff;
  background-color:#4caf50;
  border-radius: 50%;
  text-align: center;
  width: 24px;
  height: 24px;
}

.hitokoto p{
  margin: 0;
  padding: 0;
}
/******************************************************/
/******************** 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://himakan.net/web/css/css_style_waku ******/
/******************************************/
.box{
  font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;  background-color: #fafafa;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 0 0 1%;
margin-left: 5px;　 /****ok******/
}
.box h1{
  margin: 0;
  padding: 2% 3% 1.5%;
  background-color: #eee;
  border-bottom: 1px dashed #ccc;
  font-size: 1.1em;
  font-weight: normal;
  color: #333;
}
.box p{
  padding: 0 3%;
  line-height: 2em;
  color: #333;
}
/******************************************/
/******************************************/
/*********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;
}
/*************************************************************/
.movie-wrap {
     position: relative;
     padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
     height: 0;
     overflow: hidden;
}
.movie-wrap iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}

/*************************************************************/
/****************https://www.sejuku.net/blog/76864***********************/
/*****main-contentsの文字色を指定********************************************************/
/*************************************************************/

.main-contents {
    background-color: #fff; /*****ok******/
}
p {
    color: #000000; /*****ok******/
}
/****************************************************************************/
/************************** 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:96.7vw; /*****96.7vw***ok**/
  position:fixed;
  bottom:0px
}
footer div {
  background-color:#4478e3;
  margin: -5px 0px 0px 0px;
  padding:0px;
  color: #fff;
  text-align:center;
}
svg {
  width:100%;
}
.arrow {
  stroke-width: .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%);}