@charset "utf-8";

/* 源ノ角ゴシック */
@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);



/* ──────────────────────────── */


/* 色変数の設定 */
:root {
    --banner-color: #0096CC;/*#21214A;*/
    --banner-button-color: #004B66;/*#393980;*/
    --banner-text-color: #FFFFFF;
    --banner-button-color-now: #96CC00;    
    --menu-text-color: var(--banner-text-color);
    --menu-line-color: #ffffff;

    --outside-color: #43434A;
    --contents-text-color: var(--outside-color);
    --contents-border-color: var(--outside-color);
    --contents-background-color: #FFFFFF;
    --contents-text-strong-color: #CC3600;/*#612C2C;*//*#1B5241;*/
    --h1-accent-color: var(--contents-text-strong-color);  
    
    --contents-border-line-color: #BCBCCF; 
}

/* ページ全体の共通設定 */

html{

	background-color: var(--outside-color);
	background-position: top center;

	color: var(--contents-text-color);	


}

/* 日本語のときの設定 */
html[lang="ja"]
{
    font-family: 'Noto Sans Japanese';
    font-weight: 200;
    text-align: justify;
    font-size: 1.0em;
}

/* 英語のときの設定 */
html[lang="en"]
{
    font-family: 'Roboto';
    font-weight: 300;
    text-align: left;
    hyphens: auto;
    font-size: 1.0em;    
}



/* ページの表示部分の設定 */
.master
{
	position:relative;
	margin: 0 auto;
	/*padding: 0 3.0em 0 3.0em;*/
	/*width:900px;*/
	border:solid;
	border-width:1px;
	border-color: var(--contents-border-color);
	border-bottom-width:0;
	background-color: var(--contents-background-color);

	z-index: 0;
}

/* PCからのときは1024pxにする */

@media screen and (min-width: 479px)
{
	.master
	{

	    width: 1024px;
	}
}


