/*
YUI 3.18.1 (build f7e7bcb)
Copyright 2014 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/

html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}


html, body {
    width: 100%;
   
    margin: 0 auto;
    background-position: center center;
    background:#f9f5f5;
   
    background-size: cover;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    /* overflow: scroll; */
 }

 .box {
     display: block;
     width: 977px;
     height: 60px;
     padding-top:15px;
     margin: 0 auto;
     border-bottom: double 3px pink;
     
 }
 #Top-category {
    background: #f9f5f5;
    padding:0;
    margin-top:2px;
    text-align: center;
    width: 100%;
    margin: 0;
    height: 50px;
    box-shadow: inset 0px px 0px 0px rgba(119, 97, 114, 0.122);
    }
#Top-category ul {
    padding: 0;
    margin: 0;
    display: inline-block;   
   }
#Top-category ul li{
    float: left;

    padding: 0 6px;
    text-align: center;
    letter-spacing: 0.1px;
    position: relative;
    line-height: 110%;
    display: table;
    height: 35px;
    margin: 5.5px 8px;
  

    }
 #Top-category ul li span{
     font-size: 20px;
     font-weight: bold;
    display: table-cell;
    vertical-align: middle;
    }
    #Top-category ul li:before{
    position:absolute;
    top:10px;
    right:-6px;
    bottom:10px;
    content:"";
    display:block;
    border-right:1px solid rgb(153, 68, 68);
    }
    #Top-category ul a:last-child li:before{
    border-right:none;
    }
    #Top-category ul a{
    color: #666666;
    text-decoration:none;
    font-size: 13px;
    }
    #Top-category ul a:hover{
    color: #fff;
    opacity: 1;
    }
    #Top-category ul li:hover{
    background-color:#e90b89;
    border-radius: 4px;
    opacity: 0.6;
    }
   .Toppage {
      color: rgb(243, 183, 228);
    }

    #l-main {
        width: 980px;
        height: 2400px;
        margin:0 auto;
        vertical-align: baseline;
        position: relative;
        background: #ffffff;
        /* overflow: scroll; */
    }

    .A-html { 
        background:#f565a6;
        color: white;
       margin: 0px 0 0px 20px;
       display: inline-block;
       width: 250px;
       height: 40px;
       background: #e960ad;/*色*/
        opacity: 0.8;
        border-radius: 3px;/*角の丸み*/
        box-shadow: inset 0 2px 10px rgba(70, 42, 61, 0.2), inset 2 -10px 4 #4c0a4e4a;
      
    }
    .A-box {
        width: 980px; 
        height:310px ;
        /* background-image: url(../canstockphoto4939851.jpg);  */
        
    }
    .A-html h1 {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        vertical-align: middle;
        text-align: center;
        margin-top:2px;
        font-size: 25px;
        font-weight: bold;
        letter-spacing: 3px;

        
    }
    .machino {
        position: relative;
        top:40px;
        font-size: 40px;
        width: 900px;  
        height: 300px;
        font-family: 'Times New Roman', Times, serif;
        font-weight: bold;
        text-align: center;
        margin: 0 auto;
       line-height: 2;
       z-index: 2;
        animation-name: fadein;
        animation-duration: 6s;
       /* animation-iteration-count: infinite; */
       animation-iteration-count: 2; /*2回繰り返して終わり*/
       }
        @keyframes fadein {
        from {
        opacity: 0;
        transform: translateY(20px);
       }
        to {
        opacity: 1;
        transform: translateY(0);
       }
        } 

    

    .machino h1 {
        margin-bottom: 20px;
       
    }
    
    
    
    .NPO1 {
        /* position: relative; */
         margin:  140px 30px 30px 20px;
        text-align: center;
        /* top:100px; */
        font-size: 23px;
        font-family: Georgia, 'Times New Roman', Times, serif;
        font-weight: bold;
        line-height: 2.5;
    }
    .NPO1 h1{
        font-size: 25px;
        font-weight: bold;
    }
    .NPO2 {
        /* position: relative; */
        text-align: center;
        top:120px;
        font-size: 22px;
        color: #066132;
        font-family: Georgia, 'Times New Roman', Times, serif;
        margin: 0 0 70px 0;
        font-weight: bold;
        line-height: 2.2;
    }
    .tree img{
        position: relative;
        top:65px;
    }
    .tree {
        
        margin: 0 auto;
        height: 1050px;
        text-align: center;
        padding: 0;
      
         overflow: hidden; 
    }
    
    
    .tree-box {
     position: relative;
     top: 45px;
    }
    .tree-box ul {
        
       display: inline-block;
       margin: 0 auto;
       /* padding-top: 10px; */
       /* height: 100%; */
    }
    .tree-box ul li {
       
     font-size: 14px;
    border: solid 1px black;
    border-radius: 50%;
    padding: 2.0px;
    text-align: center;
    
    }
    .sha {
        position: relative;
        top: -500px;
        left:-50px;
        background: white;
    }
    .nin {
        position: relative;
        top: -550px;
        left:20px;
        background: white;
    }
    .comu {
        position: relative;
        top: -550px;
        left:90px;
        background: white;
    }
    .sou {
        position: relative;
        top: -570px;
        left:-100px;
        background: white;
    }
    .ryt {
        position: relative;
        top: -590px;
        left:0px;
        background: white;
    }
    .rule {
        position: relative;
        top: -590px;
        left:110px;
        background: white;
    }
    .char {
        position: relative;
        top: -610px;
        left:-110px;
        background: white;
    }
    .academic {
        position: relative;
        top: -630px;
        left:-30px;
        background: white;
    }
    .handan {
        position: relative;
        top: -640px;
        left:40px;
        background: white;
    }
    .create {
        position: relative;
        top: -660px;
        left:120px;
        background: white;
    }
    .jyu {
        position: relative;
        top: -660px;
        left:-140px;
        background: white;
    }
    .nebari {
        position: relative;
        top: -690px;
        left:-40px;
        background: white;
    }
    .trans {
        position: relative;
        top: -700px;
        left:40px;
        background: white;
    }
    .omoi {
        position: relative;
        top: -720px;
        left: 120px;
        background: white;
    }
    .friend {
        position: relative;
        top: -720px;
        left: -120px;
        background: white;
       
    }
    .iyoku {
        position: relative;
        top: -770px;
        left: -35px;
        background: white;
    }
    .act {
        position: relative;
        top: -775px;
        left: 25px;
        background: white;
    }
    .kyou {
        position: relative;
        top: -810px;
        left: 110px;
        background: white;
    
    }
    .sub-circle {
       display: block;

    }
    .houkago {
        position: absolute;
        top:1100px;
        left:10px;
        width: 300px;
        height: 270px;
        padding: 10px 0 15px 0;
        background: rgb(254, 183, 245);
        border-radius: 45% 45% 50% 60%/70% 60% 60% 50%;
        font-weight: bold;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        animation: border-animation 6s infinite linear;
      }
      .houkago h1 {
          font-family: 'Times New Roman', Times, serif;
          font-size: 22px;
          font-weight: bold;
          margin: 0;
          letter-spacing: 2px;
      }
    .doyoubi {
        position: absolute;
        top:1050px;
        left:670px;
        width: 294px;
        height: 320px;

        padding: 20px 0px;
        background: rgba(180, 226, 245, 0.827);
        border-radius: 50% 50% 40% 50%/50% 80% 80% 90%;
        font-weight: bold;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        animation: border-animation 7s infinite linear;
      }
      .doyoubi h1 {
          font-family: 'Times New Roman', Times, serif;
          font-size: 22px;
          font-weight: bold;
          margin: 0 auto;
          letter-spacing: 2px;
          

      }
      .doyoubi li {
          color: rgb(6, 143, 22);
        
      }
      .manabi {
        position: absolute;
        top:1500px;
        left:20px;
        width: 305px;
        height: 290x;
        padding: 20px 8px;
        background: rgb(252, 250, 199);
        border-radius: 55% 50% 60% 50%/40% 50% 40% 40%;
        font-weight: bold;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        animation: border-animation 6s infinite linear;
      }
      .manabi h1 {
          font-family: 'Times New Roman', Times, serif;
          font-size: 24px;
          font-weight: bold;
          margin: 0;
          letter-spacing: 2px;
      }
      .manabi li {
        color: rgb(6, 143, 22);
      }
      .sei {
        position: absolute;
        top: 1500px;
        left:620px;
        width: 335px;
        height: 380px;
        padding: 30px 9px;
        background: rgb(227, 202, 249);
        border-radius: 50% 50% 50% 50%/50% 50% 40% 40%;
        font-weight: bold;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        animation: border-animation 6s infinite linear;
      }
      .sei h1 {
          font-family: 'Times New Roman', Times, serif;
          font-size: 23px;
          font-weight: bold;
          margin: 0;
          letter-spacing: 2px;
      }
      .sei li {
        color: rgb(6, 143, 22);
      }
      .kosodate {
        position: absolute;
        top: 1880px;
        left:70px;
        width: 350px;
        height: 345px;
        padding: 30px 8px 24px 8px;
        background: rgb(202, 249, 207);
        border-radius: 40% 40% 40% 40%/40% 40% 50% 50%;
        font-weight: bold;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        animation: border-animation 6s infinite linear;
      }
      .kosodate h1 {
          font-family: 'Times New Roman', Times, serif;
          font-size: 25px;
          font-weight: bold;
          margin: 0;
          letter-spacing: 2px;
      }
      .kosodate li {
        color: rgb(6, 143, 22);
      }
    
      .jiyu {
        position: absolute;
        top: 1760px;
        left:380px;
        width: 200px;
        height: 130px;
        padding: 10px 5px 0 5px;
        background: rgba(249, 226, 202, 0.854);
        border-radius: 40% 40% 40% 40%/40% 40% 50% 50%;
        font-weight: bold;
        
        animation: border-animation 6s infinite linear;
      }
      .jiyu h1 {
          font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
          font-size: 32px;
          font-weight: bold;
          margin: 0;
          letter-spacing: 2px;
      }
      .jidou {
        position: absolute;
        top: 1940px;
        left:470px;
        width: 250px;
        height: 150px;
        padding: 50px 5px 0 10px;
        background: rgba(202, 228, 249, 0.882);
        border-radius: 40% 40% 40% 40%/40% 40% 50% 50%;
        font-weight: bold;
        
        animation: border-animation 6s infinite linear;
      }
      .jidou h1 {
          font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
          font-size: 34px;
          font-weight: bold;
          margin: 0;
          letter-spacing: 2px;
      }
      
    　  #PageTopBtn {
        position: fixed; /*ボタンの配置場所を固定*/
        bottom: -10px; /*下からのボタンの配置場所を指定*/
        right: 10px; /*右からのボタンの配置場所を指定*/
    }
        #PageTopBtn a {
        display: block; /*配置の調整*/
        font-size: 20px;
        text-decoration: none; /*文字の下線を消す*/
        color: rgb(24, 12, 2); /*文字の色*/
        background:rgba(253, 217, 222, 0.823); /*ボタンの背景色*/
        text-align: center; /*文字を中央に配置*/
        border-radius: 0%; /*ボタンの角を少し丸くする*/
        outline: none; /*クリックしたときの黒い枠を消す*/
    }
        #PageTopBtn a:hover {
        text-decoration: none; 
        background: #f9f5f5; /*マウスオーバー時の背景色*/
    }
    .flowerlogo {
        position: absolute;
    
        top: 1930px;
        left: 780px;
       z-index: 1;
       margin: 0 auto;
       opacity: 0.9;

    }
    footer {
        margin:0 auto;
        padding: 0px;
        position: relative;
        top:0px;
        text-align: center;
        width: 980px;
        height: 350px;
        background: #f9f5f5;
        

    }
    footer p {
        font-size: 20px;
       
        line-height: 2em;
        letter-spacing: 2px;
        color: floralwhite;
      
     
            
    }
    .copy {
        text-align: left;
        margin-top: 120px;
        margin-left: 30px;
        color: #0f0e11;
        font-size: 22px;
    }