/* 01 全体の定義 */
@charset "utf-8";

html { 
    /* ページ内リンクでなめらかに移動する（機器の利用、受託試験の目次先への移動、「Top」ボタンの移動） */
    scroll-behavior: smooth;
}

body {
    /* フォントの定義 */
    /*font-family : 'Verdana','Hiragino Sans', 'Meiryo' , sans-serif;*/
    font-family : 'Meiryo', 'メイリオ', sans-serif, monospace;
    background-color: #ddd;
}


/* 02 共通部分の定義 */
h1 {
    font-size: 40px;
    font-weight: bold;
}

h2 {
    font-size: 21px;
    font-weight: bold;
}

h3 {
    font-size: 19px;
    font-weight: bold;
}

h4 {
    font-size: 17px;
    font-weight: bold;
    color: rgb(60,60,60); 
}

h5 {
    font-size: 15px;
}

h6 {
    font-size: 12px;          /* ※　「エクセル アイコン by Icons8」 用*/
}


a {         /* 青文字（リンク用） */
    color: rgb(0, 60, 120);
}

.red{   /* 赤文字 */
    color: red;
}
.gray {     /* グレー文字 */
    color: rgb(180,180,240);
}

.bold {     /* 太文字 */
    font-weight: bold;
}


/* 03 リストの定義 */
header ul {
    list-style-type: none;       /* NAVI用 */
}

main li {       /* フッターのリストは除く */
    margin: 10px 0;
}

main ol {
    list-style-type:decimal;
    list-style-position: inside;
}
main ul {
    list-style-type:square;
    list-style-position: inside;
}


/* 04 説明リスト（NEWS、機器一覧、機器の利用、学外利用、当分野）*/
dl p {                          
  margin: 2px 0 16px 10px;  /* 機器一覧の説明文の上下左にスペースを開ける */
}

dt {
    color: rgb(60,60,60);
    padding: 10px 0;
}

dd {
    margin-bottom: 30px;
    margin-left: 20px ;

    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 10px;
    background-color: rgb(245,245,255)
}

/* 機器一覧シートの写真 */
.instrument dd img{     
    width: 74px;
    float: right;
    margin: 0 0 0 10px;
    border-radius: 10px;
}


/* 05 NEWSの申込受付ステータス */
.event_open {   /* セミナーなどの受付中 */
    display: inline-block;
    width: 140px;
    text-align: center;
    background-color: rgb(255,150,50);
    color: white;
    border-radius: 5px;
}
.event_closed {  /* セミナーなどの受付終了 */
    display: inline-block;
    width: 140px;
    text-align: center;
    background-color: gray;
    color: white;
    border-radius: 5px;
}
.event_end {    /* 休館などの終了 */
    display: inline-block;
    width: 140px;
    text-align: center;
    background-color: grey;
    color: white;
    border-radius: 5px;
}


/* 06 ヘッダーの定義 */
header .organization_name{
    background-color: rgb(100, 150, 255);   /* 背景の色 */
}

/* ヘッダーブロック（index.phpへリンクあり） */
header .organization_name_block {
    display: block;
    max-width: 600px;
    padding: 15px 0;
    margin: 0 auto;
    text-align: center;
    color: #f4f4f4;
    line-height: 1.5;
}

/* 機器分析分野の文字 */
header .organization_name h1{
    letter-spacing: 0.1em;
}

/* 左上の岐阜大学 */
header .gifu-university_icon {
    position: absolute;
    top: 0px;
    left: 0%;
    height: 90px;
}


/* 07 メインとサイド部分の定義 */
.main_aside {
    max-width: 1240px;
    margin: 0px auto;
    display: flex;
    background-color: rgb(255,255,255);
}


/* 08 メイン部分の定義 */
main {
    width: 1000px;
    padding: 0px 100px 0px;     /* Webの左右の幅を狭くしたときの、左右の余白を確保 */
}

