@charset "UTF-8";


/*　　パソコン　　　　*/
@media (min-width:551px){

    body{
        margin: 0 auto;
        font-family: 'BIZ UDMincho', serif;
        background-color:hsla(0, 74%, 53%, 0.982);
        margin: 0 auto;
        max-width: 40%;
        min-height: 100vh; 
        color: #3f3f3f;
        line-height: 220%;
    }

    body{
        margin: 0 auto;
        font-family: 'BIZ UDMincho', serif;
        background-color:hsla(0, 74%, 53%, 0.982);
        padding-left: 5em;
        height: 100%;
        color: #3f3f3f;
        line-height: 200%;
    }

      h1{text-align: center;
        color: #fff700;
        margin: 0 auto;
    }
    
    .sankaku{
        position: absolute;
        background-color: rgb(14, 141, 22);
        z-index: -2;
        height: 70%;
        width: 40%;
        max-width: 40%;
        clip-path: polygon(0% 100%, 100% 100%, 50% 0%);
        text-align: center;
      }
    




    /* -------上の箱------------ */
    .hako1{

        margin: 0 auto;
        padding-top: 5%;
        padding-left: 1.2em;
        width: 14%;

    }
    
    /* -------中左の箱------------ */
    .hako2{
        float: left;
        margin: 2% 0% 0% 28%;
        height: 100%;
        width: 28%;

    }
    
    /* -------中右の箱------------ */
    .hako3{
        float: left;
        margin: 2% 2% 0% 0%;
        height: 100%;
        width: 30%;

    }
    
    /* -------下左の箱------------ */
    .hako4{
        float: left;
        margin: 0% 0% 0% 18%;
        height: 120%;
        width: 30%;

    }
    /* -------下右の箱------------ */
    .hako5{
        float: left;
        margin: 0% 2% 0% 0%;
        height: 120%;
        width: 30%;

    }
    
    /* -------下の箱------------ */
    .hako6{
        clear: both;
        margin: 0% 2% 0% 10%;
        height: 100%;
        width: 60%;

    }


    .link1{
        font-family: arial;
        font-size: 90%;
        color: #ffe100;
        background-color: #fff700;
        padding: .7em;
        border-radius: 45%;
        text-decoration: none;
        line-height: 100%;
    }


    .link1:hover{
        font-family: arial;
        font-size: 90%;
        color: #ffe100;
        background-color: #fffead;
        box-shadow: 2px 2px 3px 3px #ffecd1;
        padding: .7em;
        border-radius: 45%;
        text-decoration: none;
        line-height: 100%;
        transition:  .3s;
    }
    
    .link2{
        font-family: arial;
        font-size: 90%;
        color: #f66bc5;
        background-color: #f061b0;
        padding: .7em;
        border-radius: 45%;
        text-decoration: none;
        line-height: 100%;
        margin-left: 15%;
    }

    .link2:hover{
        font-family: arial;
        font-size: 90%;
        color: #f66bc5;
        background-color: #ffa2d5;
        box-shadow: 2px 2px 3px 3px #ffbbf3;
        padding: .7em;
        border-radius: 45%;
        text-decoration: none;
        line-height: 100%;
        transition:  .3s;
    }
    
    .link3{
        font-family: arial;
        font-size: 90%;
        color: #b4e0e3;
        background-color: #c2e7ea;
        padding: .7em;
        border-radius: 45%;
        text-decoration: none;
        line-height: 100%;
    }
    .link3:hover{
        font-family: arial;
        font-size: 90%;
        color: #b4e0e3;
        background-color: #d7fcff;
        box-shadow: 2px 2px 3px 3px #edfeff;
        padding: .7em;
        border-radius: 45%;
        text-decoration: none;
        line-height: 100%;
        transition:  .3s;
    }

    
    .henkan{
        position: absolute;
        clear: left;
        text-align: center;
        position: fixed;
        margin-top: 8rem;
    }
    
    input[type],
    text { 
        width: 90px;
        height: 30px;  
        border: #1e1e29 solid 2px;
        background-color: #eec6a1;
        margin-right: 3px;
        color: inherit;
        font-family: inherit;
        display: inline-block;

    }
    
    
    input[type=button]{
        height:38px;
        width:60px;
        cursor:pointer;
        text-shadow:none;
        background:#6d2813;
        color:#f1e4ce;
        border:#6d2813;

    }

}









