@charset "utf-8";"

/*
スマホ: 320px - 480px 
タブレット: 480 - 768px
PC: 768px以上
*/

/* 共通の設定 */

html{background-color:#ccc;}

body {
    font-family: Arial, Verdana, sans-serif;
    width: 95%;
    margin:0 auto;overflow:hidden;
}

#header {
    background:#ccc;
}

#footer {
    background:#ccc;clear:both;overflow:hidden;
}

#container {background:#fff;
}

#main {
    background:#fff; padding:2%;float:left;
}

#sub {
    background:#fff;float:right;
}

#footerNavLink {
    float: right;
}

#headerNav ul {padding:1%;
    list-style: none;
    overflow: hidden;
}

#headerNav li {
    float:left;
    width: 25%;
    text-align: center;
}

img {
    max-width: 100%;
}

.movie {
    position: relative;
    height: 0;
    padding-top: 56.25%; /* 16:9 */
}

iframe {
    height: 100%;
    position: absolute;
    left:0;
    top:0;
    width:100%;
}

table{width:70%;padding:10% 5%;line-height: 150%;text-align:center;float:right;clear:both;overflow:hidden;}

td {border:solid 1px #ccc;opadding:3px;height:10px;}

th{border:solid 1px #ccc;background-color:#ccc;}



a{text-decoration:none;}

a:link{color:#289}

a:hover{color:#29A;text-decoration:underline;}





/* スマホのスタイル */

#headerNav {
    display: none;
}

/* タブレットのスタイル */

@media all and (min-width: 480px) {
    #footerNavLink {
        display: none;
    }
    #headerNav {
        display: block;
    }
    #footerNav {
        display: none;    
    }
}

/* PCのスタイル */

/*
all: 980px
sub: 200px
margin: 15px
main: 765px
*/

@media all and (min-width: 768px) {
    #container {
        overflow: hidden;
    }
    #main {
        float: left;
        width: 70%;
    }
    #sub {
        float: right;
        width: 25%; /* 200px / 980px * 100 */
    }
}