main h2{  /* 青アンダーライン　青文字（研究支援・NEWS、機器一覧、機器の利用、学外利用、アクセス・当分野） */
    color: rgb(60, 100, 180);
    display: inline-block;      /* 下側のマージンを得るために、inline-blockとする */
    background: linear-gradient(0deg,  rgb(170, 180, 240) 25%, #ffffff 26%);
    padding: 4px 15px;
    margin: 70px 0px 10px;
}

main h3{  /* 薄青アンダーライン　青文字（利用の手続き、組織） */
    color: rgb(60, 100, 180);
    display: inline-block;      /* 下側のマージンを得るために、inline-blockとする */
    background: linear-gradient(0deg,  rgb(230, 230, 255) 20%, #ffffff 21%);
    padding: 3px 12px;
    margin: 20px 0px 8px;
}

main p{
    color: rgb(60,60,60);
}

main a {  /* リンクにアンダーライン */
    text-decoration: underline;
}


/* 09 ボタンを押すと画像が切り替わる（スマホ、タブレットの上部の写真）*/
.sw2 {
    /*width:100vw; これがあると、幅が899でPC-SPを切り替えたときに、SPのボタンの右側のマージンがなくなる */
    position: relative;
}

.sw2Img{             /* 写真 */
    position: absolute;     /* 複数の写真をボタンで切り替えたいため、absoluteを使用 */
    right: 0;
    width: 100%;
    /* object-fit:cover; */
    opacity: 0;
    transition: opacity 1s ease-in-out;
    padding-top: 1px;
}

.sw2-img-visible{    /* スマホ、タブレットの上部の写真表示 */
    opacity: 1;
}

.sw2BtnPrev{         /* スマホ、タブレットの上部の写真の＜ボタン */
    position: absolute;
    top: 45px;
    left: 0px;
    background-color: #888;
    padding: 5px 5px 2px 2px ;
    opacity: 0.7;
    border: none;
    font-weight: bold;
    color: white;
}

.sw2-btn-prev-unvisible{ /* スマホ、タブレットの上部の写真の＜ボタンを消す */
    opacity: 0;
}

.sw2BtnNext{         /* スマホ、タブレットの上部の写真の＞ボタン */
    position: absolute;
    top: 45px;
    right: 0px;
    background-color: #888;
    padding: 5px 2px 2px 5px;
    opacity: 0.7;
    border: none;
    font-weight: bold;
    color: white;
}

.sw2-btn-next-unvisible{ /* スマホ、タブレットの上部の写真の＞ボタンを消す */
    opacity: 0;
}

/* スマホ、タブレット時、写真の高さを考慮して、「研究支援」を表示させる */
.sw2-height {
    display:block;
}

section {   /* mainの中の本文 */
    overflow-wrap: anywhere;    /* 単語の途中での改行 */
    line-height: 1.5;
}


/* 10 サイド部分の定義（PC時の右側の写真） */
aside {
    width: 200px;
    margin: 90px 0px 0px;
    position: relative;
    z-index: 30;        /* NAVの下に表示する */
}

aside img{
    border-radius: 10px;
    margin-bottom: 20px;
}

/* ボタンを押すと画像が切り替わる (研究支援・NEWS） */
aside .swImg{             /* サイドの写真 */
    border-radius: 10px;
    position: absolute;     /* 複数の写真をボタンで切り替えたいため、absoluteを使用 */
    opacity: 0;
    transition: opacity 1s ease-in-out;
    max-width: 100%;
    object-fit:cover;
}

aside .swImgVisible{    /* サイドの写真表示 */
    opacity: 1;
}

aside .swBtn{            /* サイドの写真のボタン */
    position: absolute;
    top: 500px;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

aside .swBtnPrev{         /* サイドの写真の＜ボタン */
    background-color: #888;
    padding: 5px 5px 2px 2px;
    opacity: 0.7;
    border: none;
    font-weight: bold;
    color: white;
}

aside .swBtnPrevUnvisible{ /* サイドの写真の＜ボタンを消す */
    opacity: 0;
}

aside .swBtnNext{         /* サイドの写真の＞ボタン */
    background-color: #888;
    padding: 5px 2px 2px 5px;
    opacity: 0.7;
    border: none;
    font-weight: bold;
    color: white;
}

aside .swBtnNextUnvisible{ /* サイドの写真の＞ボタンを消す */
    opacity: 0;
}


/* 11 ナビゲーションの定義　（研究支援NEWS・機器一覧・機器の利用・受託試験・アクセス当分野） */
#activeNav{
    letter-spacing: 0.2em;
    z-index: 90;        /* asideの上に表示する */

    /* 白い背景色 */
    max-width: 1240px;
    margin: 0px auto;
    background-color: rgb(255,255,255);
}

#activeNav ul{
    display: table;
    /*display: flex;*/ /* 右側に青い背景が表示される */
    margin: 0 auto;
    padding: 0;
    width: 880px;   /* ５つのNAVIの全体の幅 */
    text-align: center;
}

#activeNav ul li{
    display: table-cell;
    width: 176px;   /* 個々のNAVIの幅 */
}

