/*--------------------------------
グローバルナビ
--------------------------------*/

.g-nav-sub {
    background: #97a0a5;
}


@media(min-width:768px){
    .g-nav-sub ul{
        background: #97a0a5 !important;
    }
}

.g-nav-sub li a {
    color: #fff !important;
    font-weight: bold;
}

.dr-01 a:hover {
    background: #3e5c6d !important;
    color:#fff;
    -webkit-transition: all .5s;
    transition: all .5s;
}

.sub-menu li a:hover {
    background: #3e5c6d !important;
}

@media(max-width:768px){
    .s-headbar{
        background: #3e5c6d; 
    }

    .s-head-box{
        background: #c7d3d9;
    }
    .h-sbar {
        background: #3e5c6d;
    }
    .g-nav-sub {
        background: none;
    }
    .g-nav-sub ul{
        background: none;
    }

    .g-nav-sub li{
        /* //width:49%; */
        border:2px solid #fff;
        padding:0;
        background:#97a0a5 !important;
    }
    .dr-menu > li {
        display: block;
        width: calc (100% / 6);
        color: #376742;
    }
    
    .g-nav-other > ul li {
        background: #3e5c6d;
    }

}

/* 見出し */

.h1-ma-1 {
border-left: 6px solid #97a0a5;
padding-left: 10px;
margin-bottom: 20px;
}

/* カレント表示 */

.g-nav .current{
	background: #3e5c6d;
}


/*--------------------------------
サイドメメニュー色変更
※レイアウトは親サイトstyle.cssにて制御
--------------------------------*/

.ma-s-menu .s-menu-h1{
    background: #3e5c6d;
}

.ma-s-menu .s-menu-list{
    border:1px solid #97a0a5;
}

.ma-s-menu .s-menu-list li{
    border-bottom:1px solid #97a0a5;
    display: block;
}

.ma-s-menu .s-menu-list li:last-child{
    border-bottom:none;
}


.ma-s-menu .s-menu-list li a:hover{
    background: #cce4fa;
}


/*--------------------------------
パンくずリストの色変更
--------------------------------*/
.breadcrumbs{
    color:#97a0a5;
}

.breadcrumbs a:link,.breadcrumbs a:visited{
    color:#97a0a5;
}

.breadcrumbs .current-item{
    font-weight: bold;
}


.t-info-new{
    z-index:10;
} 


/*--------------------------------
TOPICS一覧
--------------------------------*/

