/* ===== Webサイト全体のスタイル ===== */
/* html */
:root{
  --main: #f0fff0;
  --sub:  #556b2f;
  --acsent: #6b8e23;
  --nav0: #eeffc7;
  --nav1: #9acd32;
  --color1: #94a540;
  --color2: #c0c67a;
  --color3: #eddfb2;
  --color4:  #7a8446;
  --color5:  #7d911b;
  --color6:  #353e05;
  --color7: #053812;
  --font: #6f4a2a;
  --background: #a98546;

  --animate-duration: 2s !important;
  --animate-delay: 3s !important;
  --animate-repeat: 1 !important;
}
/*
.h1 {
  text-align: center;
  border-radius: 30px;
  padding: 20px;
  padding-bottom: 10px;
  padding-top: 30px;
  margin-left: 10%;
  margin-right: 10%;
  margin-top: 10px;
  background: rgb(224, 255, 255,0.5);
}

h1{
  font-size: 60px;
  color: var(--acsent);
  margin: 0px;
  padding-left: 20px;
  padding-bottom: 0px;
}

.small{
  color: #2e8b22;
  font-size: 30px;
}

標準体
font-family: 'Noto Sans JP', sans-serif;
筆
font-family: 'Yuji Syuku', serif;

丸
font-family: 'Zen Maru Gothic', sans-serif;
*/
.wall-dark{
  background-color: var(--main);
    opacity: 1.0;
    background-image:  repeating-linear-gradient(45deg, var(--color1) 25%, transparent 25%, transparent 75%, var(--color1) 75%, var(--color1)),
                       repeating-linear-gradient(45deg, var(--color1) 25%, var(--color4) 25%, var(--color4) 75%, var(--color1) 75%, var(--color1));
    background-position: 0 0, 40px 40px;
    background-size: 80px 80px;
}
.wall-light{
  background-color: var(--main);
    opacity: 1.0;
    background-image:  repeating-linear-gradient(45deg, var(--color1) 25%, transparent 25%, transparent 75%, var(--color1) 75%, var(--color1)),
                       repeating-linear-gradient(45deg, var(--color1) 25%, var(--color3) 25%, var(--color3) 75%, var(--color1) 75%, var(--color1));
    background-position: 0 0, 40px 40px;
    background-size: 80px 80px;
}


html{
  height: 100%;
  margin: 0px;
  padding: 0px;
  font-family: 'Noto Sans JP', sans-serif;
  text-align: left;
  
  background-color: var(--main);
  opacity: 1.0;
  background-image:  repeating-linear-gradient(45deg, var(--color1) 25%, transparent 25%, transparent 75%, var(--color1) 75%, var(--color1)),
                     repeating-linear-gradient(45deg, var(--color1) 25%, var(--color2) 25%, var(--color2) 75%, var(--color1) 75%, var(--color1));
  background-position: 0 0, 40px 40px;
  background-size: 80px 80px;
}

/* body */
body{
  text-align: left;
  font-family: sans-serif;
  height: 100%;
  width: 100%;
  margin: 0px;
  padding-top:0px;
}

h2{
  text-align: left;
  font-size: 45px;
  color: var(--acsent);
  margin: 0px;
  padding-left: 20px;
  padding-bottom: 0px;
  border-left: solid 25px #9acd32;
}

h3{
  text-align: left;
  font-size: 40px;
  color: var(--sub);
  margin: 0px;
  padding: 20px;
  padding-bottom: 0px;
}

h5{
  margin-top: 50px;
  margin-left: 50px;
  padding: 5px;
  font-size:25px;
  color: orangered;
  background-color: white;
  border: solid 1px orangered;
  transition: all 500ms 0s ease-in;
  text-align: left;
  width: 200px;
  border-radius: 10px;
}
h5 a{
  color: orangered;
}

h5:hover{
  color: white;
  background-color: orangered;
}
h5 a:hover{
  color: white;
}

