@charset "UTF-8";

body{
    /*font-size: 1.0rem;*/
    min-height: 100vh;      /*bodyタグを内容が少なくても画面一敗の高さを保つように指示*/
    display: flex;          /*子要素の"flex:1;"を生かすには親要素に"display:flex;"が必要*/
    flex-direction: column; /* 縦並びに配置 */
    width: 100%;
    margin: 0 auto;
    }
    header{
        position: fixed;
        display: flex;
        display: block;    /* 中央寄せに必要 */
        /*justify-content: center;*/
        text-align:center;  /* インライン要素の中央寄せ */
        width: 100%;
        height: 47px;
        padding: 10px 0px 12px 0px;
        /* background-color: azure;
        background: linear-gradient(to bottom, blue, azure 40%, azure 60%, blue);*/
        background: linear-gradient(to bottom, rgb(87, 87, 255), rgb(175, 206, 253) 22%, rgb(168, 220, 252) 40%, blue);
    }
    image.logo{
        display: block;
        width: 50%;
        margin-left: auto;
        margin-right: auto;
    }
    h1{
        display: block;
        padding-top: 6px;
        font-weight: 600;
        font-weight: 400;
        color: rgb(246, 255, 0);        
    }
    main{
        display: flex;
        justify-content: center;
        flex-direction: column;
        width: 100%;
        /*min-height: 100vh;*/
        flex: 1;
        margin-top: 50px;
        margin-bottom: 52px;
        padding-top: 8px;
        /*background-color: lightgoldenrodyellow;*/
        background-color: rgb(207, 255, 255);
        
    }
    .pfm-1, .pfm-2{
        /*display: flex;*/
        flex-direction: column;
        width: 100%;        
        min-height: 472px;
        margin-bottom: 5px;
        text-align: center;
        background-color: rgb(253, 241, 149);
        border-top: 2px solid;
        border-bottom: 2px solid;
        border-color: rgb(153, 0, 255);
    
    }
    .pfm-3, .pfm-4{
        flex-direction: column;
        width: 100%;
        min-height: 528px;
        margin-bottom: 5px;
        text-align: center;
        background-color: rgb(253, 241, 149);
        border-top: 2px solid;
        border-bottom: 2px solid;
        border-color: rgb(153, 0, 255);        
    }
    .title{
        height: 75px;
        padding: 12px 6px 12px 6px;
        display: block;
        /*line-height: 0.9;*/
        background-color: rgb(243, 206, 255);
    }
    .title-1{
        font-weight : bold;
        font-size : 1.0rem;
        line-height : 1.5;
        color : #ff0033;
    }
    .title-2{
        font-size : 0.8125rem;
        line-height : 1.6;
        font-weight : normal;
        color : green;
    }
    .title-3{
        font-weight : normal;
        font-size : 0.8125rem;
        line-height : 1.4;
        color : #000099;
    }
    .title-4{
        font-weight : normal;
        font-size : 0.8125rem;
        line-height : 1.4;
        color : #e20f91;
    }
    .puppet-1, .puppet-2, .puppet-3, .puppet-4{
        height: 96px;
        padding: 6px 0px 2px 0px;
        /*background-color: blueviolet;*/
        background: linear-gradient(#FFA8A8, #FCFF00);
    }
    .coment-1, .coment-2{
        display: block;
        height: 100x;
        padding: 2px 0px 6px 0px;
            font-weight : normal;
            font-size : 0.8125rem;
            line-height : 1.2;
            color : #000099;        
    }
    .coment-3, .coment-4{
        height: 104px;
        padding: 6px 0px 6px 0px;
        display: block;
            font-size : 0.8125rem;
            line-height : 1.0;
            font-weight : normal;            
            color: #000099;
        /*background-color: lightyellow;*/
    }
    .synopsis{
        padding-top: 6px;
        /*background-color: thistle;*/
            font-size : 0.8125rem;
            line-height : 1.3;
            font-weight : normal;            
            color: forestgreen;
        /*background-color: lightyellow;*/
    }    
    /*.phot-1, .phot-2, .phot-3, .phot-4{
        display: block;
        height: 140px;
        margin: 0 auto;
        padding-top: 4px;
        padding-bottom: 5px;
            font-size : 0.8125rem;*/
            /*line-height : 1.0em;*/
    /*        font-weight : normal;
            color : #ff0033;
    }*/
    .pht-1{
        display: block;
        height: 200px;
        margin: 0 auto;
        padding-top: 0px;
        padding-bottom: 5px;
            /*font-size : 0.8125rem;*/
            /*line-height : 1.0em;*/
            /*font-weight : normal;
            color : #ff0033;*/
    }
   /*.my-gallery{
        height: 140px;
        margin: 0 auto;
        padding-top: 4px;
        padding-bottom: 5px;
   }*/
    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 : 600;
            color: mediumblue;
    }
    li{
        text-align: center;
        margin-bottom: 10px;
        padding: 6px 4px;
        border: 1px dotted #333333;
        border-radius: 6px;
        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: 86px;
    }
    h1{
        font-size: 1.625rem;
    }
    image.logo{
        display: block;
        width: 40%;
    }
    main{
        display: flex;
        justify-content: center;
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;        
        margin-top: 105px;
        margin-bottom: 60px;
    }
    .pfm-1, .pfm-2{
        /*display: flex;*/
        flex-direction: column;
        width: 360px;
        height: 538px;
        margin-right: 3px;  
        text-align: center;
        border: 2px solid;        
        border-radius: 15px;
        border-color: rgb(153, 0, 255);       
    }
    .pfm-3, .pfm-4{
        flex-direction: column;
        width: 360px;
        height: 558px;
        margin-right: 3px;  
        text-align: center;
        border: 2px solid;        
        border-radius: 15px;
        border-color: rgb(153, 0, 255);
    }
    .title-1{
            font-weight : bold;
            font-size : 1.1875rem;
            line-height : 1.2;
            color : #ff0033;
    }
    .title-2{
        display: block;
            font-size : 0.8125rem;
            line-height : 1.6;
            font-weight : normal;
            color : green;
    }
    .title-3{
            font-weight : normal;
            font-size : 0.8125rem;
            line-height : 1.4;
            color : #000099;       
    }
    .coment-1, .coment-2{
        height: 110px;
            font-weight : normal;
            font-size : 0.9375rem;
            line-height : 1.4;
            color : #000099; 
    }
    .synopsis{
        padding-top: 8px;
            font-size : 0.9375rem;
            line-height : 1.2;
            font-weight : normal;
            color: forestgreen;
            color: seagreen;
            color: green;
   }
    .coment-3, .coment-4{
        height: 130px;
            font-weight : normal;
            font-size : 0.9375rem;
            line-height : 1.4;
            color : #000099; 
    }
    footer{
        width: 820px;
        /*margin-bottom: 60px;*/
        height: 60px;
    }
    ul{
        font-size : 1.2rem;
    }
    li{
        /*text-align: center;*/
        /* margin-bottom: 10px;*/
        padding: 6px 20px;
        border: 1px dotted #333333;
        border-radius: 15px;
        background-color: rgb(194, 224, 255);
    }
}