/*　　　　　スマホ      */
@media (max-width: 550px){
    
    body{
        margin: 0 auto;
        font-family: 'BIZ UDMincho', serif;
        background-color:hsla(0, 74%, 53%, 0.982);
        height: 100%;
        margin: 0 auto;
        max-width: 60%;
        color: #3f3f3f;
        line-height: 200%;
    }

      h1{text-align: center;
        color: #fff700;
    }
    
    .sankaku{
        position: absolute;
        background-color: rgb(14, 141, 22);
        z-index: -1;
        height: 60%;
        width: 60%;
        max-width: 60%;
        clip-path: polygon(0% 100%, 100% 100%, 50% 0%);
      }
    
    /* -------上の箱------------ */
    .hako1{
        margin: 0% 5% 0% 45%;
        width: 14%;

    }
    
    /* -------中左の箱------------ */
    .hako2{
        float: left;
        margin: 0% 0% 0% 25%;
        height: 100%;
        width: 25%;

    }
    
    /* -------中右の箱------------ */
    .hako3{
        float: left;
        margin: 0% 0% 0% 0%;
        height: 100%;
        width: 25%;

    }
    
    /* -------下左の箱------------ */
    .hako4{
        float: left;
        margin: 0% 2% 0% 10%;
        height: 100%;
        width: 40%;

    }
    /* -------下右の箱------------ */
    .hako5{
        float: left;
        margin: 0% 2% 0% 0%;
        height: 10%;
        width: 40%;

    }

    /* -------下の箱------------ */
    .hako6{
        clear: both;
        margin: 0% 2% 0% 10%;
        height: 100%;
        width: 80%;

    }






    
    .link1{
        font-family: arial;
        font-size: 100%;
        color: #ffe100;
        background-color: #fff700;
        padding: .6em;
        border-radius: 45%;
        text-decoration: none;
        line-height: 100%;
    }

    .link1:hover{
        font-family: arial;
        font-size: 90%;
        color: #ffe100;
        background-color: #fffead;
        box-shadow: 2px 2px 3px 3px #ffecd1;
        padding: .7em;
        border-radius: 45%;
        text-decoration: none;
        line-height: 100%;
        transition:  .3s;
    }
    
    .link2{
        font-family: arial;
        font-size: 100%;
        color: #f66bc5;
        background-color: #f061b0;
        padding: .6em;
        border-radius: 45%;
        text-decoration: none;
        line-height: 100%;
        margin-left: 15%;
    }
    .link2:hover{
        font-family: arial;
        font-size: 90%;
        color: #f66bc5;
        background-color: #ffa2d5;
        box-shadow: 2px 2px 3px 3px #ffbbf3;
        padding: .7em;
        border-radius: 45%;
        text-decoration: none;
        line-height: 100%;
        transition:  .3s;
    }

    
    .link3{
        font-family: arial;
        font-size: 100%;
        color: #b4e0e3;
        background-color: #c2e7ea;
        padding: .6em;
        border-radius: 45%;
        text-decoration: none;
        line-height: 100%;
    }
    .link3:hover{
        font-family: arial;
        font-size: 90%;
        color: #b4e0e3;
        background-color: #d7fcff;
        box-shadow: 2px 2px 3px 3px #edfeff;
        padding: .7em;
        border-radius: 45%;
        text-decoration: none;
        line-height: 100%;
        transition:  .3s;
    }


    .henkan{
        text-align: left;
        position: fixed;
        margin-top: 3rem;
    }
    
    input[type],
    text { 
        width: 60px;
        height: 20px;  
        border: #1e1e29 solid 2px;
        background-color: #eec6a1;
        margin-right: 3px;
        color: inherit;
        font-family: inherit;
        display: inline-block;
    }
    
    
    input[type=button]{
        height:20px;
        width:40px;
        cursor:pointer;
        text-shadow:none;
        background:#6d2813;
        color:#f1e4ce;
        border:#6d2813;
    }
}