@charset "UTF-8";

body{
    width: 100%;
    min-height: 100vh;      /*bodyタグを内容が少なくても画面一敗の高さを保つように指示*/
    display: flex;          /*子要素の"flex:1;"を生かすには親要素に"display:flex;"が必要*/
    flex-direction: column; /* 縦並びに配置 */    
    /*background-image: url("../image_1/pe01_bg.gif") ;*/
    background-color: gray;
    margin: 0 auto;
    }
    header{
        position: fixed;
        top: 0;
        /*display: flex;*/
        /*display: block;*/    /* 中央寄せに必要 */
        /*justify-content: center;*/
        text-align:center;  /* インライン要素の中央寄せ */
        width: 100%;
        height: 62px;
        padding: 10px 0px 4px 0px;
        background: linear-gradient(to bottom, rgb(57, 57, 255), hsl(222, 97%, 75%) 24%, #98d8ff 50%, lightcyan);
    }
    .logo{
        display: block;
        width: 50%;
        /*padding-bottom: 4px;*/
        padding-top: 4px;
        margin-left: auto;
        margin-right: auto;
    }
    .title{
        display: flex;
        flex-direction: row;
        flex-direction: column;
        justify-content: center;
    }    
    p1{
        display: block;
        font-size: 0.875rem;
        font-weight: 800;
        line-height: 1.0;
        color: rgb(255, 100, 72);
    }
    
    main{
        display: flex;       /*子要素の"flex:1;"を生かすには親要素に"display:flex;"が必要*/
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        /*height: 1fr;*/
        /*flex: 1;*/
        background-color: lightcyan;       
        margin-top: 76px;
        margin-bottom: 42px;
        /*height: 1fr;*/
    }
    .box-1{
        width: 46%;
        text-align:center;
        padding: 4px 2px 2px 2px;
        margin-top: 6px;
        margin-bottom: 6px;
            border: 1px solid;
            border-top: transparent;
            border-bottom: transparent;
            border-color: mediumslateblue;   
    }
    .box-2{
        width: 46%;
        text-align:center;
        padding: 2px 4px 2px 4px;
        margin-top: 6px;
        margin-bottom: 6px;       
            border: 1px solid;
            /*border-top: transparent;*/
            border-bottom: transparent;
            border-color: mediumslateblue; 
    }
    .expl-1{
        font-size : 0.8125rem;
        line-height : 1.3;
        font-weight : bold;
        color : #F43100;
    }
    .expl-2{
        font-size : 0.75rem;
        letter-spacing : -0.05em;
        line-height : 1.2;
        color : #FF0033; 
    }
    .expl-3{
        font-size : 0.75rem;
	    line-height : 1.5;
	    letter-spacing : 0px;
	    font-weight : normal;
	    color : #6600cc;
    }
    .pht-1{
        /*display: block;*/
        /*max-width: 88%;
        height: auto;*/
        flex: 1;
        padding: 3px;
    }
    .pht-2{
        width: 95%;
    }
    .date{
        font-size : 0.75rem;
	    line-height : 1.3;
	    font-weight : normal;
	    color : #000099;       
    }
    .line{
        width: 100%;
        height: 2px;
        background-color: green;
    }
    footer{
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 42px;
        background-color: rgb(57, 57, 255);            
    }
    ul{
        display: flex;
        justify-content: space-around;
        padding: 8px 6px;
        list-style:none;
        /*background-color: blue;
        background-color: #0000ab;*/
            font-size : 0.625rem;
            line-height : 1.2;
            font-weight : bold;          
    }
    li{        
        text-align: center;        
        /*margin-bottom: 10px;*/
        padding: 6px 8px;
        border: 1px dotted #333333;
        border-radius: 6px;
        background-color: lightcyan;            
    }

    @media screen and (min-width:769px){
        body{
            /*font-size: 1.5em;*/
            width: 1000px;
            margin: 0 auto;
            /*background-color: black;*/
            /*background-color: darkgrey;*/
        }
        header{
            position: fixed;
            width: 1000px;
            height: 92px;
            background: linear-gradient(to bottom, blue, hsl(220, 100%, 77%) 24%, #a6dbfc 40%, lightcyan);
            color: lightcyan;
        }
        .logo{
            display: block;
            width: 32%;
            /*padding-bottom: 2px;*/
            margin-left: auto;
            margin-right: auto;
        }
        .title{
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
            /*padding-top: 2px;*/
        }
        p1{
            display: block;
            font-size: 1.5rem;                  
        }
        main{
            /*display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;*/
            width: 100%;
            height: 940px;
            flex: 1;            
            margin-top: 106px;
            margin-bottom: 60px;
            background-color: lightcyan;
        }
        .box-1{
            width: 224px;
            height: 222px;
            padding: 4px 8px 2px 8px;
            margin-bottom: 8px;
            /*margin-right: 6px;*/
            border: 1px solid;
            border-top: transparent;
            border-bottom: transparent;
            border-color: mediumslateblue;                        
        }
        
        .coment-1{
            padding-top: 8px;
            font-size: 0.8125;
            font-weight: 400;
            line-height: 1.5;
            color: azure;
        }
        footer{
            width: 1000px;
            height: 60px;
            background-color: rgb(57, 57, 255);
        }
        ul{
            font-size : 1.2rem;            
            line-height : 1.2;
            font-weight : bold;
            /*color: mediumblue;*/
            color: white;
            padding: 12px 10px;
        }
        li{
            /*text-align: center;*/
            /*margin-bottom: 10px;*/
            padding: 4px 18px;
            border: 1px dotted #333333;
            border-radius: 12px;           
        }
    }