/* バナー(阪大蛋白研・機能構造計測学研究室)とメニューの設定 */
.header
{
	/*margin: 0 auto;*/

    color: var(--banner-text-color);
    /*color: #ffffff;*/
    font-weight: 100;
/*
    background-color: #0096cc;
    background-image: url(http://www.transparenttextures.com/patterns/noisy-net.png);
*/
/* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */
    Background: linear-gradient(155deg, #004B66, var(--banner-color) 100%);/*var(--banner-color);*/
	
    /*background: #3261AB;*/


    /*position: relative;*/
    position: fixed;
    width: 100%;
    z-index: 2;
    /*height: 6em;*/
    /*	padding: 1em 0.5em 1em 0.5em;*/

    

}


/* PCからのときは1024pxにする */
@media screen and (min-width: 479px)
{
	.header
	{
	    width: 1024px;

	}
}

/* バナーとスマホボタン */
.header-banner
{
    /*display: block;*/
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flexbox;
    display: -moz-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;

    position: relative;


}

/* バナーのみ */
.header-banner-logo
{
    /*float: left;*/
    display: block;

    
    width: 80%;
    padding: 0.0em 0.0em 0.5em 2em;
}

:lang(en) .header-banner-logo
{
    font-family: 'Roboto Condensed';
    font-weight: 300;
    font-kerning: normal;
}

/* 阪大・蛋白研の文字・余白設定 */
.header-osaka-univ-ipr
{
	font-size: 1.6em;
	padding: 0.5em 0em 0.1em 0.0em;
}

.header-osaka-univ-ipr .full
{
    display: block;
}

.header-osaka-univ-ipr .abbrev
{
    font-size: 0.8em;
    padding: 0.5em 0em 0.1em 0.0em;
    display: none;    
    display: none;
}


/* 機能構造計測学の文字・余白設定 */
.header-lab-name
{
    font-size: 2.56em;
    font-weight: 500;
    padding: 0em 0em 0.0em 0.0em;
	
}


/* スマホでは文字サイズを小さくする */
@media screen and (max-width: 479px)
{
    .header-osaka-univ-ipr
    {
	font-size: 0.8em;		
    }
    .header-lab-name
    {	
	font-size: 1.2em;
    }

    .header-lab-name .br::before
    {
	content: '\A';
	white-space: pre;
    }

}

/* iPhone5, SE用の設定 */
@media screen and (max-width: 380px)
{
    .header-lab-name
    {	
	font-size: 1.1em;
    }

    :lang(en) .header-osaka-univ-ipr .full
    {
	display: none;
    }    

    :lang(en) .header-osaka-univ-ipr .abbrev
    {
	display: block;
    }


}


.header_link
{
    color: #FFFFFF;
    text-decoration: none;
    padding-botttom: 2px;
    border-bottom: 1px solid #FFFFFF;
}
/* スマホ用のメニューボタン */
.nav_toggle
{
    text-align: center;
    vertical-align: middle;
    /*height:4em;*/
    width: 20%;
    align-items: center;
    justify-content: center;

    display:none; /* PCでは非表示*/

    position: relative;
    /*background-color: #234378; */
    /*background-color: #6A8CC7;*/
    background-color: var(--banner-button-color);
    cursor:pointer;
    overflow: hidden;

}


/* メニューボタンアイコンの表示 */
.nav_toggle span:before
{
    /*content: "\2261";*/
    font-family: 'Material Icons';
    content: "\e896";
    /*content: "\f166";*/
    /*content: url("icons/fi-list-bullet.svg");*/

    font-size: 3em;
    align-items: center;
    justify-content: center;

}



.header-navi-container
{
    display: -ms-grid;
    display: grid;
    -ms-grid-template-columns: repeat(4, 1fr);
    grid-template-columns: repeat(4, 1fr);
    -ms-grid-template-rows: 2em 2em auto;    
    grid-template-rows: 2em 2em auto;
    padding: 1.5em 2em 1.5em 2em;
    grid-gap: 0.7em 0.5em;
}

@media screen and (max-width: 479px)
{

    .header-navi-container
    {
	display: block;

	background-color: #303030;
	padding: 0em 0em 0em 0em;

	/*padding: 0.5em 2em 0.5em 2em;*/
    }
    
    header nav
    {

	position: absolute;
	right: 0;
	top: -100em /*-500px*/;
	width: 100%;
	padding: 0em 0em 0em 0em;
	text-align: left;
	z-index: 2;

	opacity: 0.7
    }


    .nav_toggle
    {

	display: -webkit-box;
	display: -moz-box;
	display: -webkit-flexbox;
	display: -moz-flexbox;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: -moz-flex;
	display: flex;



	/*background-image: url("icons/fi-list-bullet.svg");*/

    }

    /*
    .nav_blur
    {
	display: block;
    }
*/
    
    .open_nav nav
    {
	-moz-transform: translateY(104.5em);
	-webkit-transform: translateY(104.5em);
	transform: translateY(104.5em);

    }

    :lang(en) .open_nav nav
    {
	-moz-transform: translateY(105.7em);
	-webkit-transform: translateY(105.7em);
	transform: translateY(105.7em);	
    }


    .open_nav .nav_toggle span:before
    {
	font-family: 'Material Icons';
	content: "\e14c";
	/*content: "\2715";*/
	font-size: 3em;
	align-items: center;
	justify-content: center;

    }

}

@media screen and (max-width: 321px)
{
    .open_nav nav
    {
	-moz-transform: translateY(103.8em);
	-webkit-transform: translateY(103.8em);
	transform: translateY(103.8em);

    }

    :lang(en) .open_nav nav
    {
	-moz-transform: translateY(105.0em);
	-webkit-transform: translateY(105.0em);
	transform: translateY(105.0em);

    }        
}


.header-navi-item
{
    text-align: center;
    vertical-align: middle;
    font-size: 1.40em;
    list-style: none;

/*
  border-left: solid 1px;
  border-right: solid 1px;
border-color: #ffffff;
*/
}

@media screen and (max-width: 479px)
{
    .header-navi-item
    {
	text-align: left;
	font-size: 1.6em;

    }
    
}

.header-navi-item-now
{

    border-bottom: solid 3px #003B4F;/* #002836;*/ /*var(--banner-button-color-now);*/
    padding-bottom: 1.6em;
    margin-bottom: 2.5em;


    /*background: #CC8166;*//*#004B66;*/
    /*
    border-bottom: solid 1px white;
    border-top: solid 1px white;
    border-right: solid 1px white;
    border-left: solid 1px white;
*/
    /*border: solid 1px white;*/

    /*
    border-bottom: solid 2px var(--banner-button-color);
    margin-bottom: -2px;
*/
}

@media screen and (max-width: 479px)
{
    .header-navi-item-now
    {
	border-bottom: none;
	margin-bottom: 0px;
	padding-bottom: 0;
    }
    
}



.header-navi-item  a
{
	/*font-family: Arial, Helvetica, Sans-Serif;*/
	/*font-size: 1.0em;
	font-weight: 100;
       */
    /*font-family: 'Noto Sans Japanese';*/
    font-weight: 100;
    text-decoration: none;
    display: block;

}

.header-navi-item  a:link
{
    color: var(--menu-text-color);
	/*color: #ffffff;*/

}

.header-navi-item  a:visited
{
    color: var(--menu-text-color);
}

.header-navi-item  a:hover
{
    

    color: var(--menu-text-color);
	/*color: #ffffff;*/


    font-weight: 500;
}

.header-navi-item  a:active
{
    color: var(--menu-text-color);

	/*color: #ffffff;*/

    font-weight: 300;
}


@media screen and (max-width: 479px)
{
    .header-navi-item  a
    {
	padding: 0.5em 2rem 0.5em 2rem;
	border-bottom: solid 1px var(--menu-line-color);
    }
}

@media screen and (max-width: 321px)
{
    .header-navi-item  a
    {
	padding: 0.3em 2rem 0.3em 2rem;
	border-bottom: solid 1px var(--menu-line-color);
    }
}

/*　メインコンテンツ  */
.contents
{
    display: block;
}


/* スマホメニュー表示のときのブラー設定 */
@media screen and (max-width: 479px)
{
    .contents.open_nav
    {
	pointer-events: none;
	-webkit-filter: blur(8px);
	-moz-filter: blur(8px);
	-ms-filter: blur(8px);
	filter: blur(8px);
    }
}


.picture_area
{
    text-align: center;
}

.picture_area img
{
    height: auto;
    max-width: 100%;/*900px;*/
    padding: 0em 0em 2em 0em;


}

.picture_area .for-slide
{
    padding: 0 0 0 0;
}




.main_contents{

	padding:1em 5em 5em 5em;
	/*font-weight: 200;*/
	/*width:600px;*/

	font-size:1.0em;
	/*text-align: justify;*/
	line-height:1.8;
	/*letter-spacing:0px;*/


}

@media screen and (max-width: 1024px)
{
    .main_contents
    {
	padding:1em 2em 5em 2em;
    }
}

/* 
メインコンテンツとリンクボタンの横位置をそろえるために
.main_contents と .link-ions のright, leftのpaddingを同じ数値にしてください
*/

.link-icons
{
    /*margin:5px;
      padding:8px;*/
    /*background:#ffffff;*/
    /*border:1px solid #ffffff;*/
    text-align:right;
    padding: 0 5em 0 5em;
}

@media screen and (max-width: 479px)
{
    .link-icons
    {

	padding: 0 2em 0 2em;
    }
}

.link-icons img
{
    width: auto;
    height: auto;
    margin:8px 1px 1px 0;
    border:#eee;
    border-color:#eee;
    border-style:solid;
    border-width:0;
    padding: 0 0 0 0;
}



/* ──────────────────────────── */
/* 文字の拡大 */

.emphasize-cap
{

    font-weight:400;
    font-size:1.414em;
    vertical-align: baseline;
    color:#F4A460;

}

@media screen and (max-width: 321px)
{
    .emphasize-cap{


	font-size:1.2em;

    }
}

.emphasize-color{
	color: #00bfff;
}

.main_contents bold
{
    font-weight: 600;
}

.emphasize-color-green
{
    color: #96CC00;/*#5EC84E;*/
    font-weight: 600;    
}


.main_contents strong {
    color: var(--contents-text-strong-color);
    font-weight: 600;
}

.emphasize-color-blue
{
    color: #004BCC;/*#6A8CC7;*/
    font-weight: 600;
}

.emphasize-color-red
{
    color: var(--contents-text-strong-color);
    font-weight: 600;    
}

.emphasize-color-yellow
{
		color: #F39800;/*#F39800;*/
    font-weight: 600;    
}

.emphasize-color-purple
{
    color: #8858AA;
    font-weight: 600;
}


.main_contents .emphasize-color-green
{
    color: #96CC00;/*#5EC84E;*/
    font-weight: 600;    
}

.sub_navigator
{
    height:auto;
    width: auto;
    /*background: #6A8CC7;
    color: #ffffff;
    border-top: solid 1px;*/
    border-bottom: solid 1px;
    border-bottom-color: #d0d0d0;
    margin: 0.0em 5.0em 0.0em 5.0em;
    padding: 1.0em 0em 1.0em 0em;
    font-weight: 200;
}

:lang(en) .sub_navigator
{
    font-weight: 300;
}

@media screen and (max-width: 479px)
{
    .sub_navigator
    {
	margin: 0em 2em 0em 2em;
    }
}

.sub_navigator a{
    text-decoration: underline;
    /*font-weight: 200;*/
    color: #666;
}

.sub_navigator span:after
{
    content: ">";
    padding-left: 1em;
    padding-right: 1em;
    font-weight: 100;
}

.main_contents .back_button
{
    text-decoration: none;
    color:#ffffff;
    Background-color: #6A8CC7;
    padding: 0.5em 1em 0.5em 1em;
    margin-left: 5px;
    display: inline-block;
/*    width: 10em;*/
    text-align: center;
    float: right;
    
}

.main_contents a
{
    /*
    text-decoration: underline;
   */
    text-decoration: none;
    border-bottom: 1px solid  var(--contents-text-color);
    color: #444;
    /*font-weight: 300;*/
}

:lang(en) .main_contents a
{
    /*text-decoration: underline;*/
    text-decoration: none;
    border-bottom: 1px solid var(--contents-text-color);    
    color: #444;
    /*font-weight: 400;*/
}



.main_contents h1
{
    font-weight: 400;
    font-size: 2em;

    padding: 0.1em 0.64em;
    
    border-left: solid 5px var(--h1-accent-color);
}

:lang(en) .main_contents h1
{
    font-family: 'Roboto Condensed';
    font-weight: 600;
    font-kerning: normal;
}

@media screen and (max-width: 479px)
{
    .main_contents h1
    {
	padding: 0.1em 0.5em;	
	font-size: 1.414em;
    }
}

.main_contents h2
{
    font-weight: 400;
    font-size: 1.414em;
    margin-top: 2em;
    vertical-align: baseline;
    color: #CC5F00;
}

.main_contents h2:first-letter
{
    /*font-size: 1.414em;*/
    font-size: 1.0em;
}


@media screen and (max-width: 479px)
{
    .main_contents h2
    {
	font-size: 1.0em;

    }
    .main_contents h2:first-letter
    {
	/*font-size: 1.414em;*/
	font-size: 1.0em;
    }    
}

.main_contents h3
{
    font-weight: 400;
    font-size: 1.0em;
}

.main_contents p
{
    padding: 0em 0em 3em 0.0em;
    margin: 0em 0em 0em 0em;
}


.main_contents li
{
    list-style: none;
}

.main_contents ol li
{
    list-style: decimal;
    padding-bottom: 1.0em;
}

.main_contents .list ul li
{
    padding-top: 0.2em;
    padding-bottom: 0.3em; 
}

.main_contents img
{
    width: 100%;
    padding: 2.0em 0em 3em 0em;
    display: block;
}


.main_contents .figure
{
    counter-increment: fig_id;
}


.main_contents .figure img
{
    width: 100%;
    padding-bottom: 1em;
}

@media screen and (min-width: 478px)
{
    .main_contents .figure .two-columns
    {
	display: flex;
	align-items: flex-end;
    }
    
    .main_contents .figure .two-columns img
    {
	width: 50%;
	padding: 0 0 0 0;
	/*height: 50%;*/
    }    
}



.main_contents .figure figcaption
{
}

.main_contents .figure figcaption:before
{
    font-weight: 500;
    content: "図" counter(fig_id) ": ";
}

:lang(en) .main_contents figure figcaption:before
{
    font-weight: 500;
    content: "Fig." counter(fig_id) ": ";
}


@media screen and (min-width: 478px)
{
    
    .main_contents .figure .two-columns figcaption
    {
	padding-left: 3em;

    }
}

.main_contents .figure .two-columns figcaption:before
{
    font-weight: 500;
    content: "図" counter(fig_id) ": ";
}

:lang(en) .main_contents .figure .two-columns figcaption:before
{
    font-weight: 500;
    content: "Fig." counter(fig_id) ": ";
}



@media screen and (min-width: 478px)
{
    /* padding-topと-bottomの量は.main_contetnts pのbottomと対応させる*/
    .main_contents .two-columns-with-body
    {
	display: grid;
	grid-template-columns: 15em 1fr;
	grid-template-rows: 1fr;
	align-items: center; /* 左カラムの図が右の文章の中心と揃うことを期待している。
				ただし、本文が短い場合には段落間の間隔が崩れるので
				対応を考えなければならない。 */
	
	padding-bottom: 2em;

    }

    .main_contents .two-columns-with-body .fig-column
    {
	
	grid-column: 1;
	grid-row: 1;
	/*width: 40%;*/ /*100em;*/
	/*align-items: center;*/
    }

    .main_contents .two-columns-with-body .fig-column img
    {
	display: block;
	width: 100%;
    }

    .main_contents .two-columns-with-body .body-column
    {
	grid-column: 2;
	grid-row: 1;
    }

    .main_contents .two-columns-with-body .body-column p
    {
	padding: 0 0 0 3em;
    }

    /* 変則的な対応、通常はbottomに段落間の間隔を入れているが、
       .two-columns-with-body自身が下に余白をもつので、
       pが隣接する場合のみtopに余白を入れることにしている */
    .main_contents .two-columns-with-body .body-column p + p
    {
	padding-top: 2em;
    }
}




.hideable-contents
{
}

.hideable-contents input
{
    display: none;
}

@keyframes show
{
    from
    {
	opacity: 0;
    }
	
    to
    {
	opacity: 1;
    }
}

@media screen and (max-width: 769px)
{


    .hideable-contents h2
    {
	border-bottom: solid 1px #aaaaaa;
    }

    .hideable-contents h2:first-letter
    {
	
	/*font-size: 1.414em;*/
	font-size: 1.0em;
    }

    .hideable-contents h2 span
    {
	/*font-size: 1.414em;*/
	font-size: 1.0em;
    }    
    
    
    .hideable-contents div
    {
	display: none;
    }

    .hideable-contents input:checked ~ div
    {
	display: block;
	animation: show 1s linear 0s;
    }

    .hideable-contents input:checked ~ label h2
    {
	border-bottom: none;
    }    

    .hideable-contents label h2:before
    {
	font-family: 'Material Icons';
	content: '\e5cf';
    }

    .hideable-contents input:checked ~ label h2:before
    {
	font-family: 'Material Icons';
	content: '\e5ce';
    }


}

@media screen and (max-width: 769px)
{
    .hideable-contents .old-publications
    {
	display: block;
    }
}

.hideable-contents .old-publications h2
{
    border-bottom: solid 1px #aaaaaa;
}

.hideable-contents .old-publications h2:first-letter
{
    font-size: 1.414em;
}

.hideable-contents .old-publications h2 span
{
    font-size: 1.414em;
}

@media screen and (max-width: 769px)
{
    .hideable-contents .old-publications h2:first-letter
    {
	font-size: 1.0em;
    }

    .hideable-contents .old-publications h2 span
    {

	font-size: 1.0em;
    }        
}
    
.hideable-contents .old-publications div
{
    display: none;
}

.hideable-contents  .old-publications input:checked ~ div
{
    display: block;
    animation: show 1s linear 0s;
}

.hideable-contents  .old-publications input:checked ~ label h2
{
    border-bottom: none;
}    

.hideable-contents  .old-publications label h2:before
{
    font-family: 'Material Icons';
    content: '\e5cf';
}

.hideable-contents  .old-publications input:checked ~ label h2:before
{
    font-family: 'Material Icons';
    content: '\e5ce';
}


.publication-list-header
{
    
}


;
			     
.member-list
{
}

.member-list td
{
    vertical-align: top;
}

@media screen and (min-width: 480px)
{
    .member-list h2
    {
	padding: 1.414em 0em 0em 0em;
    }
    .member-list h3
    {
	/*font-size: 1.414em;*/
	font-size: 1.1em;
    }
}

.member-list .first-name-ja
{
}

.member-list .last-name-ja
{
}

.member-list .first-name-en
{
    font-family: 'Roboto Condensed';
    font-weight: 300;
}

.member-list .last-name-en
{
    font-family: 'Roboto Condensed';
    font-weight: 300;    
}

:lang(en) .member-list .first-name-en
{
    font-family: 'Roboto';
    font-weight: 300;
}

:lang(en) .member-list .last-name-en
{
    font-family: 'Roboto';
    font-weight: 300;    
}

.member-list .last-name-ruby:before
{
    content: "(";
}



.member-list .first-name-ruby:after
{
    content: ",";
}

:lang(en) .member-list .email:before
{
    content: "(";
}

.member-list .email:after
{
    content: ")";
}

:lang(en) .member-list .institute:before
{
    content: "(";
}

.member-list .institute:after
{
    content: ")";
}

.member-list .institute-en
{
    font-family: 'Roboto Condensed';
    font-weight: 300;        
}

.member-list .institute-en:before
{
    content: "(";
    font-family: 'Roboto Condensed';
    font-weight: 300;            
}

.member-list .institute-en:after
{
    content: ")";
    font-family: 'Roboto Condensed';
    font-weight: 300;            
}

.member-list .institute-ja-full
{
    display: inline;
}

.member-list .institute-ja-abbrev
{
    display: none;
}

@media screen and (max-width: 479px)
{
    .member-list .last-name-ruby
    {
	display:none;
    }

    .member-list .first-name-ruby
    {
	display:none;
    }
    
    .member-list .email:before
    {
	content: "(";
    }

    .member-list .institute:before
    {
	content: "(";
    }

    .member-list .institute-ja-full
    {
	display: none;
    }

    .member-list .institute-ja-abbrev
    {
	display: inline;
    }
}

.event-list
{
}

.event-list h2
{
    font-weight: 300;
    font-size: 1.4em;
    padding-bottom: 1em;
    color: var(--contents-text-color);
    
}

.event-list h3
{
    font-weight: 300;
    font-size: 1.2em;
    padding-bottom: 1em;
    color: var(--contents-text-color);
    
}

.event-list .element
{
    padding-top: 1em;
    padding-bottom: 2em;
    margin-bottom: 5em;
    border-bottom: 0.1em solid var(--contents-border-line-color);
}

.event-list .element p
{
    
    padding-top: 1em;
    padding-bottom: 1em;

    
}


.event-list .element table
{
    font-weight: 300;
    padding-bottom: 1.5em;
}

.event-list .element table caption
{
    text-align: left;
    font-weight: 500;
    margin-bottom: 0.5em;
}

.event-list .element table th
{
    font-weight: 500;
    font-size: 1em;
    padding-right: 1em;
    white-space: nowrap;
    vertical-align: top;
}

.event-list .element table td
{
    font-weight: 300;
    font-size: 1em;
    white-space: nowrap;
    vertical-align: top;
}

.event-list .element .informations
{
    display: block;
    text-align: right;
}

.event-list .element .informations a
{

    text-decoration: none;
    color:#ffffff;
    Background-color: #6A8CC7;
    padding: 0.5em 1em 0.5em 1em;
    margin-left: 5px;
    display: inline-block;
    width: 5em;
    text-align: center;
/*
    border-right: 2px solid #5F7EB2;
    border-bottom: 2px solid #5F7EB2;
*/
}

/*
.event-list a span:before
{
    font-family: 'Material Icons';
    content: '\e88f';


    font-size: 1.414em;
    padding-right: 0.5em;
    font-weight: 400;
    vertical-align: -13%;

}
*/


.event-list .element .informations .additional a 
{

    text-decoration: none;
    color:#ffffff;
    background-color: #61A6C1;
/*

    border-right: 2px solid #61A6C1;
    border-bottom: 2px solid #61A6C1;
*/
}

.event-list .element .photo
{
    text-align: center;
}

.event-list .element .photo img
{
    height: auto;
    max-width: 70%;/*900px;*/
    display: inline-block;
}

.event-list h3
{
    font-weight: 300;    
}



.publication-list-en
{
    font-family: 'Roboto';
    font-weight: 300;
    list-style: none;
}    



    
.publication-list-en .authors
{
    display: inline;
}



.publication-list-en .authors:after
{
    content: ", ";
}

.publication-list-en .title
{
    font-weight: 500;
    hyphens: auto;
}


.publication-list-en .title:after
{
    content: ", ";
}


.publication-list-en .preprint-title:before
{
    content: "[Preprint] ";
}

.publication-list-en .preprint-title
{
    font-weight: 500;
    hyphens: auto;
}


.publication-list-en .preprint-title:after
{
    content: ", ";
}

.publication-list-en .journal
{
    font-weight: 300;
    font-style: italic;
    hyphens: auto;
}

.publication-list-en .journal:after
{
    font-weight: 200;
    font-style: normal;
    content: ", ";
}

.publication-list-en .volume
{
}

.publication-list-en .volume:after
{
    content: ", ";
}

.publication-list-en .page
{
}

.publication-list-en .page:after
{
    content: ", ";
}

.publication-list-en .year:before
{
    /*content: '(';*/
}

.publication-list-en .year
{
}

.publication-list-en .year:after
{
    /*content: ")";*/
}

.publication-list-en .pub-date:before
{
    content: ', Published ';
}

.publication-list-en .pub-date
{
}


.publication-list-en .doi
{
    hyphens: none;
}


.publication-list-en .doi:before
{
    content: ", DOI: ";
}

.publication-list-en .issn
{
    hyphens: none;
}


.publication-list-en .issn:before
{
    content: ", ISSN: ";
}


.publication-list-en .preprint-doi:before
{
    content: ", ";
}

/*
.publication-list-en .comment:before
{
    content: ", ";
}
*/

.publication-list-en .comment-ja:before
{
    white-space: pre;
    content: ",\A一言紹介: ";
}

.publication-list-en .comment-en:before
{
    white-space: pre;    
    content: ",\AHighlight: ";
}


.publication-list-en .comment
{
    font-weight: 300;
}

.publication-list-en .chapter-title
{
    hyphens: auto;
}

.publication-list-en .chapter-title:after
{
    content: ", ";
}

.publication-list-en .book-title
{
    font-weight: 300;
    font-style: italic;
    hyphens: auto;    
}

.publication-list-en .book-title:after
{
    content: ", ";
}

.publication-list-en .editors:before
{
    content: "Editors: ";
}
.publication-list-en .editors
{
}
.publication-list-en .editors:after
{
    content: ", ";
}

.publication-list-en .publisher:before
{
    content: ", ";
}

.publication-list-en .publisher
{
    content: ", ";
}

.publication-list-en .isbn
{
    hyphens: none;
}


.publication-list-en .isbn:before
{
    content: ", ISBN: ";
}

.publication-list-ja
{
    list-style: none;
}    



    
.publication-list-ja .authors
{
    display: inline;
}



.publication-list-ja .authors:after
{
    content: ", ";
}

.publication-list-ja .title
{
    hyphens: none;
    font-weight: 500;
}

.publication-list-ja .title:after
{
    content: ", ";
}

.publication-list-ja .journal
{
    font-weight: 500;
}

.publication-list-ja .journal:after
{
    font-weight: 200;
    font-style: normal;
    content: ", ";
}

.publication-list-ja .volume
{
}

.publication-list-ja .volume:after
{
    content: ", ";
}

.publication-list-ja .page
{
}

.publication-list-ja .page:after
{
    content: ", ";
}

.publication-list-ja .year:before
{
    /*content: '(';*/
}

.publication-list-ja .year
{
}

.publication-list-ja .year:after
{
    /*content: ")";*/
}

.publication-list-ja .pub-date:before
{
    content: ', ';
}

.publication-list-ja .pub-date
{
}


.publication-list-ja .doi
{
    hyphens: none;
}


.publication-list-ja .doi:before
{
    content: ", DOI: ";
}

.publication-list-ja .issn
{
    hyphens: none;
}


.publication-list-ja .issn:before
{
    content: ", ISSN: ";
}


.publication-list-ja .comment-ja:before
{
    white-space: pre;
    content: ",\A一言紹介: ";
}

.publication-list-ja .comment-en:before
{
    white-space: pre;
    content: ",\AHighlight: ";
}


.publication-list-ja .comment-en
{
    /*font-weight: 300;*/
}

.publication-list-ja .comment-ja
{
    /*font-weight: 300;*/
}

.publication-list-ja .chapter-title
{
}

.publication-list-ja .chapter-title:after
{
    content: ", ";
}

.publication-list-ja .book-title
{
    font-weight: 500;
}

.publication-list-ja .book-title:after
{
    content: ", ";
}

.publication-list-ja .editors:before
{
    content: "編集: ";
}

.publication-list-en .editors
{
}

.publication-list-ja .editors:after
{
    content: ", ";
}

.publication-list-ja .publisher:before
{
    content: ", ";
}

.publication-list-ja .publisher
{
    content: ", ";
}

.publication-list-ja .isbn
{
}


.publication-list-ja .isbn:before
{
    content: ", ISBN: ";
}

.publication-list-ja
{
    list-style: none;
}    




@media screen and (max-width: 479px)
{
    .publication-list-en .authors
    {
	display: none;
    }

    .publication-list-en .title
    {
	hyphens: auto;
    }

    .publication-list-en .comment
    {
	display: none;
    }

    .publication-list-ja .authors
    {
	display: none;
    }

    .publication-list-ja .title
    {
	hyphens: auto;
    }
    .publication-list-ja .comment
    {
	display: none;
    }    
}

.publication-list-en li
{
    padding-bottom: 1.5em;
}

.publication-list-ja li
{
    padding-bottom: 1.5em;
}

div#pub_menu {
    display: grid;
    grid-template-columns: repeat(4, 1fr);    
}

