@charset "UTF-8";

body{    
    min-height: 100vh;      /*bodyタグを内容が少なくても画面一敗の高さを保つように指示*/
    display: flex;          /*子要素の"flex:1;"を生かすには親要素に"display:flex;"が必要*/
    flex-direction: column; /* 縦並びに配置 */    
    margin: 0 auto;
    }
    header{
        position: fixed;  /* 画面を基準に位置指定をする */
        top: 0;           /* positionとセットで垂直位置の指定(固定) */
        display: flex;    /* この要素がflexコンテナとなり、子要素がflexアイテムとなる */
        display: block;   /* ブロック要素にする　子要素の中央寄せに必要 */        
        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{        
        /*padding-top: 6px;*/
        color: rgb(246, 255, 0);
    }
    main{       
        display: flex;           /* この要素がflexコンテナとなり、子要素がflexアイテムとなる */
        flex-direction: column;  /* 子要素を縦に並べる */
        width: 100%;
        flex: 1;                 /* 空きスペースの全部をmainに割り当て */
        margin-top: 76px;        /* headerとの重なり分 */
        margin-bottom: 52px;     /* footerとの重なり分 */
        background-image:  url("../image_1/bgi-1.png") ;
    }
    article{
        width: 100%;
    }
    .box-a{
        height: 28px;
        padding-top: 6px;
        background-color: rgba(255, 203, 215);        
    }
    h2{
        font-size: 1rem;
        line-height: 1.5;
        font-weight: 500;
        color: orangered;
    }
    .box-ab{
        padding-right: 4px;
        padding-left: 10px;
    }    
    .box-b{
        padding-left: 0px;
    }
    .box-c{
        padding: 0px 6px 6px 0px;
        font-size: 0.8125rem;
        line-height: 1.5;
        white-space: pre-wrap;  /*連続で入力した空白や改行がブラウザでの表示に反映される 自動改行する*/
    }
    h3{
        font-size: 0.875rem;
        line-height: 1.5;
        font-weight: 600;
        color: rgb(0, 0, 189);        
        padding: 6px 0px;
    }
    .pht-1{
        display: flex;      /* この要素がflexコンテナとなり、子要素がflexアイテムとなる */
        flex-wrap: wrap;    /* 子要素を複数行に折り返す */
        justify-content: space-around;  /* 子要素の余白を金とに割り振る */
        width: 98%;      
    }
    .pht-2{
        width: calc(50% - 1px); 
    }
    .moji_10{
        font-size: 0.625rem;
        line-height: 1.1;
        padding-bottom: 3px;
    }
    .pht-3{
        width: 98%;
    }
    .pht-4{
        width: 70%;
        text-align: center;
    }
    footer{
        position: fixed;  /* 画面を基準に位置指定をする */
        bottom: 0;        /* positionとセットで垂直位置の指定(固定) */
        width: 100%;
        height: 52px;
    }
    ul{
        display: flex;   /* この要素がflexコンテナとなり、子要素が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{
            margin-top: 88px;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
        }
        article{
            width: 66%;
        }
        .box-a{
            height: 32px;
            padding-top: 9px;
            padding-left: 12px;
            background-color: rgba(255, 184, 222,0.5);
        }
        h2{
            font-size: 1.25rem;
            line-height: 1.5;
            font-weight: 600;
            color: hsl(328, 100%, 50%);
        }
        .box-b{
            padding: 0px 0px;
        }
        h3{
            font-size: 1.0rem;
            line-height: 1.5;
        }
        .box-c{
            padding: 0px 6px 6px 18px;
            font-size: 0.9375rem;
            line-height: 1.5;
        }
        .pht-1{
            width: 34%;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            text-align: center;
        }
        .pht-2{
            width: 100%; 
            margin: 0 auto;
        }
        .pht-3{
            width: 100%;
        }
        footer{
            width: 820px;
            /*margin-bottom: 60px;*/
            
        }
        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);
        }
    }