.point1{
  position: relative;
}
.table-style1{
  margin-left: 20px;
  margin-right: 20px;
}
.table-style1 td{
  border: solid 1px black;
  margin: 0px;
  text-align: left;
}
.table-style1 th{
  border: solid 1px black;
  margin: 0px;
  text-align: lfet;
}
.table-style1{
  border-collapse: collapse;
}

.table-style2{
  margin: 20px;
}
.table-style2 td{
  margin: 0px;
  text-align: left;
}
.table-style2 th{
  margin: 0px;
  text-align: left;
}
.table-style2{
  border-collapse: collapse;
}

.table-style3{
  margin-left: 20px;
  margin-right: 20px;
}
.table-style3 th{
  font-weight: normal;
  border: solid 1px white;
  background-color: #72a252;
  color: white;
  text-align: left;
  font-size: 19px;
}
.table-style3 td{
  border: solid 1px white;
  background-color: #e2efda;
  text-align: left;
  font-size: 19px;
}
.table-style3 .td{
  border: solid 1px white;
  background-color: #f1f7ed;
  text-align: left;
  font-size: 19px;
}
.table-style3{
  border-collapse: collapse;
}

.img-style{
  margin:0px;
}

h4{
  text-align: left;
  font-size: 30px;
  color: #2f4f4f;
  margin: 3px;
  padding: 3px;
  text-decoration: none;
}
.point{
  font-size: 22px;#2f
  border: solid 3px 4f4f;
  padding-top: 30px;
  padding-left: 16px;
  padding-right: 16px;
}



header{
  
  height: 500px;/* 高さ */
  padding-top: 0px;/* 上がわの余白 */
  width : 100%;
  background-repeat: repeat;
  background-size: cover;
}

b{
  font-family: 'Yuji Syuku', serif;
}

.temp{
  content: "";
}

div{
  text-align: left;
  padding-top: 18px;
  padding-bottom: 10px;
  padding-left: 5%;
  padding-right: 5%;
  margin-bottom: 0px;
  margin-top: 0px;
  background-color: rgba(240, 255, 240, 0.9);
}
.div-top{
  border-radius: 20px 20px 0px 0px;
  padding-top: 30px;
}
.div-bottom{
  border-radius: 0px 0px 20px 20px;
  padding-bottom: 30px;
}
.div-one{
  border-radius: 20px;
  padding-top: 30px;
  padding-bottom: 30px;
}
.list-bunken
{
  position: relative;
  list-style-type: none;
}
.list-bunken li{
  padding-bottom: 30px;
  word-break: break-all;
}
.list-bunken li::before{
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--color4);
  display: inline-block;
  position: absolute;
  left: 0%;
  margin: 11px 0px 0px 12px;
}
.list1
{
  position: relative;
  list-style-type: none;
}
.list1 li::before{
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--color4);
  display: inline-block;
  position: absolute;
  left: 0%;
  margin: 11px 0px 0px 12px;
}
.list2{
  position: relative;
  list-style-type: none;
}
.list2 li{
  counter-increment: list;
}
.list3
{
  position: relative;
  list-style-type: none;
}
.list3 li::before{
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--color5);
  display: inline-block;
  position: absolute;
  left: 0%;
  margin: 11px 0px 0px 12px;
}
.list4
{
  position: relative;
  list-style-type: none;
}
.list4 li::before{
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--color6);
  display: inline-block;
  position: absolute;
  left: 0%;
  margin: 11px 0px 0px 12px;
}


.list2 li:before{
  position: absolute;
  left: 0%;
  content: counter(list);
  color: var(--color1);
  display: inline-block;
  margin-right: 11px 0px 7px 20px;
}


a{
  text-decoration: none;
  color: black;
}
li a:hover{
  color: white;
}
.about:hover{
  color: blue;
}
.setumei{
  display: none;
}

.a{
 color: red;
 text-decoration: underline;
}

.a:hover{
  color: blue;
}

.sitemap li a{
  text-decoration: none;
  color: black;
}
.sitemap li a:hover{
  color: blue;
}

p {
  color:black;
  text-align: left;
}
.big-font{
  font-size: 25px;
}

