@charset "UTF-8";

body{
    /*font-size: 1.0rem;*/
    min-height: 100vh;      /*bodyタグを内容が少なくても画面一敗の高さを保つように指示*/
    display: flex;          /*子要素の"flex:1;"を生かすには親要素に"display:flex;"が必要*/
    flex-direction: column; /* 縦並びに配置 */   
    margin: 0 auto;
    }
    header{
        position: fixed;
        display: flex;
        display: block;    /* 中央寄せに必要 */
        /*justify-content: center;*/
        text-align:center;  /* インライン要素の中央寄せ */
        width: 100%;
        height: 54px;
        padding: 10px 0px 12px 0px;        
        background: linear-gradient(to bottom, rgb(87, 87, 255), rgb(175, 206, 253) 22%, rgb(168, 220, 252) 40%, blue);
    }
    .logo{
        display: block;
        width: 50%;
        padding-bottom: 10px;
        margin-left: auto;
        margin-right: auto;
    }
    h1{
        display: block;
        /*padding-top: 6px;*/
        color: rgb(246, 255, 0);
    }    
    main{
        display: flex;        
        flex-direction: column;
        width: 100%;
        flex: 1;    
        margin-top: 76px;
        margin-bottom: 52px;
        /*background-color: antiquewhite;*/
        background-image:  url("../image_1/bgi-1.png") ;
    }    
    .guidance{
        display: block;
        justify-content: center;
        /*flex: 1;*/
        width: 100%;
        padding: 6px 0px;
    }
    .box-1{
        width: 100;
        padding-right: 18px;
        padding-left: 18px;
    }
    h2{
        display: block;
        color: purple;
    }
    h3{
        display: block;
        padding-top: 14px;
        padding-bottom: 4px;        
        color: darkblue;
    }   
    .moji_1{
        font-size: 0.85rem;
        line-height: 1.5;
        white-space: pre-wrap;        
    }
    .pht-1{
        /*display: inline;*/
        display: flex;        
        flex-direction: column;
        justify-content: space-around;
        width: 88%;
        height:532px;
        padding: 5px;
        margin: 0 auto;
        /*float:  left; */
    }
    .box-2{
        display: block;
        /*width: 90%;*/
        width: 98%;
    }
    
    .draw_X{
        width: 90%;
    }
    .drawing-1{
        display: flex;
        /*flex: 1;*/
        text-align: center;
        width: 100%;
        padding-top: 10px;
    }
    .drawing-2{
        display: flex;
        /*flex: 1;*/
        text-align: center;
        width: 100%;
        padding-top: 14px;
    }
    .box-3{
        width: 100%;
    }
    h4{
        font-size: 0.75rem;
        font-weight: 400;
        padding-top: 16px;
        padding-bottom: 8px;
    } 

    footer{
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 52px;
    }
    ul{
        display: flex;
        justify-content: space-around;
        padding: 12px 10px 8px 10px;
        list-style:none;
        background-color: blue;
            font-size : 0.625rem;
            line-height : 1.2;
            font-weight : bold;
            color: mediumblue;
    }
    li{
        text-align: center;
        margin-bottom: 10px;
        padding: 6px 6px;
        border: 1px dotted #333333;
        border-radius: 7px;
        background-color: rgb(194, 224, 255);
    }

    @media screen and (min-width:767px){
        body{        
            width: 820px;
            margin: 0 auto;        
            background-color: darkgrey;
        }
        header{
            width: 820px;
            height: 66px;
        }
        .logo{
            display: block;
            width: 28%;
            margin-left: auto;
            margin-right: auto;
        }
        h1{            
            font-size: 1.25rem;
            font-weight: 400;
        }
        
        main{
            width: 820px;
            display: flex;        
            flex-direction: row;
            flex-wrap: wrap;
            
            margin-top: 88px;
            margin-bottom: 52px;
        }
        .guidance{
            width: 480px;
            padding: 4px 0px; 
            /*float:  right;    */  
        }
        .box-1{
            width: 424px;
            padding: 6px 28px;
        }
        h2{
            font-size: 1.0rem;
            font-weight: 400;  
        }        
        h3{
            font-size: 1.25rem;
            font-weight: 400;
            padding-top: 16px;
            padding-bottom: 8px;
        }
        .moji_1{
            font-size: 0.85rem;
            line-height: 1.4em;
        }
        .pht-1{
            /*display: inline;*/
            display: flex;        
            flex-direction: column;
            justify-content: space-around;
            width: 40%;
            padding: 5px;
            /*float:  left; */
        }
        .box-2{
            display: block;
            width: 92%;
        } 
        .draw_X{
            width: 68%;           
        }
        h4{
            font-size: 1.125rem;
            font-weight: 400;
        }
        .drawing-1{
            width: 820px;
            clear: both;
            text-align: center;
            padding-top: 0px;
            pointer-events: 6px;
        }
        .box-3{
            width: 100%;
        }
        .drawing-2{
            width: 820px;
            text-align: center;
            /*justify-content: center;*/
            padding: 10px 0px;
        }
        footer{
            width: 820px;
            /*margin-bottom: 60px;*/
            height: 52px;
        }
        ul{
            font-size : 0.9375rem;
        }
        li{
            /*text-align: center;*/
            /* margin-bottom: 10px;*/
            padding: 6px 24px;
            border: 1px dotted #333333;
            border-radius: 18px;
            background-color: rgb(194, 224, 255);
        }
    }