#activeNav ul li a{
    display: block;
    width: 100%;
    padding: 10px 0;
    text-decoration: none;
    color: #666;
    background-color: #fff;
    font-size: 20px;
    font-weight:780;
    background-image: linear-gradient(0deg, #bbb 4%, #fff 4%);   /* 薄いグレーのアンダーライン */
}

#activeNav ul li a:hover{
    background-image: linear-gradient(0deg, #999 8%, #eee 8%);   /* カーソルが当たると、少し濃いグレーのアンダーラインになる */
}

/* 選択されたタグは、濃いグレーのアンダーラインが表示される */
#activeNav_item1 a.selected{
    background-image: linear-gradient(0deg, #666 8%, #fff 8%);
}

#activeNav_item2 a.selected{
    background-image: linear-gradient(0deg, #666 8%, #fff 8%);
}

#activeNav_item3 a.selected{
    background-image: linear-gradient(0deg, #666 8%, #fff 8%);
}

#activeNav_item4 a.selected{
    background-image: linear-gradient(0deg, #666 8%, #fff 8%);
}

#activeNav_item5 a.selected{
    background-image: linear-gradient(0deg, #666 8%, #fff 8%);
}
    

/* 11 パンくず 上部の小さい文字のnav（研究支援・NEWS以外で表示） */
/*.breadcrumb{
    margin-top: 10px;
}*/

.breadcrumb ol{
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 12px;
}


.breadcrumb li::after {
    content: ">";
    /*margin-left: 4px;*/
    padding-left: 4px;
    color: #666;
}

.breadcrumb li:last-child::after {
    content: "";
}


/* 12 テーブルの定義 */
 /* テーブル01（table01：NEWS>セミナー・組織） */
 .table01 {
    border-collapse:separate;
    border-spacing: 4px;
    width: 100%;
}

.table01 th {
    text-align: center;
    border-radius: 5px;
    background-color: rgb(220, 220, 230);
    width: 15%;
    padding: 10px 0 10px 0;
}

.table01 td {
    border-radius: 5px;
    background-color: rgb(240, 240, 250);
    padding: 10px 10px 10px 10px;
}

.table01-title{
    font-size: 30px;
    font-weight: bold;
}

.table01-subtitle{
    font-size: 19px;
    font-weight: bold;
}

.table01-image{
    max-width: 100%;
}

 /* テーブル03（table03：機器（上側：写真、下側：補足説明）） */
 .table03 {
    border: 1px solid  rgb(150 150 150);
    border-radius: 5px;
    border-collapse:separate;
    border-spacing: 5px;
    width: 100%;
    margin-top: 10px;
}

.table03 th {
    text-align: center;
    padding: 0px;        
    background-color: rgb(220, 220, 230);
    font-weight: unset;     /* 強制的 */
}

.table03 td {
    padding: 20px;
    background-color: rgb(240, 240, 250);
    text-align: justify;
}

.table03 img{
    max-width: 100%;
    max-height: 600px;
    padding: 1px;
}

.table03 td img{
    float: right;       /* 画像は右側（ESCA、熱分析） */
}

 /* テーブル04（table04：機器の利用） */
 .table04 {
    border-collapse:separate;
    border-spacing: 4px;
    width: 100%;
}

.table04 th {
    text-align: center;
    border-radius: 5px;
    padding: 5px 2px;
    background-color: rgb(220, 220, 230);
    width: 25%;
    padding: 10px;
}

.table04 td {
    background-color: rgb(240, 240, 250);
    padding: 10px;
}


/* 13 各ページ固有の定義 */

/* 研究支援・NEWS */
.description {
    display: block;
    padding: 20px;
    margin-top: 90px;
    font-size:larger;
    color: rgb(60, 80, 120);
    background-color: rgb(220, 230, 255);
    border: 5px double rgb(200, 210, 230);
    border-radius: 10px;
}

/* 研究支援のイメージと説明 */
.image_explanation{
    display: flex;          /* 写真と説明が横並び */
    margin-bottom: 20px;
}

.image_explanation .image{
    height: 200px;
    width: 100%;
    padding: 10px;
    object-fit: contain; 
    /* なぜかfirefoxのみ写真が小さい★ */
}

/* 機器一覧のページ */

/* 機器の利用のページ */

/* 学外利用のページ */

