@charset "UTF-8";

/*ビューポートが980pxより狭い場合------------------
/*pagewrap: 幅を95%
　content: 幅を60%
　sidebar: 幅を30%
------------------------------------------------------------ */
@media screen and (max-width:1160px) {
 
    #pagewrap {
        width: 95%;
    }
 
    #content {
        width: 60%;
        padding: 3% 4%;
    }
 
    #sidebar {
        width: 30%;
    }
    #sidebar .widget {
        padding: 8% 7%;
        margin-bottom: 10px;
    }
 
}

/*ビューポートが650pxより狭い場合------------------
　header: 高さをauto
　searchform: ポジションを5px上
　main-nav: ポジションをスタティック
　site-logo: ポジションをスタティック
　site-description: ポジションをスタティック
　content: 幅をautoにし、フロートを取り除く
　sidebar: 幅を100%にし、フロートを取り除く
@media screen and (max-width: 650px) {
 
    #header {
        height: auto;
    }
 
    #searchform {
        position: absolute;
        top: 5px;
        right: 0;
    }
 
    #main-nav {
        position: static;
    }
 
    #site-logo {
        margin: 15px 100px 5px 0;
        position: static;
    }
 
    #site-description {
        margin: 0 0 15px;
        position: static;
    }
 
    #content {
        width: auto;
        float: none;
        margin: 20px 0;
    }
 
    #sidebar {
        width: 100%;
        float: none;
        margin: 0;
    }
 
}
------------------------------------------------------------ */

/*480pxより小さいビューポートの場合------------------
　iPhoneなどビューポートが480pxより狭い場合
　テキストサイズの自動調整をオフ
　main-nav: フォントサイズを90%

@media screen and (max-width: 480px) {
 
	html {
        -webkit-text-size-adjust: none;
    }
 
    #main-nav a {
        font-size: 90%;
        padding: 10px 8px;
    }
 
}
------------------------------------------------------------ */



/*画像の最適化-------------------------------------------------------------------------------------------
　画像をフレキシブル「max-width:100%;」と「height:auto;」
　IE7は機能、IE8ではバグがあるため機能せず。IE8用には「width: auto\9;」を使用
-------------------------------------------------------------------------------------------------------------- */

img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

/* 動画埋め込みの最適化-------------------------------------------------------------------------------------------
　動画を埋め込む際には、画像と同様のトリック
　原因不明　「max-width:100%;」がSafariでは機能せず「width:100%;」を使用
-------------------------------------------------------------------------------------------------------------- */

.video embed,
.video object,
.video iframe {
    width: 100%;
    height: auto;
}