@media(min-width:769px){
    .t-info{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .t-info > div{
        width: 48%;
    }
}

.t-info-img{
    max-width:300px;
    margin: 10px auto;
}

.t-info-box{
    position: relative;
    border:1px solid #ccc;
    padding:20px;
    margin-bottom:20px;
}

.t-info-box .t-info-new{
    position: absolute;
    left:10px;
    top:16px;
    background:#61c600;
    color:#fff;
    font-size:1.2rem;
    padding:0 6px;
}

.t-info-title{
    font-weight: bold;
}

.t-info-date{
    color:#999;
    font-size:1.2rem;
    margin-right:10px;
}


/* //.t-info{
    position: absolute;
    right:10px;
    bottom:20px;
} */

@media(max-width:768px){
    .t-info-img{
        float:left;
        max-width:200px;
        margin-right:10px;
    }
}



/* 第２階層扉ページのリスト */

.sec-info dt{
   font-weight: bold; 
   position: relative;
   padding-left:20px;
}

.sec-info dt::before{
	content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
	background: #97a0a5;
	position: absolute;
	top:6px;
	left:6px;
}

.sec-info dd{
    margin-left:1em;
    font-weight: bold;
    padding-left:8px;
}
.sec-info dd::before{
    content:"■";
    font-size:1.3rem;
    margin-right:5px;
	color: #97a0a5;
}


/* TOP　お知らせ　タブの切り替え */


.ma-t-info{
display: flex;
justify-content: space-between;
}

.ma-info-tab li{
margin-right: 2px;
border-left:2px solid #97a0a5;
border-right:2px solid #97a0a5;
/* //border-bottom:2px solid #97a0a5; */
border-top: 2px solid #97a0a5;
border-radius: 0px 20px 0px 0px;
width: calc( 100% / 6 );
text-align: center;
padding:4px;
background:#97a0a5;
color: #fff;
font-weight: bold;
}

.ma-t-info li.t-info-active{
border-bottom: none;
}

.ma-t-info li:last-child{
margin-right:0;
}

.ma-t-info li.t-info-active {
color: #333;
background: #fff;
cursor: auto;
}

.ma-t-info > div {
display: none;
border-left:2px solid #97a0a5;
border-right:2px solid #97a0a5;
border-bottom:2px solid #97a0a5;
border-top: 2px solid #97a0a5;
padding:20px;
}
.ma-t-info > div.t-info-show {
display: block;
width:100%;
}

.ma-t-info li:hover{
cursor: pointer;
}

.ma-t-info::after {
border-bottom: 2px solid #b0c99d;
height: 2px;
}

@media(max-width:768px){

    .ma-t-info{
        display: flex;
        flex-wrap:wrap;
    }    

    .ma-t-info > li{
        width:49%;
        border:1px solid #999;
        border-radius: 0px;
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        margin-bottom:10px;
    }

    .ma-t-info > li:nth-child(2n){
        margin-right:0;
    }

    .ma-t-info li.t-info{
        border-bottom: 1px solid #999;
    }

}

/* 第２階層インフォメーション部分の色変更　*/



.h1-ma-1{
    border-left: 6px solid #97a0a5;
}

/*--------------------------------
下部リンクボタン
--------------------------------*/

.h2-link{
	font-size:1.6rem;
	font-weight: bold; 
   position: relative;
   padding-left:20px;
	font-weight: bold;
}

.h2-link::before{
	content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
	background: #97a0a5;
	position: absolute;
	top:10px;
	left:6px;
}


/*--------------------------------
フッター
--------------------------------*/

/* footer{

} */

.f-menu{
background: url(../img/footer/bg-footer.png) no-repeat center top #97a0a5;
padding:20px 0;
}

.f-nav li a:link, .f-nav li a:visited{
color:#fff;
font-weight: bold;
}

.f-nav li::before{
font-family: "Font Awesome 5 Free";
content: "\f07b";
color:#fff;
margin-right:6px;
font-weight: bold;
font-weight: 900;
}

/* ボタン */

.btn01{
margin: 0 auto;
text-align: center;
padding: 10px;
}

.btn01 a{
color: #fff;
}

.btn01 a:hover{
text-decoration: none;
}

.button {
background-color: #97a0a5;
color: #fff;
display: inline-block;
width: 180px;
padding: 10px;
text-align: center;
text-decoration: none;
outline: none;
border-radius: 5px;

}
.button:hover {
background-color: #3e5c6d;
}


.btn02{
margin: 0 auto 60px;
text-align: center;
padding: 10px;
}

.btn02 a{
color: #fff;
}

.btn02 a:hover{
text-decoration: none;
}

.button2 {
background-color: #97a0a5;
color: #fff;
display: inline-block;
width: 230px;
padding: 10px;
text-align: center;
text-decoration: none;
outline: none;
border-radius: 5px;

}
.button2:hover {
background-color: #3e5c6d;
}


/*--------------------------------
汎用
--------------------------------*/
.contbox{
    border: 1px solid #ccc;
    padding: 20px;
}

.pt20 { 
padding-top: 20px;
}

.circle{
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
background: #97a0a5;/*背景色*/
margin-right: 5px;
}

/*--------------------------------
第３階層（固定ページ編集欄）
--------------------------------*/

.ma-cont{
	border:1px solid #3e5c6d;
	padding:20px;
}

.ma-cont h1{
	border-left:6px solid #3e5c6d;
	font-size: 1.9rem;
	margin-bottom:20px;
	padding-left:10px;
}

.ma-cont h2{
	background: #3e5c6d;
	color:#fff;
	font-size: 2.0rem;
	padding:4px 10px;
	margin-bottom:20px;
}

.ma-cont h3{
    color:#3e5c6d;
    font-size:1.8rem;
    border-bottom:1px solid #3e5c6d;
    padding-bottom:4px;
    padding-left:10px;
    margin-bottom:10px;
}

.ma-cont h4{
    color:#3e5c6d;
    font-size:1.8rem;
    border-bottom:1px solid #3e5c6d;
    padding-bottom:4px;
    padding-left:10px;
    margin-bottom:10px;
}

.ma-cont p{
	margin-bottom:1em;
}

.ma-cont .link p::before{
	font-family: "Font Awesome 5 Free";
	content:"\f138";
	font-weight: 900;
	margin-right:10px;
	color:#3e5c6d;
}

.ma-cont .link p{
	font-weight: bold;
}

/* 編集欄のテーブル設定 
テーブルのレスポンシブは親サイトcommon.cssにて設定
*/

.ma-cont table{
    width: 100%;
    margin-bottom:20px;
}

.ma-cont th, .ma-cont td{
    padding:8px;
    border:1px solid #ccc;
}

.ma-cont table th{
    background: #ebf0f5;
    text-align: left;
}

.ma-page-cont .link p::before{
    font-family: "Font Awesome 5 Free";
    content:"\f138";
    font-weight: 900;
    margin-right:10px;
    color:#3e5c6d;
}

/*--------------------------------
第3階層（コース・研究室について）
--------------------------------*/

.h1-ma-3{
	border-bottom:1px solid #3e5c6d;
	border-left:6px solid #3e5c6d;
	margin-bottom:20px;
	padding-left:10px;
}

.h2-link{
	font-size:1.6rem;
	font-weight: bold; 
   position: relative;
   padding-left:20px;
	font-weight: bold;
}

.h2-link::before{
	content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
	background: #97a0a5;
	position: absolute;
	top:10px;
	left:6px;
}


/*--------------------------------
ブログ（お知らせ）
--------------------------------*/

.news-time{
    color:#3e5c6d;
}

.alignleft a:link, .alignleft a:visited, .alignright a:link,.alignright a:visited{
    color:#a9b6bc;
}

.post-date{
    text-align: right;
    color:#3e5c6d;
}

.single-cont{
    min-height:300px;
}

/*--------------------------------
カテゴリー一覧（お知らせ）
--------------------------------*/

@media(min-width:768px){
    .cat-post{
        display: flex;
    }
}

.cat-date{
    margin-right:10px;
}

.continue{
    font-size:1.2rem;
    color:#888;
    margin-left:10px;
}

.cat-post{
    border-bottom:1px dashed #999;
    padding-bottom:10px;
}

.cat-post:last-child{
    border:none;
}

.cat-post dd::before{
    font-family: "Font Awesome 5 Free";
    content: "\f138";
    color:#3e5c6d;
    margin-right:6px;
    font-weight: bold;
    font-weight: 900;
}  

/*--------------------------------
お知らせ記事一覧
--------------------------------*/





/*--------------------------------
学科概要：youtubeムービー挿入箇所
--------------------------------*/
.mat-intro-movie-box {
    margin-bottom: 60px;
}

iframe#movie-frame {
    width:calc(100% - 40px);
    display: block;
    margin:0 auto;
}



/*--------------------------------
サイトマップ　
--------------------------------*/

.wsp-pages-list > li >a{
color:#3e5c6d;
}

/*--------------------------------
フッターサイトマップ
--------------------------------*/

footer .wsp-pages-title{
display: none;
}

footer .wsp-pages-list {
display: flex;
justify-content: space-between;
}

footer .wsp-pages-list > li{
font-size:1.4rem;
}

footer .wsp-pages-list > li::before{
font-family: "Font Awesome 5 Free";
content: "\f07b";
font-weight: bold;
font-weight: 900;
color:#fff;
margin-right:4px;
}

footer .wsp-pages-list li{
font-size:1.4rem;
border-bottom:none;
}

footer .wsp-pages-list li a:link, footer .wsp-pages-list li a:visited,footer .wsp-pages-list li a:hover{
color:#fff;
}

footer .wsp-pages-list .children li{
list-style: none;
}

footer .wsp-pages-list .children > li:first-child{
display: none;
}