@charset "utf-8";

body {
    /* background: rgba(220, 220, 220, 0.8); */
    color: #000;
    /* font-family: 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif; */
    /* font-family:'Oswald', sans-serif, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif; */
    font-family: 'Noto Sans JP', sans-serif;
    font-family: 'Noto Serif JP', serif;
    font-family: 'Oswald', sans-serif;
    font-size: 16px;
    margin: 0 auto;
}

div {
    display: block;
}


/* ======================================================================
    以下（ページによって変える）
====================================================================== */

/* ======================================================================
    トップ
====================================================================== */
.slider {
    margin: 0 auto;
    width: 80%;
}
.slider img {
    height: auto;
    width: 40%;
    margin: auto;
    padding: 0;
}
.slider .slick-next { right: 20px; z-index: 99;}
.slider .slick-prev { left: 15px; z-index: 100;}
.slider .slick-prev:before, .slider .slick-next:before { color: #000;}

@media (max-width: 767px) {
    .slider img { width: 20%;}    
}


/* ======================================================================
    研究
====================================================================== */
.research img {
    width: 70%;
}
@media (max-width: 767px) {
    .research img {
        width: 100%;
    }
}

/* ======================================================================
    オープンラボ
====================================================================== */


.openlab {
    font-size: 12px;
}
.openlab p {
    padding: 0 20px;
}

/* .openlab .poster {
    padding: 10px 20px;
} */
.openlab .poster img {
    min-width: 298px;
    max-width: 20%;
}
.openlab .theme_maruyama,
.openlab .theme_chiashi {
    display: flex;
    flex-wrap: wrap;
    margin: 10px 0;
    padding: 0 10px;
}
.openlab .theme_maruyama a,
.openlab .theme_chiashi a {
    display: block;
}
@media (max-width: 767px) {
    .openlab .theme_maruyama,
    .openlab .theme_chiashi {
        justify-content: center;
    }
    .openlab .theme_maruyama a,
    .openlab .theme_chiashi a {
        padding: 10px;
        width: 298px;
    }    
    .openlab .theme_maruyama img,
    .openlab .theme_chiashi img {
        padding: 0;
        width: 298px;
    }
    .openlab .photo iframe {
        width: 100%;
        height: 300px;
    }

}
@media (min-width: 768px) { 
    .openlab .theme_maruyama a, 
    .openlab .theme_chiashi a {
        padding: 10px;
        width: 45%;
    }
    .openlab .theme_maruyama img, 
    .openlab .theme_chiashi img {
        padding: 10px;
        width: 100%;
    }
    .openlab .photo iframe {
        width: 500px;
        height: 300px;
    }
}
.openlab .peing img {
    max-width: 100px;
    padding: 0 20px;
}
.openlab .peing a {
    color: #000;
}
.openlab .peing p:hover {
    background-color: #DEEBF7;
}



.whatsnew li {
    display: flex;
    flex-wrap: nowrap;
    padding: 0.5em 0;
    text-align: left;
    justify-content: left;
}
.whatsnew .date {
    min-width: 7em;
}
.whatsnew .category {
    min-width: 6em;
}
.whatsnew li:not(:first-child) {
    border-top: solid 1px #555;
}





/* ======================================================================
    以上（ページによって変える）
====================================================================== */








.wrapper {
    padding: 0 auto;
    width: 900px;
}


h1 {
    padding: 0.4em 0.5em;/*文字の上下 左右の余白*/
    color: #494949;/*文字色*/
    background: #f4f4f4;/*背景色*/
    border-left: solid 5px #7db4e6;/*左線*/
    border-bottom: solid 3px #d7d7d7;/*下線*/
  }
h2 {
	position: relative;
	padding: 0 .5em .5em 2em;
    border-bottom: 1px solid #000;
    margin: 2em 0 1em 0;
}
h2::before,
h2::after {
	position: absolute;
	content: '';
	border-radius: 100%
}
h2::before {
	top: .2em;
	left: .2em;
	width: 18px;
	height: 18px;
	background-color: rgba(124, 156, 252, 0.6);
	z-index: 2;
}
h2::after {
	top: .7em;
	left: .7em;
	width: 13px;
	height: 13px;
	background-color: rgba(124,156,252,.3);
}
h3 {
	padding: .5em .5em .5em 1em; /*上下左右の余白*/
	background-color: rgba(124,156,252,.2); /*背景色*/
	border-left: solid 6px #7db4e6; /*左線（線種 太さ 色）*/
}






/* ======================================================================
   以下，スマホ画面
====================================================================== */

@media (max-width: 767px) {
    body {
        color: #000;
        font-size: 12px;
        margin: 0 auto;
        min-width: 360px;
    }
    
    .head_small {
        display: flex;
        /* align-items: center; */
        justify-content: space-between;
        vertical-align: middle;
        background-color: #90EE90;
        box-shadow: 0 0 5px;
        padding: 20px 10px;
        font-size: 20px;
        /* font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; */
    }
    .head_small a {
        text-decoration: none;
        color: #000;
    }
    .head_small img {
        vertical-align: middle;
        width: 20%;
        max-height: 45px;
    }
    .head_small .title {
        /* display: flex; */
        justify-content: center;
        padding-left: 10px;
        padding-right: 30px;
    }
    .head_small .title p {
        margin: 0;
        display: block;
        text-align: center;
    }
    .head_small .title1 {
        font-size: 8px;
    }
    .head_small .title2 {
        font-size: 22px;
    }
    .header {
        display: none;
    }
    .navi {
        display: none;
    }
    .bar {
        margin: 0 10px 0 0;
        padding: 0;
        border: none;
        outline: none;
        background: none;
        font-size: 28px;
        opacity: 0.5;
        cursor: pointer;
    }
    .bar:hover {
        opacity: 0.3;
    }
    .navi {
        background-color: #f1f1f1;
    }
    .navi ul {
        /* display: flex;
        flex-wrap: wrap; */
        padding: 0;
        margin: 0;
        align-items: center;
    }
    .navi li {
        display: block;
        width: 100%;
        padding: 7px 0;
    }
    .navi a {
        text-decoration: none;
        display: block;
        padding-left: 30px; 

    }
    .navi i {
        float: right;
        vertical-align: middle;
        padding-right: 30px;
        padding-top: 3px;

    }


    /* .menu ul::before {
        content: "";
        width: 1px;
        height: 100%;
        background-color: #8e8e8e;
        position: absolute;
        left: 50%;
        top: 0;
    } */
    /* .menu {
        color: #fff;
    } */
    .menu ul {
        border-top: solid 1px #8e8e8e;
        background-color: #5a5a5a;
        color: #fff;
    }
    .menu li {
        border-bottom: solid 1px #8e8e8e;
    }
    .menu a {
        color: #fff;
    }

    /* .menu li:nth-child(odd) {
        border-right: solid 1px #8e8e8e;
    } */
    /* .menu li:last-child {
        border-bottom: none;
    } */

    .lang ul {
        border-top: solid 1px #000;
        border-bottom: solid 1px #8e8e8e;
    }
    .lang li {
        border-top: solid 1px #5a5a5a;
    }
    /* .lang li:nth-child(odd) {
        border-right: solid 1px #8e8e8e;
    } */
    .lang a {
        color: #000;
    }


    .content {
        background-color: #f8f6f1;
    }


    .content_left {
        margin: 3px 1px;
        padding: 10px 10px;
        background-color: #fff;
        box-shadow: 0 0 5px;
    }
    .links_banar {
        display: none;
    }
    .twitter_small {
        margin: 30px 1px;
        /* padding: 10px 10px; */
        box-shadow: 0 0 5px;
        height: 400px;
    }
    .twitter {
        display: none;
    }






    .footer {
        background-color: #90EE90;
        box-shadow: 0 0 5px;
    }
    .footer .name {
        padding: 20px 20px 0 20px;
        margin: 0;
        font-size: 16px;
    }
    .footer .address {
        margin: 0 20px;
        font-size: 12px;
        padding: 0;
    }
    .footer .address p {
        padding: 20px 10px 0 10px;
        margin: 0 0 10px 0;
        border-bottom: solid 1px #000;
    }
    .footer .address div p {
        border-bottom: none;
        margin: 0;
        padding: 0 0 5px 0;
    }
    .footer .address iframe {
        justify-content: center;
    }

    .footer .links {
        margin: 0 20px;
        font-size: 12px;
        padding: 0;
    }
    .footer .links p {
        padding: 20px 10px 0 10px;
        margin: 0 0 10px 0;
        border-bottom: solid 1px #000;
    }
    .footer .links ul {
        margin: 0;
    }
    .footer .links a {
        text-decoration: none;
        display: block;
        color: #000;
        padding-bottom: 5px;
    }
    .footer .sns {
        margin: 0 20px;
        font-size: 12px;
        padding: 0;
    }
    .footer .sns p {
        padding: 20px 10px 0 10px;
        margin: 0 0 10px 0;
        border-bottom: solid 1px #000;
    }
    .footer div {
        padding-left: 20px;
    }
    .footer .sns .fa-twitter-square, .fa-youtube, .fa-youtube-square {
        color: #000;
        padding-right: 10px;
    }



    .footer .copyright {
        font-size: 10px;
        text-align: center;
        margin: 0;
        padding: 20px 0;
    }
    iframe {
        width: 100%;
        height: 200px;

    }


}







/* ======================================================================
    以下，PC画面
====================================================================== */



@media (min-width: 768px) { 
    body {
        color: #000;
        font-size: 14px;
        margin: 0 auto;
        min-width: 900px;
    }
    p {
        font-size: 14px;
    }
   
    .header {
        /* height: 110px; */
        text-align: center;
        background-color: #90EE90;
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        padding: 30px 0 10px 0;
    }

    .header img {
        padding: 0;
        width: 800px;

    }

    .header .header_right {
        text-align: right;
        padding: 0 10px 0 40px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .header_right a {
        /* text-decoration: none; */
        color: #000;
        font-size: 12px;
        display: flex;
        justify-content: space-between;
    }

    .header_right a img {
        width: 20px;
        margin-right: 5px;
    }

    .header_right a:hover {
        background-color: #DEEBF7;
    }
    .head_small {
        display: none;
    }

    .content_wrap {
        padding: 0 auto;
        background: #fff;
    }
    .menu {
        /* border-bottom: solid 1px #ccc; */
        /* border-top: solid 1px #555; */
        background-color: #90EE90;
        padding: 10px 0 20px 0;
        box-shadow: 0 10px 5px;
    }
    .menu ul {
        display: table;
        margin: 0 auto;
        padding: 0;
        width: 60%;
        text-align: center;
        font-size: 16px;
        max-width: 1200px;
    }
    .menu li {
        display: table-cell;
        min-width: 60px;
    }
    .menu li:not(:first-child) {
        border-left: solid 1px #999;
    } 
    .menu a {
        display: block;
        width: 100%;
        text-decoration: none;
        color: #555;
    }
    .menu li:hover {
        background-color: #DEEBF7
    }
    .menu i {
        display: none;
    }
    .lang {
        display: none;
    }

/* .menubar {
    margin: 0;
    padding: 10px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;   
    background-color: #90EE90;
    border-top: solid 1px #888;
}

.menubar a {
    display: block;
    margin: 0 30px;
    text-decoration: none;
    color: #000;
}

.menubar a:hover {
    background-color: #aaa;

} */

    .content {
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        padding: 10px 0 10px 0;
        background-color: #f8f6f1;
    }

    .content_left {
        padding: 10px 60px;
        margin: 0 0 0 20px;
        background-color: #fff;
        box-shadow: 0 0 5px;
        width: 80%;
        max-width: 1000px;
    }


    .content_right {
        width: 180px;
        padding: 0 20px;

    }

    .links_banar img {
        width: 180px;
    }


    .twitter {
        margin: 10px 0;
        /* padding: 10px 10px; */
        box-shadow: 0 0 5px;
        height: 1000px;
    }
    .twitter_small {
        display: none;
    }



    .footer {
        text-align: center;
        background-color: #90EE90;
        padding: 10px 0;
        box-shadow: 0 0 5px;
    }

    .footer .name {
        display: none;
    }
    .footer .address {
        display: none;
    }
    .footer .links {
        display: none;
    }
    .footer .sns {
        display: none;
    }




    .footer .copyright {
        padding: 20px 0 20px 0;
        margin: 0;
        font-size: 12px;
    }
}