@charset "utf";

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html {
    font-family: 'Noto Sans JP', sans-serif;
}

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;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

body{background-color:; 
    line-height: 150%;
    }
main{margin: 0px 70px ; line-height: 150%;}
p{line-height: 150%;}
header {background-color:#b3d2df;}
ul{display: table;margin: 0 auto; width: 100%; table-layout: fixed;}
ul li{display: table-cell; box-sizing: border-box;}
ul li a{display: block;text-decoration: none; color:#555; font-weight:bold;  padding: .4em .8em; text-align: center;}
.menu{font-size: 23px;}
.menu1{background-color: white;}
.menu2{background-color: white;}
.menu3{background-color: white;}
.menu4{background-color: white;}
.menu5{background-color: white;}
.menu6{background-color: white;}
ul li:hover{background-color: #b3d2df;}
.float_test {
    background-color:  #b3d2df;    /* 背景色指定 */
    display: inline-block;
    /*float:  left;               /* 横並びにする */
    margin:  30px;               /* 要素と要素の間を開ける */
    padding:  20px;             /* 余白指定 */
    width: 43%;
    line-height: 150%;
}
.btn_test {
    display:  block;                        /* ブロック要素にする */
    color:  #512f1f;                           /* 文字の色指定 */
    background-color: #b3dfc0;                 /* 背景色指定 */
    padding:  20px;                         /* 余白指定 */
    text-align:  center;                    /* 文字を中央揃えに */
    text-decoration:  none;                 /* 文字の装飾を無くす */
    border-radius:  5px;                    /* 角丸指定 */
    width:  250px;                          /* 幅指定 */
    box-shadow: 0px 2px 3px 0px #8dc09c;    /* 影をつける */
    margin:  5% 17%; 
}
.next {
    color: #512f1f;
    background-color: #b3d2df;
    border-bottom: 5px solid #9dbac5;
    left: 45%;
  }
  
.next:hover {
    margin-top: 3px;
    color: #512f1f;
    background: #b3d2df;
    border-bottom: 2px solid #9dbac5;
  }
  

.next{
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #512f1f;
  border-radius: 0.5rem;
}



*, *:before, *:after {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}
.cp_cssslider {
    background:#b3d2df;
    border: 10px solid #ffffff;
    box-shadow:1px 1px 5px rgba(0,0,0,0.7);
    height:410px;
    width:610px;
    margin:2em auto;
    overflow:visible;
    position:relative;
}
.cp_cssslider .mask {
    overflow:hidden;
    width: 600px;
    height:400px;/* ボーダー分を差し引く */
}
.cp_cssslider ul {
    margin:0;
    padding:0;
    position:relative;
}
/* tooltip */
.cp_cssslider .tooltip {
    background:rgba(0,0,0,0.7);
    width:auto;
    height:auto;
    position:relative;
    bottom:95px;
    left:-300px;
    -webkit-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;
}
.cp_cssslider .tooltip h1 {
    color:#fff;
    padding:0 0 0 20px;
}
.cp_cssslider li:hover .tooltip{
    left:0px;
}
.cp_cssslider:hover li,
.cp_cssslider:hover .cp_progressbar {
    -webkit-animation-play-state:paused;
    animation-play-state:paused;
}
.cp_cssslider li {
    width:600px;
    height:400px;
    position:absolute;
    top:-200px;
    list-style:none;
}
.cp_cssslider li:nth-child(1){
    -webkit-animation:cycle1 25s linear infinite;
    animation:cycle1 25s linear infinite;
}
.cp_cssslider li:nth-child(2){
    -webkit-animation:cycle2 25s linear infinite;
    animation:cycle2 25s linear infinite;
}
.cp_cssslider li:nth-child(3){
    -webkit-animation:cycle3 25s linear infinite;
    animation:cycle3 25s linear infinite;
}
.cp_cssslider li:nth-child(4){
    -webkit-animation:cycle4 25s linear infinite;
    animation:cycle4 25s linear infinite;
}
.cp_cssslider li:nth-child(5){
    -webkit-animation:cycle5 25s linear infinite;
    animation:cycle5 25s linear infinite;
}
@keyframes cycle1 {
    0%  { top:0px; }
    4%  { top:0px; }
    16% { top:0px; opacity:1; z-index:0; }
    20% { top:200px; opacity:0; z-index:0; }
    21% { top:-200px; opacity:0; z-index:-1; }
    50% { top:-200px; opacity:0; z-index:-1; }
    92% { top:-200px; opacity:0; z-index:0; }
    96% { top:-200px; opacity:0; }
    100%{ top:0px; opacity:1; }
}
@keyframes cycle2 {
    0%  { top:-200px; opacity:0; }
    16% { top:-200px; opacity:0; }
    20% { top:0px; opacity:1; }
    24% { top:0px; opacity:1; }
    36% { top:0px; opacity:1; z-index:0; }
    40% { top:200px; opacity:0; z-index:0; }
    41% { top:-200px; opacity:0; z-index:-1; }
    100%{ top:-200px; opacity:0; z-index:-1; }
}
@keyframes cycle3 {
    0%  { top:-200px; opacity:0; }
    36% { top:-200px; opacity:0; }
    40% { top:0px; opacity:1; }
    44% { top:0px; opacity:1; }
    56% { top:0px; opacity:1; z-index:0; }
    60% { top:200px; opacity:0; z-index:0; }
    61% { top:-200px; opacity:0; z-index:-1; }
    100%{ top:-200px; opacity:0; z-index:-1; }
}
@keyframes cycle4 {
    0%  { top:-200px; opacity:0; }
    56% { top:-200px; opacity:0; }
    60% { top:0px; opacity:1; }
    64% { top:0px; opacity:1; }
    76% { top:0px; opacity:1; z-index:0; }
    80% { top:200px; opacity:0; z-index:0; }
    81% { top:-200px; opacity:0; z-index:-1; }
    100%{ top:-200px; opacity:0; z-index:-1; }
}
@keyframes cycle5 {
    0%  { top:-200px; opacity:0; }
    76% { top:-200px; opacity:0; }
    80% { top:0px; opacity:1; }
    84% { top:0px; opacity:1; }
    96% { top:0px; opacity:1; z-index:0; }
    100%{ top:200px; opacity:0; z-index:0; }
}
/* progressbar */
.cp_progressbar {
    position:relative;
    top:-5px;
    width:680px;
    height:5px;
    background:#000000;
    -webkit-animation:progressbar 25s ease-out infinite;
    animation:progressbar 25s ease-out infinite;
}
/* animation */
@keyframes progressbar {
    0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; z-index:2; }
    4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; z-index:2; }
    16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.3; z-index:2; }
    18%, 38%, 58%, 78%, 98% { width:100%; opacity:0;  z-index:2; }
}