.top-size {
	padding: 100px;
}
.displayinline div{
  display: inline-block;
  padding: 10px;
  margin: 2px;
}
.displayinline-change{
  margin: 0px;
  padding: 0px;
}
.displayinline-change div{
  display: inline-block;
  padding: 0px;
  margin: 0px;
}

.next{
  position: relative;
  font-size:25px;
  margin-top: 0px;
  padding-left:9px;
  padding-right: 9px;
  padding-top: 3px;
  padding-bottom: 3px;
  margin-right: 10px;
  color: orangered;
  background-color: white;
  border: solid 1px orangered;
  transition: all 500ms 0s ease-in;
}

.next:hover{
  color: white;
  background-color: orangered;
}

.back{
  font-size:25px;
  padding-left:9px;
  padding-right: 9px;
  padding-top: 3px;
  padding-bottom: 3px;
  margin-left: 10px;
  color: dodgerblue;
  background-color: white;
  border: solid 1px dodgerblue;
  transition: all 500ms 0s ease-in;
}

.back:hover{
  color: white;
  background-color: dodgerblue;
}

.home{
  font-size:25px;
  padding-left:9px;
  padding-right: 9px;
  padding-top: 3px;
  padding-bottom: 3px;
  margin-right: 10px;
  color: #9acd32;
  background-color: white;
  border: solid 1px #9acd32;
  transition: all 500ms 0s ease-in;
}

.home:hover{
  color: white;
  background-color: #9acd32;
}

.footer {
  margin: 15px;
  font-size: 20px;
}
/*
.section1{
  background-color: var(--main);
  opacity: 0.8;
  background-image:  repeating-linear-gradient(45deg, var(--color1) 25%, transparent 25%, transparent 75%, var(--color1) 75%, var(--color1)),
                     repeating-linear-gradient(45deg, var(--color1) 25%, var(--color2) 25%, var(--color2) 75%, var(--color1) 75%, var(--color1));
  background-position: 0 0, 40px 40px;
  background-size: 80px 80px;
  
  
}
.section2{
  background-color: #f0fff5;
  opacity: 0.8;
  background-image:  repeating-linear-gradient(45deg, var(--color4) 25%, transparent 25%, transparent 75%, var(--color4) 75%, var(--color4)),
                     repeating-linear-gradient(45deg, var(--color4) 25%, var(--color2) 25%, var(--color2) 75%, var(--color4) 75%, var(--color4));
  background-position: 0 0, 40px 40px;
  background-size: 80px 80px;
}

.section3{
  background-color: #f0fff5;
  opacity: 0.8;
  background-image:  repeating-linear-gradient(45deg, var(--color3) 25%, transparent 25%, transparent 75%, var(--color3) 75%, var(--color3)),
                     repeating-linear-gradient(45deg, var(--color3) 25%, var(--color1) 25%, var(--color1) 75%, var(--color3) 75%, var(--color3));
  background-position: 0 0, 40px 40px;
  background-size: 80px 80px;
}
.section4{
  background-color: #f0fbff;
  opacity: 0.8;
  background-image:  repeating-linear-gradient(45deg, var(--color1) 25%, transparent 25%, transparent 75%, var(--color1) 75%, var(--color1)),
                     repeating-linear-gradient(45deg, var(--color1) 25%, var(--color2) 25%, var(--color2) 75%, var(--color1) 75%, var(--color1));
  background-position: 0 0, 40px 40px;
  background-size: 80px 80px;
}
*/
.floatR{
  float: right;
}
.floatL{
  float: left;
}

.think p{
  margin-left: 15px;
}

footer{
  text-align: center;
  padding-top: 0px;
  padding-bottom: 20px;
  background-color: var(--sub);
  color: white;
  margin: 0px;
}

.top{
  font-size: 35px;
  line-height: 40px;
}

.none-display{
  display: none;
}

.opening{
  padding:0px;
  margin:0px;
  width: 100%;
  height: 100%;
  animation: opening 5s ease-in 5s, next 10s ease-in 10s infinite ;
}

td .td{
  padding: 100px;
}