/* アクセス・当分野のページ */
.ourDivision h4 {
    margin:10px 0;
}

.ourDivision p {
    margin:10px 0 20px 10px;
}

.map iframe {  /* マップ（アクセス）の定義 */
    width: 640px; 
    height: 450px; 
}

/* 機器分野までのアクセス（アクセス）のイメージ */
.image_access{
    max-width: 100%;
    max-height: 650px;
}

/* 統合研究棟Ⅱ　1Fフロアのイメージ */
.Building_Floor {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.image_building{
    width: 304px;
}

.image_floor{
    /*height: 500px;*/
    width: 304px;
}


.image_QRCode{  /* QR code（アクセス）のイメージ */
    height: 100px;
}


/* 14 アイコンの定義 */
.image_icon_pdf{
    width: 40px;
    height: 25px;
}
.image_icon_excel_word{
    width: 30px;
    height: 25px;
}

.image_icon_excel_word_small{
    margin-bottom: 10px;
}

.image_icon_mail{
    width: 20px;
    height: 20px;
    object-fit: contain;
}

/* 15 イラスト */
/* 機器一覧、機器の利用、学外利用の下部のイラスト */
.illustration{
    display: block;
    width: 250px;
    margin: 80px auto 20px;
    position: relative;
    z-index: 30;
}

/* 研究支援・NEWS　総合研究棟Ⅱのイラスト　*/
.illustration_no_margin-bottom{     
    display: block;
    width: 250px;
    margin:0px auto 0; 
    z-index: 30;
}

/* 機器一覧　マイクロCTスキャナ　警告灯（アニメーション 6s） */
@keyframes animation_warning_light {
0% { 
    transform: translateX(0px);
   }
50%{ 
    transform: translateX(90px);
   }
}

.illustration_animation_warning_light{      
    display: block;
    width: 40px;
    margin:0 auto; 
    position: relative;
    bottom: 95px;
    z-index: 20;

    animation-name: animation_warning_light;
    animation-duration: 6s;
    animation-timing-function: steps(1,end);
    animation-iteration-count: infinite;
}

/* 機器の利用　核磁気共鳴装置　振動（アニメーション 2s）*/
@keyframes animation_flucturation {
0% {
    transform: translateX(0px);
   }
25%{
    transform: translateX(2px);
   }
50%{
    transform: translateX(0px);
   }
75%{
    transform: translateX(-2px);
   }
100%{
    transform: translateX(0px);
   }
}

.illustration_animation_flucturation{
    display: block;
    width: 100px;
    margin: 0 auto;
    position: relative;
    bottom: 130px;
    z-index: 20;

    animation-name: animation_flucturation;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
.illustration_animation_flucturation:hover{   /* 効かない */
    animation-play-state: paused;
}



/* 16 フッターの定義 */
footer {
    background-color:rgb(100, 160, 240);
    padding:10px 16px 80px;
    position: relative;     /* copyrightを下にしたいのでrelative（相対位置）を設定 */
}


 /* フッター　右側 */
footer #footer_link{
    position: absolute; /* 絶対位置 */
    top:10px;
    right:20px;
    padding: 5px 15px 0 15px;
    border: 1px solid rgb(150, 200, 255);
    background-color:rgb(110, 170, 240);
    border-radius: 10px;
}

footer #footer_link h4 {     /* リンク */
    display:block;
    color: rgb(0, 50, 200);
    border-bottom:1px solid rgb(0, 50, 200);
    text-align:center;
}

footer #footer_link li{
    list-style-type:none;
    color: rgb(8, 137, 206);
    margin: 6px 0;
}


/* フッターの部課名 */
#footer_our_section{
    line-height: 1.5;
}


/* フッター　下 */
footer small {
    position: absolute;     /* 絶対位置 */
    bottom: 10px;  /* copyrightを下にする */
 }


footer a {
    text-decoration: none;          /* 通常アンダーラインなし */
}

footer a:hover{
    text-decoration: underline;     /* マウスが当たるとアンダーライン */
}

footer .ia {
    color: rgb(0, 130, 180);
    font-weight: bold;
}


/* トップへ戻るボタンの定義 */
/* ボタン */
.page_top_btn {
    position: fixed;
    right: 20px;
    bottom: 2px;
    background: #aaa;
    color: #fff;
    opacity: 0.7;
    border-radius: 10%;
    padding: 4px 15px;
    z-index: 90;
}

/* ボタン（マウスオーバー時） */
.page_top_btn:hover {
    background: #ccc;
    color: rgb(255, 255, 255, 0.8);
}