h5{ font-size:40px;
}
.irokae{
    color: brown;
    background-color: #b3d2df;
}
.line{
    font-size: 40px;
border-bottom: solid 3px #b3d2df
}


.under {
    background: linear-gradient(transparent 60%,#ebfac9 50%);
}


.gyoukan{
    line-height: 170%;
}


/*サイトマップ用ここから加えました*/


.sitemap ul li ul {
    margin-top: .5em;
    margin-bottom: .75em;
    margin-left: 48px;
  }
   
  .sitemap ul li ul li {
    margin-bottom: .25em;
    position: relative;
  }
   
  .sitemap ul li ul li::before {
    content: "";
    position: absolute;
    top: -0.5em;
    left: -16px;
    width: 10px;
    height: calc(100% + 1.25em);
    border-left: 1px solid #3972b2;
  }
   
  .sitemap ul li ul li:last-child::before {
    height: calc(1em + .25em);
  }
   
  .sitemap ul li ul li::after {
    content: "";
    position: absolute;
    top: .75em;
    left: -16px;
    width: 10px;
    border-bottom: 1px solid #3972b2;
  }

  .sitemap ul li a{
    text-align: left;
    list-style: inside;
    list-style-type: disc;
    text-decoration:underline;
  }

  .sitemap ul li{
    display: block;
      list-style:circle;
  }

  .sitemap ul li:hover{
    background: #ffffff00;}

  .sitemap ul {
    display: block;
    list-style-type: disc;
    padding-inline-start: 20px;
    list-style:circle;
    width: 90%;
    margin: 0%;
}

  .sitemap{
      font-size: 22px;
  }


/*ここからfooter*/
.footer {
    height: auto;
    width: 100%;
    background-color: #512f1f;
    color: white;
    text-align: center;
    position: absolute;
    top: auto;
    font-weight: normal;
    font-size: 18px;
}

.top {
    color: white;
    text-decoration: underline;
}

.contest {
    color: #ffce95;
    text-decoration: underline;
}