@charset "utf-8";
/*季節のイラスト*/
/*クリスマス*/
/*
#pics{
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
}
#pics img{
    height:200px;
}
#tree{
    position:absolute;
    bottom:0px;
    left:15px;
    right:auto;
}
#yukidaruma{
    position:absolute;
    right:15px;
    bottom:0px;    
}
#shitayuki{
    position:absolute;
    width:100%;
    height:100%;
    background-image:url('header_img/christmas/shitayuki.png');
    background-repeat:repeat-x;
    background-origin: content-box;
    background-position:bottom;
    z-index:12;
}
#global_header{
    background-color:black;
}
@media screen and (min-width:600px){
    #pics{
        position:absolute;
        top:auto;
        bottom:0px;
        left:50px;
        right:auto;
        height:50%;
    }
    #pics img{
        height:95%;
    }
    #tree,#yukidaruma{
        position:relative;
        top:0px;
        bottom:0px;
        left:0px;
        right:0px;
    }
}
@media screen and (min-width:1024px){
    #pics{
        position:absolute;
        width:auto;
        top:0px;
        bottom:auto;
        right:0px;
        left:auto;
        height:100%;
   
    }
    #pics img{
        height:95%;
    }
}
*/
/*正月*/
/*
#global_header{
    background-image:url('header_img/newyear/bamboo.png');
        background-repeat:repeat;
}
.button_ground{
    background-image:url('header_img/newyear/plum.png');
    background-repeat:no-repeat;
    background-size:cover;
    opacity:1.0;
}
#cal_img_left{
    position:absolute;
    top:115px;
    left:-10px;
    width:150px;
    height:85px;
    z-index:210;
}
#cal_img_right{
    position:absolute;
    top:0px;
    right:-10px;
    width:150px;
    height:85px;
    z-index:210;
}
#cal_img_ricecake{
    position:absolute;
    width:110px;
    height:195px;
    z-index:200;
    top:250px;
    left:0px;
}
@media screen and (min-width:600px){
    #cal_img_ricecake{
        top:135px;
        left:150px;
    }
}
@media screen and (min-width:1024px){
    #cal_img_ricecake{
        top:20px;
        left:auto;
        right:90px;
    }
}
*/
/*季節の画像*/


/*季節の画像ここまで*/
/*
#canvas{
    position:absolute;
    background-color:white;
    width:100%;
    height:100%;
    z-index:-1;
}
*/
header{
    position:relative;
    box-sizing:border-box;
    width:100%;
    display:block;
    height:430px;
    background-color:white;
}
/*
#global_header{
    background-color:rgba(255,255,255,0.4);
}
*/
#index_header{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items: center;
    margin:0;
    padding:0;
    z-index:99;
}
#index_button{
    position:relative;
    margin-top:50px;
    padding:0px;
    display:flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;   
    z-index:99;
}
#button_space{
    position:relative;
    width:320px;
    height:242px;
}
#title{
    position:relative;
    width:70%;
    min-width:300px;
    padding:0;
}
/*ボタン*/
.button_ground{
    width:100px;
    height:100px;
    background-color:green;
    /*background-image:url("header_img/April/undersheet.png");*/
    background-repeat: no-repeat;
    border-radius:50%;
}
.button p{
    color:white;
    font-weight:bold;
}
/*番組一覧ボタン*/
#button_program{
    position:absolute;
    top:0px;
    left:50px;
}
#button_program_img{
    position:absolute;
    width:80px;
    top:-40px;
    left:10px;
}
#button_program_img2{
    position:absolute;
    width:40px;
    top:-65px;
    left:10px;
}
#button_program_txt{
    position:absolute;
    width:80px;
    top:65px;
    left:15px; 
}
/*profile*/
#button_profile{
    position:absolute;
    top:0px;
    left:160px;
}
#button_profile_img{
    position:absolute;
    width:60px;
    top:-35px;
    left:20px;
    border:solid 0.5px gray
}
#button_profile_txt{
    position:absolute;
    width:80px;
    top:55px;
    left:10px;
    line-height:1.2em;
    text-align:center;    
    font-family:"Sawarabi Mincho"; 
}
#button_callender{
    position:absolute;
    top:140px;
    left:110px;
}
#button_callender_img{
    position:absolute;
    top:-10px;
    left:7px;
    width:80px;
    height:60px;
    background-color:white;
    border:gray solid 3px;
    font-family:"Sawarabi Mincho";
}
#button_callender_img_date{
    position:relative;
    position:relative;
    text-align:center;
    width:100%;
    font-size:2em;
    line-height:1.3em;
    color:black;
    background-color:white;
}
#button_callender_img_date.sun{
    background-color:red;
}
#button_callender_img_date.sat{
    background-color:blue;
}
.button_callender_img_week{
    position:relative;
    text-align:center;
    color:black;
    line-height:1.1em;
}
.button_callender_img_week#Wsun{
    color:red;
}
.button_callender_img_week#Wsat{
    color:blue;
}
#button_callender_txt{
    position:absolute;    
    top:60px;
    left:10px;
}
/*マナコラム*/
#button_manaColumn{
    position:absolute;
    top:140px;
    left:0px;
}
#button_manaColumn_txt{
    position:absolute;
    width:70px;
    top:60px;
    left:15px;
    line-height:1.1em;
    text-align:center;    
    font-size:1rem;
    font-family:"Sawarabi Mincho"; 
}
#button_manaColumn_img{
    position:absolute;
    width:80px;
    top:-18px;
    left:10px;
}
/*ポスト*/
#button_post{
    position:absolute;
    top:140px;
    left:220px;
}
#post{
    position:absolute;
    width:140px;
    top:-65px;
    left:-20px;
}
#button_post p{
    position:absolute;
    top:60px;
    left:7px;
    font-size:0.90em;
}
/*お仕事の依頼*/
#button_work{
    position:absolute;
    width:64px;
    top:-50px;
    left:260px;
}
#button_work a img{
    width:100%;
}

