@charset "utf-8";
*, *::before *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
    }

body {
    background-color: rgb(230, 230, 226);
   
    /* border-top: 30px solid #fff; */

    font-size: 1.5rem;
    font-family: sans-serif;
    /* width: 850px; */
    margin: 0 auto;
    min-height: 100vh;
    display: grid;
    grid-template:
        "... ...... ...... ...... ..." auto
        "... header header header ..." 150px
        "... ...... ...... ...... ..." 15px
        "... main   ...... aside  ..." 1fr
        "... ...... ...... ...... ..." 10px
        "... footer footer footer ..." 130px
        "... ...... ...... ...... ..." 
        / auto minmax(300px, 650px) 10px 300px auto;
}

a {
    text-decoration:none;
    }
a:link, a:visited, a:hover, a:active {
        color: black;
    }


    body#wrapper {
   
        position: relative;
        background: url('images/top202309.jpg') center/cover;
        width: 100%;
        height: 100vh;
}


header {
    grid-area: header;
    background-color: #b7d332;
    /* background-image:url("images/kibarashi_rogo.png"); */
    background-repeat: no-repeat;
    box-shadow: 0 3px 6px rgba(0,0,0,0.2);
    padding: 25px 30px;
    font-size: small;
    line-height: 2.3rem;
}

header#toprogo {
    grid-area: header;
    background-color: rgba(255,255,255,0.0);
    background-repeat: no-repeat;
    box-shadow: 0 3px 6px rgba(0,0,0,0.2);
    
    padding: 25px 30px;
    font-size: small;
}

.header-lead {
    color: #fff;
    font-size: 1.4rem;
    line-height: 1.4rem;
    text-align: right;
}
.header-topmain {
    color: #fff;
    font-size: 1.4rem;
    letter-spacing: normal;
    line-height: 1.3rem;
    text-align: left;
    margin-left: 2rem;
}

h5 {
    margin-top: -7.5rem;
    padding-left: 5.5rem;
    font-size: 1.7rem;
    letter-spacing: -0.1rem;
    font-family: "Noto Serif JP";
}

/* h5 > p {
    margin-top: 9rem;
    margin-left: -4rem;
    font-size: small;
    letter-spacing: 0.1rem;
    font-family: "Noto Sans JP";
    } */
h5 > a > p {
        margin-top: 9rem;
        margin-left: -4rem;
        color: #fff;
        font-size: small;
        letter-spacing: 0.1rem;
        font-family: "Noto Sans JP";
        }


h4 {
    color: rgb(66, 66, 66);
    font-size: 1.7rem;
    margin-top: -7.5rem;
    margin-left: 2.5rem;
    margin-bottom: 35px;
    font-family: "Noto Sans JP";
}


.circle {
    background-color: #f1f16a;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    margin-bottom: 25px;
}

.circle2 {
    background-color: rgba(250, 250, 250, 0.20);
    width: 120px;
    height: 120px;
    border-radius: 50%;
}

.lead {
    color: rgb(56, 56, 56);
    font-size: 1.5rem;
    font-family: "Noto Serif JP";
    letter-spacing: 0.03em;
    text-align: justify;
    /* text-indent: 1.05em; */
    line-height: 2.8rem; 
    margin-bottom: 30px;
  }

  .lead-g {
    color: black;
    font-size: 1.3rem;
    font-family: "Noto Sans JP";
    letter-spacing: 0.03em;
    text-align: justify;
    line-height: 2.8rem; 
    margin-bottom: 40px;
  }

.box {
    display: flex;
    flex-wrap: wrap;

    justify-content: center;
    align-items: stretch;
    text-align: justify;
    border: solid 1px rgb(90, 88, 88);
    border-radius: 5px;
    font-size: small;
    padding: 10px 10px;
    margin-bottom: 40px;
}
.box2 {
    display: inline-flex;
    justify-content: center;
    align-items: stretch;
    text-align: start;
    border: solid 1px rgb(90, 88, 88);
    border-radius: 5px;
    font-size: small;
    padding: 10px 10px;
    margin-bottom: 50px;
}
.box3 {
    display: flex;
    flex-wrap: wrap;

    justify-content: center;
    align-items: stretch;
    text-align: justify;
    
    font-size: small;
    padding: 10px 10px;
    margin-bottom: 40px;
}

.box > p {
    padding: 5px 20px 0px 20px;
    line-height: 1.7em;
    }

.box2 > p {
        padding: 5px 5px 0px 15px;
        line-height: 1.7em;
        }

.under {
        background: linear-gradient(transparent 50%, rgb(192, 255, 97) 50%);
    }
.under_2 {
        background: linear-gradient(transparent 50%, rgb(255, 251, 30) 50%);
        margin-left: 2em;
    }

main#maintop {
        grid-area: main;
        color:#fff;
        font-family: "Noto Serif JP";
        background-color: rgba(255,255,255,0.0);
        padding: 30px;
    }

main {
    grid-area: main;
    background-color: #fff;
    padding: 25px;
    
}

aside {
    grid-area: aside;
    background-color: #fff;
    padding: 25px;
    font-size: small;
}

aside#asidetop {
    grid-area: aside;
    color:#fff;
    font-family: "Noto Sans JP";
    letter-spacing: 0.05em;
    text-align: left;
    background-color: rgba(255,255,255,0.0);
}

footer {
    grid-area: footer;
    background-color: #fff;
    padding: 25px;
    font-size: x-small;
}



 @media screen and (max-width: 550px) {
     
    body {
        grid-template: 
            
            "header" 130px
            "......" 10px
            "main  " 1fr
            "......" 5px
            "aside "
            "......" 5px
            "footer" 130px;              
    }
    
    body#wrapper {
        background-image: none;
        background: linear-gradient(#1993fd, #7ec0f9);
     } 

    header img { width: 100vw; }
    img { max-width: 100%; }
    div.box img { width: 200px; }

    aside#asidetop {
    grid-area: aside;
   
    color:black;
    font-family: "Noto Sans JP";
    letter-spacing: 0.05em;
    text-align: left;
}

}