@keyframes opening{
  0%{
    opasity: 1;
    width: 100%;
    height: 100%;
  }
  100%{
    opasity: 0;
    width: 0px;
    height: 0px;
    display: none;
  }
}
@keyframes next{
  0%{
    opasity: 0;
    width: 0px;
    height: 0px;
    display: none;
  }
  100%{
    opasity: 0;
    width: 0px;
    height: 0px;
    display: none;
  }
}

@media only screen and (max-width: 1000px) /*smartphone*/ 
{
  .smartphone-display{
    display: block;
  }
  .pc-display{
    display: none;
  }
  
  .irasuto1{
  padding-left: 30%;
  }
  .center{
  margin-left: 35%;
  }
  
  html{
    font-size: 25px;
  }
  
  .table-style1{
    
  }
}


@media only screen and (min-width: 1001px) /*PC*/ 
{
  .smartphone-display{
    display: none;
  }
  .pc-display{
    display: block;
  }
  .center{
    margin-left: 45%;
  }
  
  .irasuto1{
  padding-left: 40%;
  }
  
  html{
    font-size: 22px;
    text-align:justify;
  }
  
  p{
    text-align:justify;
  }
  h2{
    text-align:justify;
  }
  h3{
    text-align:justify;
  }
  h4{
    text-align:justify;
  }
  .table-style1 td{
    text-align:justify;
  }
  .table-style1 th{
    text-align:justify;
  }
  .table-style2 td{
    text-align:justify;
  }
  .table-style2 th{
    text-align:justify;
  }
  .table-style3 td{
    text-align:justify;
  }
  .table-style3 th{
    text-align:justify;
  }
  .table-style3 .td{
    text-align:justify;
  }
  .div{
    text-align:justify;
  }
  .p{
    text-align:justify;
  }
  footer{
    text-align: center;
  }
  .top-left{
    text-align:justify;
  }
  .inline div{
    text-align:justify;
  }
}

.mini-fukidashi p{
  z-index: 10;
  width: 150px;
  height: 100px;
  padding: 15px;
  margin: 5px;
  position: relative;
  background-color: #ffffff;
  color: black;
  border: solid 2px black;
  border-radius: 16px;
}
.mini-fukidashi p::before{
 z-index: 5;
 content: "";
 position: absolute;
 margin-top: -15px;
 border-top: 20px solid #000000;
 border-right: 10px solid transparent;
 border-bottom: 10px solid transparent;
 border-left: 10px solid transparent;
 top: 113%;
 right:70%;
 transform: rotate(0deg);
}
.mini-fukidashi img{
  z-index: -1000;
}
.top-left{
  text-align: left;
  vertical-align: top;
  padding: 3px;
}

.inline div{
  display: inline-block;
  padding: 10px;
  margin: 2px;
  width: 45%;
  height: 50%;
  text-align: left;
  vertical-align: top;
}

.run{
  position: relative;
  background-color: green;
  padding: 0px;
  margin: 0px;
  height: 100px;
}
.run::before{
  content: "START";
  font-size: 15px;
  position: absolute;
  left: 0px;
  bottom: 0px;
}
.run::after{
  content:"GOAL";
  font-size: 15px;
  position: absolute;
  right:0px;
  bottom: 0px;
}
.run img{
  position: absolute;
  margin: 0px;
  padding: 0px;
  width: 80px;
  top:0px;
}
.footerFont{
  font-size: 20px;
}
.footerFont::before{
  content:"<";
  left: -2px;
}
.footerFont::after{
  content:">";
  right: -2px;
}
.animatiion{
  width: 50px;
  height: 50px;
  z-index: 2;
  
}

.picture{
  margin-top: 15px;
  border: solid 3px snow;
  width: 60%;
  margin-left: 20%;
  max-width: 500px;
  min-width: 240px;
}
.dobble-pictures{
  width: 30%;
  min-width: 240px;
}
.resize{
  width: 30%;
  margin: 15px;
  max-width: 225px;
  border: solid 0.1px var(--color5);
}
.graph{
  margin-top: 15px;
  border: solid 3px snow;
  width: 60%;
  margin-left: 15%;
  max-width: 1000px;
  min-width: 400px;
}