div#pub_menu a {
    display: block;
    font-size: 1.414em;
    text-align: center;
    text-decoration: none;
    padding-botttom: 2px;
    margin-left: 0.5em;
    margin-right: 0.5em;
    border-bottom: 1px solid var(--contents-text-color);    
}

@media screen and (max-width: 479px) {
    div#pub_menu {
	display: none;
    }
}


/* お知らせボックス */
.news {
    /*
    height: 30em;
    overflow-y: scroll;
   */
    height: auto;
}

.news dl {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 0;
}

.news dt {
    padding-top: 0.5em;
    padding-bottom: 0.4em;
    margin-bottom: 2em;
    width: 15%;

    border-width: 0px 0px 3px 0px;
    border-bottom-color: #e0e0e0;
    border-style: solid;    
}

.news dd {
    margin-inline-start: 0px;
    width: 85%;

    padding-top: 0.5em;
    padding-bottom: 0.4em;
    margin-bottom: 2em;
    
    border-width: 0px 0px 3px 0px;
    border-bottom-color: #e0e0e0;
    border-style: solid;
}

.news dd .with-picture {
    display: grid;
    grid-template-columns: 40% 1fr;
    column-gap: 2em;
}

.news dd .with-picture .left {
    grid-column: 1/2;

}

.news dd .with-picture .left img {
    display: block;
    padding: 0.5em 0em 3em 0em;
}



