@import url('/life/ccs/lics/css/base.css');
/*基本要素スタイル*/
@import url('/life/ccs/lics/css/layout.css');
/*共通レイアウト*/
@import url('/life/ccs/lics/css/study.css');
/*各ページのスタイル*/

/* =======================================================
  レスポンシブ設定
======================================================= */
/*画面幅　800～900*/
@media screen and (max-width: 900px) {
    #h-wrapper {
        max-width: 100%;
        padding-bottom: 0px;
        padding-left: 0px;
    }

    #h-main {
        width: 100%;
        float: none;
    }

    #h-main {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        padding-top: 10px;
        padding-bottom: 20px;
    }

    /* ナビゲーション */

    #h-nav {
        width: auto;
        justify-content: space-evenly;
        text-align: center;
        margin: 0px;
        padding: 0;
        max-width: 100%;
    }

    #h-nav li {
        margin: 0;
        padding: 0;
        max-width: 100px;
        list-style-type: none;
        font-size: small;
        text-align: center;
    }

    #h-nav li a {
        max-width: 100px;
    }

    #h-headerExtra-top {
        width: 400px;
        margin: -22px 0 0;
        padding: 0;
        float: right;
    }


    #footer_nav {
        max-width: 100%;
    }

    #c_info,
    #c_info th,
    #c_info tr,
    #c_info td {
        display: block;
        max-width: 100%;
    }

    #h-footer {
        clear: both;
        width: 100%;
        height: auto;
        background-color: #9b9ea7;
    }

    #h-main .frame_wrapper {
        position: relative;
        width: 560px;
        height: 0;
        padding: 315px 0 0;
    }
}

/*画面幅　751～800*/
@media screen and (max-width: 800px) {
    .h-layoutset-top #h-wrapper {
        padding-top: 40px;
    }
}

/*画面幅　701～750*/
@media screen and (max-width: 750px) {
    #h-headerExtra-top {
        width: 400px;
        margin: -22px 100px 0 0;
        padding: 0;
        float: right;
    }
}

/*画面幅　601～700*/
@media screen and (max-width: 700px) {

    #h-nav li {
        max-width: 95px;
        padding-top: 0;
    }

    #h-nav li a {
        max-width: 95px;
    }
}

/*画面幅　～600*/
@media screen and (max-width: 600px) {

    table {
        width: 100%;
        margin-left: auto;
        box-sizing: border-box;
    }

    #h-container {
        margin-top: 0px;
        background-image: none;
        min-width: 100%;
    }

    #h-header {
        width: 100%;
        height: auto;
        padding-top: 0px;
        padding-bottom: 10px;
        background-color: #F3ACC4;
    }

    #h-wrapper {
        width: 100%;
        padding-bottom: 0px;
        padding-left: 0px;
    }

    .h-layoutset-top #h-wrapper {
        padding-top: 0px;
    }

    .h-layoutset-02 #h-wrapper {
        padding-top: 0px;
    }
    
    #h-footer {
        width: 100%;
        height: auto;
        background-color: #9b9ea7;
    }


    #h-main {
        float: none;
        position: relative;
        margin-top: 45px;
        margin-left: auto;
        margin-right: auto;
        padding: 0px;
        width: 90%;
    }

    #h-title,
    #top_catch {
        position: relative;
        top: 39px;
    }

    #top_catch {
        margin-top: 0px;
        max-width: 600px;
        background-size: auto;
        font-size: small;
    }

    /* ナビゲーション */
    #h-nav {
        position: absolute;
        width: 100%;
        height: auto;
        background-color: #F3ACC4;
        text-align: left;
        z-index: 1;
    }

    #h-nav ul {
        width: 100%;
        display: none;
    }

    #h-nav ul.toggled-on {
        display: block;
    }

    #h-nav li {
        font-size: large;
        margin-top: 0;
        max-width: 600px;
        width: 100%;
        float: none;
        border-top: 1px solid #FFF;
    }

    #h-nav li a {
        max-width: 600px;
        width: 100%;
        height: auto;
        padding: 10px;
        background-image: none;
        box-sizing: border-box;
    }

    #h-nav li a:hover {
        background-image: none;
        background-color: #FFF;
    }

    #h-nav h3.h-c-index {
        width: 28px;
        height: 20px;
        background-image: url(/life/ccs/lics/img/btn_menu.png);
        background-position: top left;
        background-repeat: no-repeat;
        margin-right: auto;
        margin-top: 10px;
        margin-bottom: 5px;
        padding: 0;
        overflow: hidden;
        text-indent: -9999px;
        cursor: pointer;
        display: inline-block;
    }

    #h-nav h3.toggled-on.h-c-index {
        background-image: url(/life/ccs/lics/img/btn_menu_on.png);
    }

    /* ヘッダー内パーツ */

    #headerMain h1 {
        padding-top: 5px;
        padding-right: 5px;
        padding-left: 5px;
        line-height: 1.4;
    }

    #headerLogo {
        width: 98%;
        float: none;
        margin-right: auto;
        margin-left: auto;
    }

    #headerLogo a {
        margin: 10px auto;
        background-position: top center;
        background-size: contain;
        max-width: 100%;
    }

    #h-headerExtra1 {
        width: 98%;
        margin-top: 0px;
        margin-right: auto;
        margin-left: auto;
        float: none;
    }

    #h-headerExtra-top {
        width: 400px;
        margin: -22px -150px 0 0;
        padding: 0;
        float: right;
    }

    /*--------------------------------------------------------
        フッタデザイン設定
    --------------------------------------------------------*/
    #h-footerTop {
        float: none;
    }

    #h-footerTop li {
        /* フッターナビ設定 */
        margin-right: 10px;
        margin-bottom: 10px;
        display: inline-block;
    }

    #h-footerMain {
        padding-bottom: 8px;
        float: none;
    }

    #h-footerMain p {
        /* コピーライト文字設定 */
        padding-right: 5px;
        padding-left: 5px;
        line-height: 1.4;
        text-align: center;
        word-break: break-all;
    }



    /* 下位ページレイアウト*/
    .h-layoutset-02 h2 {
        margin-bottom: 5px;
        padding-top: 9px;
        padding-bottom: 9px;
        padding-left: 0px;
        line-height: 1.4;
        word-break: break-all;
    }

    /* メインコンテンツ内基本パーツ */

    #h-main dt {
        float: none;
        padding-bottom: 0px;
        max-width: 100%;
    }

    #h-main dd {
        padding-left: 0px;
    }

    #h-main img.left {
        margin-right: 0px;
        float: none;
    }

    #h-main img.right {
        margin-left: 0px;
        float: none;
    }


    /* 研究紹介 デザイン定義 */

    #item .itemlist {
        width: 100%;
        text-align: left;
        margin: 0;
        padding: 0;
    }

    #item .itemlist .item {
        margin: 0;
        padding: 0;
    }

    #h-main .frame_wrapper {
        width: 100%;
        height: 0;
        padding: 56.25% 0 0;
    }

    #pan-navi {
        z-index: 1;
    }

    /*研究室紹介以下の画像リンク*/
    .study a img,
    p video,
    .frame_wrapper {
        width: 100%;
    }
}