.page_top_btn_arrow{
    display:inline-block;
    transform: rotate(270deg);
}


/* ページ内ジャンプのずれを修正(2/2) */
#NEWS,#support01,#support02,#support03,#SEM,#rheometer,#FPIA-3000,#Zetasizer,#howToUse01,#howToUse02,#howToUse03,#howToUse04,#howToUse05,#howToUse06,#entrustTest01,#entrustTest02,#entrustTest03,#entrustTest04,#ID_image_floor {
    padding-top: 130px; /* 上部にスペースを作る */
    margin-top: -130px; /* ネガティブマージンで補正 */
}


/* PC対応 */
@media screen and (min-width:1080px){
    .sw2Container {
        display: none;      /* 上の写真は表示しない */      
    }
}

/* タブレット対応 */
@media screen and (max-width:1080px){
    aside {
        display: none;      /* 右側の縦長の写真は表示しない */
    }
}


/* タブレットのみ */
@media screen and (max-width:1080px) and (min-width:900px){
    .sw2Container {
        padding-top: 60px;     /* ナビと写真の間に隙間を設ける */
    }
}

/* 携帯以外 */
@media screen and (min-width:900px){

    .for-mobile_br {
        display: none;     /* 改行しない */
    }

    /* 研究支援／NEWS　＞　総合研究棟Ⅱ　1F　＞　雲　アニメーション 6s*/
    .illustration_transition_no_margin-bottom {
        display: block;
        width: 250px;
        margin:80px auto 0; 
        position: relative;
        bottom: 50px;
        transform:translateX(10%);
    }

    .illustration_transition_no_margin-bottom:hover {
        transform:translateX(-10%);
        transition-property: transform;
        transition-duration: 6s;
        transition-timing-function: ease-out;
        transition-delay: 0s;
    }
}

/* 携帯対応 */
@media screen and (max-width:900px){  /* 900: 01_header.html/01_headerFor2ndLayer.htmlと同期変更必要 (1/5) */
    body .outside{
        display: none;
    }

    .gifu-university_icon{
        display: none;
    }

    #activeNav ul{
        width: 100%;    /* 携帯のときの横幅はウインドウの幅に合わせる */
    }

    #activeNav ul li{
        width: 64px;    /* 携帯のときの１つのNAVIの横幅は64px。これがないとウインドウの横幅が320pxのとき、「支援NEWS」のNAVIだけ横幅が大きくなる */
    }

    #activeNav ul li a{
        font-size: 16px;
    }

    .page_top_btn {
        display: none;      /* Topは表示しない */
    }


    main{
        padding: 0px 0px;
    }

    section {
        padding: 0px 20px;
    }

    .map iframe {
        max-width: 640px; 
        max-height: 450px; 

        width: 100%; 
        height: 200px;
    }

    .image_explanation{
        display: block;         /* 写真と説明が上下に並ぶ */
    }

    .image_explanation .image{
        object-fit: contain;    /* 写真はボックスサイズに合わせて、全体が見えるようにリサイズ */
    }

    .image_explanation .explanation{
        padding: 0px 20px;
    }

    .for-pc {
        display: none;      /* 表示しない */      
    } 

    .illustration_transition_no_margin-bottom { /* 雲　アニメーションなし */
        display: block;
        width: 250px;
        margin:80px auto 0; 
        position: relative;
        bottom: 50px;
    }

    /* フッター対応*/
    footer {
        position: statick; 
        padding:10px 10px 10px;
    }

    footer #footer_link{
        position:static;    /* absoluteからstaticに戻す（リンクを住所の上に表示する） */
        display: block;
        max-width: 350px;
        margin:10px auto 20px;
    }

    footer #footer_link li{
        border-top: none;   /* 線はなし */
        padding: 0px 0px;
    }

    /* フッターの部課名 */
    #footer_our_section{
        display:block;
        max-width: 360px;
        margin:0px auto 20px;
    }

    /* フッター　下 */
    footer small {
        position:static;  
    }
}

/* 携帯２以外 */
@media screen and (min-width:600px){
    .for-mobile_br2 {
        display: none;     /* 改行しない */
    }
} 

/* 携帯対応２ */
@media screen and (max-width:600px){
    .for-mobile_display_none{
        display: none;   
    }

    .nav_spacing {
        letter-spacing: -0em;       /* NAVIの"NEWS"を詰める */
    }
}