.news dd .with-picture .right {
    grid-column: 2/3;
}


@media screen and (max-width: 479px)
{
    .news dt {
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	margin-bottom: 0em;
	width: 100%;
	border-width: 0px 0px 0px 0px;
	border-style: none;    
    }

    .news dd {
	padding-top: 0.5em;
	padding-bottom: 1.5em;
	width: 100%;
    }    
}

.news .button {

    
    text-align: right;
}



/* ──────────────────────────── */
/* フッター部分 */

.footer
{
	position:relative;
	z-index:0;
	overflow:hidden;
	text-align:right;
	font-family: 'Roboto Condensed';
	font-weight: 300;
	font-size:0.8em;
	color: var(--banner-text-color);
	margin: 0em 0em 0em 0em;
	padding:0.4em 0.4em 1.0em 0.4em;
	Background: linear-gradient(155deg, #004B66, var(--banner-color) 100%);	
/*	background: var(--banner-color);*/
}

.footer span:before
{
    content: "Copyright (C) Institute for Protein Research, Osaka University. All Right Reserved.";
}

@media screen and (max-width: 479px)
{
    .footer span:before
    {
	content: "Copyright (C) IPR, Osaka Univ., All Right Reserved.";
    }    
}


/* ──────────────────────────── */
/* リンク画像 */

a img
{
	border:none;
}

/* 動画関係 */
#movie {
    position: relative;
    padding-bottom: 2em;
}




.play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    content:url("./movie/play.svg");
    width: 20%;
    height: 20%;
    border: none;
}

.play:hover {
    content:url("./movie/play_hover.svg");
    width: 20%;
    height: 20%;
    border: none;
}