@media screen and (min-width:600px){
    header{
        height:340px;
        margin-top:10px;
        display:flex;
        flex-direction:row;
    }
    #index_header{
        display:block;
        width:55%;
    }
    #title{
        width:100%;
        max-width:400px;
        left:0px;
    }
    #index_button{
        width:45%;
        right:0;
        top:20px;
        display:block;
    }
    .button_ground{
        width:100px;
        height:100px;
    }
    /*番組一覧ボタン*/
    #button_program{
        top:0px;
        left:0px;
    }
    #button_program_img{
        width:80px;
        top:-40px;
        left:10px;
    }
    #button_program_img2{
        width:40px;
        top:-65px;
        left:10px;
    }
    #button_program_txt{
        width:80px;
        top:65px;
        left:15px;
    }
/*profile*/
    #button_profile{
        top:0px;
        left:110px;
    }
    #button_profile_img{
        width:60px;
        top:-35px;
        left:20px;
        border:solid 0.5px gray
    }
    #button_profile_txt{
        width:80px;
        top:55px;
        left:10px;
        line-height:1.2em;
    }
    #button_callender{
        top:120px;
        left:60px;
    }
    #button_callender_img{
        top:-10px;
        left:7px;
        width:80px;
        height:60px;
        border:gray solid 3px;
    }
    #button_callender_img_date{
        font-size:2em;
        line-height:1.3em;
    }
    .button_callender_img_week{
        line-height:1.1em;
    }
    #button_callender_txt{
        top:60px;
        left:10px;
    }
    #button_manaColumn{
        position:absolute;
        top:120px;
        left:-50px;
    }
    #button_post{
        top:120px;
        left:170px;
    }
    #post{
        width:140px;
        top:-65px;
        left:-20px;
    }
    #button_post p{
        top:60px;
    }
    /*お仕事の依頼*/
    #button_work{
        top:-60px;
        left:200px;
    }
}
@media screen and (min-width:1024px){
    header{
        height:230px;
    }
    #index_header{
        width:450px;
    }
    #index_button{
        width:auto;
        left:0;
        right:auto;
    }
    #index_button{
        position:relative;
        margin-top:-70px;
        padding:0px;
    }
    #button_space{
        position:relative;
        width:auto;
        height:auto;
    }
    #button_callender{
        position:absolute;
        top:0px;
        left:220px;
    }
    #button_manaColumn{
        position:absolute;
        top:0px;
        left:330px;
    }
    #button_post{
        position:absolute;
        top:0px;
        left:440px;
    }
    #button_post p{
        top:60px;
    }
    #button_work{
        top:-50px;
        left:550px;
    }
}
@media print{
    #global_header{
        display:none;
    }
}