@charset "UTF-8";
/* CSS Document */

div#PagetitlePane { padding: 0; margin: 0; }
div#PagetitlePane h1 { display: none; padding: 0; margin: 0; }
.pcView div#PagetitlePane { height: 600px; }
.pcView div#mainBody { width: 100%; }
.pcView div#contentWrap { position:relative; }
.pcView div.ContentPane{ width: 1000px; margin: 0 auto; padding: 30px 20px; background-color: #fff; }
.spView div#PagetitlePane { display: none; }
.spView div#PagetitlePane + .ContentPane { padding: 0!important; }

/* ---------------------------------------------------------
 画像のViewPoint設定
--------------------------------------------------------- */
.pcView div.h1-wrapper { width: 1000px; max-height: 100%; position: absolute; top: 0px; left: 0; right: 0; margin: 0 auto; text-align: center; z-index: 20;}
.spView div.h1-wrapper { width: 100%; height: 420px; margin: 0 0 50px; padding: 0 14px 25px; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; }

/* ---------------------------------------------------------
 h1コンテンツの設定
--------------------------------------------------------- */
/*.spView div.h1-contents { margin: 0 auto; }*/

/* ---------------------------------------------------------
 領域アイコン
--------------------------------------------------------- */
.pcView div.h1-wrapper div.h1-contents{ position: absolute; top: 29px; left: 0; text-align: left;}

/* ---------------------------------------------------------
 領域アイコン
--------------------------------------------------------- */
div.h1-wrapper div.h1-depart { font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo, sans-serif; color: #fff; text-shadow: 1px 1px 5px rgba(0,0,0,0.2); letter-spacing: -0.5px; }

div.h1-wrapper div.h1-depart:not(:last-child) {margin-bottom: 0.5em;}

/*旧領域アイコン*/
div.h1-wrapper div.enveneIcon::before,
div.h1-wrapper div.lsbtIcon::before,
div.h1-wrapper div.ithfIcon::before,
div.h1-wrapper div.mcIcon::before,
div.h1-wrapper div.elmaIcon::before,
div.h1-wrapper div.gsjIcon::before,
div.h1-wrapper div.nmijIcon::before{ content: ''; display: inline-block; background-size: contain; }

.pcView div.h1-wrapper div.enveneIcon::before,
.pcView div.h1-wrapper div.lsbtIcon::before,
.pcView div.h1-wrapper div.ithfIcon::before,
.pcView div.h1-wrapper div.mcIcon::before,
.pcView div.h1-wrapper div.elmaIcon::before,
.pcView div.h1-wrapper div.gsjIcon::before,
.pcView div.h1-wrapper div.nmijIcon::before{ width: 22px; height: 22px; margin-right: 5px; }

div.h1-wrapper div.enveneIcon::before { background-image: url("/Portals/0/resource_images/aist_j/research/highlights/image/envene_icon.png"); vertical-align: -4px; }
div.h1-wrapper div.lsbtIcon::before { background-image: url("/Portals/0/resource_images/aist_j/research/highlights/image/lsbt_icon.png"); vertical-align: -4px; }
div.h1-wrapper div.ithfIcon::before { background-image: url("/Portals/0/resource_images/aist_j/research/highlights/image/ithf_icon.png"); vertical-align: -4px; }
div.h1-wrapper div.mcIcon::before { background-image: url("/Portals/0/resource_images/aist_j/research/highlights/image/mc_icon.png"); vertical-align: -4px; }
div.h1-wrapper div.elmaIcon::before { background-image: url("/Portals/0/resource_images/aist_j/research/highlights/image/elma_icon.png"); vertical-align: -5px; }
div.h1-wrapper div.gsjIcon::before { background-image: url("/Portals/0/resource_images/aist_j/research/highlights/image/gsj_icon.png"); vertical-align: -4px; }
div.h1-wrapper div.nmijIcon::before { background-image: url("/Portals/0/resource_images/aist_j/research/highlights/image/nmij_icon.png"); vertical-align: -4px; }

/*新領域アイコン*/
div.h1-wrapper div.enveneIcon02::before,
div.h1-wrapper div.lsbtIcon02::before,
div.h1-wrapper div.ithfIcon02::before,
div.h1-wrapper div.mcIcon02::before,
div.h1-wrapper div.elmaIcon02::before,
div.h1-wrapper div.gsjIcon02::before,
div.h1-wrapper div.nmijIcon02::before { content: ''; display: inline-block; background-size: 50px; }

.pcView div.h1-wrapper div.enveneIcon02::before,
.pcView div.h1-wrapper div.lsbtIcon02::before,
.pcView div.h1-wrapper div.ithfIcon02::before,
.pcView div.h1-wrapper div.mcIcon02::before,
.pcView div.h1-wrapper div.elmaIcon02::before,
.pcView div.h1-wrapper div.gsjIcon02::before,
.pcView div.h1-wrapper div.nmijIcon02::before { width: 50px; height: 50px; margin-right: 10px; }

div.h1-wrapper div.enveneIcon02::before { background-image: url("https://www.aist.go.jp/Portals/0/images/common/department_icon/ee_G.png"); vertical-align: -1.25em; }
div.h1-wrapper div.lsbtIcon02::before { background-image: url("https://www.aist.go.jp/Portals/0/images/common/department_icon/bt_G.png"); vertical-align: -1.25em; }
div.h1-wrapper div.ithfIcon02::before { background-image: url("https://www.aist.go.jp/Portals/0/images/common/department_icon/ih_G.png"); vertical-align: -1.25em; }
div.h1-wrapper div.mcIcon02::before { background-image: url("https://www.aist.go.jp/Portals/0/images/common/department_icon/mc_G.png"); vertical-align: -1.25em; }
div.h1-wrapper div.elmaIcon02::before { background-image: url("https://www.aist.go.jp/Portals/0/images/common/department_icon/em_G.png"); vertical-align: -1.25em; }
div.h1-wrapper div.gsjIcon02::before { background-image: url("https://www.aist.go.jp/Portals/0/images/common/department_icon/gsj_G.png"); vertical-align: -1.25em; }
div.h1-wrapper div.nmijIcon02::before { background-image: url("https://www.aist.go.jp/Portals/0/images/common/department_icon/nmij_G.png"); vertical-align: -1.25em; }
div.h1-wrapper div.gquatIcon02::before { background-image: url("https://www.aist.go.jp/Portals/0/images/common/department_icon/qa_G.png"); vertical-align: -1.25em; }

.pcView div.h1-wrapper div.h1-depart { font-size: 1.6rem!important; }
.spView div.h1-wrapper div.h1-depart { font-size: 1.2rem!important; display: inline-block; margin: 0 5px 0 0; line-height: 120%; text-align: left; }

.pcView div.h1-wrapper.en div.h1-contents div.h1-depart,
.pcView div.h1-wrapper div.h1-contents.en div.h1-depart  { font-size: 1.2rem!important; letter-spacing: 0; }
.spView div.h1-wrapper.en div.h1-contents div.h1-depart,
.spView div.h1-wrapper div.h1-contents.en div.h1-depart { font-size: 1.0rem!important; letter-spacing: 0; }
/* ---------------------------------------------------------
 タイトル・研究者名
--------------------------------------------------------- */
.pcView div.h1-wrapper div.h1-textContent { position: absolute; top: 240px; margin: 0 auto; width: 1000px; }
.spView div.h1-wrapper div.h1-textContent { margin: 0; max-width: 100%!important; }
div.h1-wrapper div.pem { padding-top: 3em; }

.pcView div.h1-wrapper.en div.h1-textContent,
.pcView div.h1-wrapper div.h1-textContent.en { top: 200px; }
/* ---------------------------------------------------------
 縦長画像配置
--------------------------------------------------------- */
.pcView #contentWrap .contents .sideImage img { max-width: 250px; }
.pcView #contentWrap .contents .sideImage::after { clear:both; }

/* ---------------------------------------------------------
モバイル設定
--------------------------------------------------------- */
.spView div#mainBody { width: 100%; }
.spView div#PagetitlePane h1 { background: none!important; text-indent:100%; white-space:nowrap; overflow:hidden; }

/* ---------------------------------------------------------
 タイトル・研究者名
--------------------------------------------------------- */
.spView div.h1-wrapper div.h1-signature { display: none; }

/* ---------------------------------------------------------
 フォント指定
--------------------------------------------------------- */
div.h1-textContent div.h1-title,
div.h1-textContent div.h1-subtitle {
	font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo, sans-serif; color: #fff; text-shadow: 1px 1px 10px rgba(0,0,0,0.5); }

div.h1-textContent div.h1-signature { font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo, sans-serif; }
div.h1-textContent div.h1-signature ul { margin: 0; padding: 0.5em 0 0; }
div.h1-textContent div.h1-signature ul:not(:first-of-type) { padding: 0; }
div.h1-textContent div.h1-signature { color: #fff; line-height: 150%; text-shadow: 1px 1px 10px rgba(0,0,0,0.50); max-width: 800px; margin: 0 auto; }
div.h1-textContent div.h1-signature  span.depart { margin: 0 5px 0 0; letter-spacing: -0.5px; line-height: 180%; }
div.h1-textContent div.h1-signature span.researcher { margin: 0 5px; }
div.h1-textContent div.h1-signature  span.depart { margin: 0 5px; letter-spacing: -0.5px; line-height: 180%; }

.pcView div.h1-textContent div.h1-title { font-size: 3.5rem!important; max-width: 1000px; line-height: 150%; margin: 0 auto; font-weight: 600; }
.pcView div.h1-textContent div.h1-subtitle { font-size: 1.75rem!important; max-width: 840px; line-height: 140%; margin: 15px auto 0; font-weight: 600; }
.pcView div.h1-textContent div.h1-subtitle::before { content:"\30FC\0020";}
.pcView div.h1-textContent div.h1-subtitle::after { content:"\0020\30FC";}

.pcView div.h1-wrapper.en div.h1-title,
.pcView div.h1-wrapper div.h1-title.en { font-size: 2.6rem!important; max-width: 1000px; line-height: 140%; margin: 0 auto; font-weight: 600; }
.pcView div.h1-wrapper.en div.h1-subtitle,
.pcView div.h1-wrapper div.h1-subtitle.en { font-size: 1.6rem!important; line-height: 130%; }

.spView .contents p.date { padding: 15px 0!important; }
.spView div.h1-textContent div.h1-title { font-size: 1.9rem!important; line-height: 140%; margin: 10px 0 5px; }
.spView div.h1-wrapper.en div.h1-title,
.spView div.h1-wrapper div.h1-title.en { font-size: 1.6rem!important; line-height: 120%; }

.spView div.h1-textContent div.h1-subtitle {display: none; }

.pcView div.h1-textContent div.h1-signature { max-width: 840px; margin: 55px auto 0;}
.pcView div.h1-textContent div.h1-signature.wide { max-width: 960px;}
.pcView div.h1-textContent div.h1-signature.narrow { max-width: 760px;}
.pcView div.h1-textContent div.h1-signature ul li { display: inline-block; margin: 0 5px 8px 0;}
.pcView div.h1-textContent div.h1-signature ul li:last-of-type { margin-right: 0;}

.pcView div.h1-textContent div.h1-signature ul li.team { margin: 0;}
.pcView div.h1-textContent div.h1-signature span.depart { font-size: 1.4rem!important; }
.pcView div.h1-textContent div.h1-signature span.depart.team { font-size: 1.45rem; }
.pcView div.h1-textContent div.h1-signature span.researcher { font-size: 2.0rem!important; }

.pcView div.h1-wrapper.en div.h1-signature span.depart,
.pcView div.h1-wrapper div.h1-signature.en span.depart { font-size: 1.2rem!important; margin-top: 5px; display: block; }
.pcView div.h1-wrapper.en div.h1-signature span.researcher,
.pcView div.h1-wrapper div.h1-signature.en span.researcher { font-size: 1.5rem!important; line-height: 145%; }

.pcView div.h1-textContent div.h1-title rt {font-size: small;}
/* ---------------------------------------------------------
 フォント指定　-英語版研究者、所属
--------------------------------------------------------- */

/* ---------------------------------------------------------
 フォント指定　-特殊文字
--------------------------------------------------------- */
div.h1-textContent span.force-text { font-family: "メイリオ", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif!important;}

/* ---------------------------------------------------------
 改行指定
--------------------------------------------------------- */
.pcView .h1-title br, .pcView .h1-subtitle br, .pcView .ResearcherEx h5 br, .pcView figcaption br { display: block; }
.spView .h1-title br, .spView .h1-subtitle br, .spView .ResearcherEx h5 br, .spView figcaption br { display: none; }

/* ---------------------------------------------------------
 研究テーマに関するお問合せ先
--------------------------------------------------------- */
.pcView div.Researcher-Wapper { width:100%; display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; align-content:stretch; margin: 20px 0 0 0; }

.pcView div.Researcher-Wapper div.ResearcherPhoto { align-content:stretch; margin: 0 7px; }
.pcView div.Researcher-Wapper div.ResearcherPhoto img { max-width: 150px; height: auto; }
.pcView div.Researcher-Wapper div.ResearcherEx { margin: 0 15px; align-content:stretch; flex-basis: 100%;}
.pcView div.Researcher-Wapper div.ResearcherEx h5 { padding-left: 0; line-height: 150%; }
.pcView div.Researcher-Wapper div.ResearcherEx div.ResearcherAddress { margin-top: 15px; }

.pcView div.Researcher-Wapper div.ResearcherEx span.OrderLU::after { content:"\FF08\5DE6\FF09";}
.pcView div.Researcher-Wapper div.ResearcherEx span.OrderRB::after { content:"\FF08\53F3\FF09";}
.pcView div.Researcher-Wapper div.ResearcherEx span.OrderCM::after { content:"\FF08\4E2D\592E\FF09";}

.spView div.Researcher-Wapper { margin: 20px 0 0; display: flex; flex-wrap: wrap; justify-content: center; }
.spView div.Researcher-Wapper div.ResearcherPhoto img { max-width: 160px; }
.spView div.Researcher-Wapper div.ResearcherPhoto { margin: 0 0 10px; flex-grow: 0; }
.spView div.Researcher-Wapper div.ResearcherEx { margin: 0 15px; flex-grow: 1; }
.spView div.Researcher-Wapper div.ResearcherEx h5 { padding: 0 0 10px 0; line-height: 130%; }
.spView div.Researcher-Wapper div.ResearcherEx span.OrderLU::after { content:"\FF08\4E0A\FF09";}
.spView div.Researcher-Wapper div.ResearcherEx span.OrderRB::after { content:"\FF08\4E0B\FF09";}
.spView div.Researcher-Wapper div.ResearcherEx span.OrderCM::after { content:"\FF08\4E2D\592E\FF09";}
.spView div.hlPhotoArea { margin-top: 15px; }

/* ---------------------------------------------------------        
 研究テーマに関するお問合せ先 -英語版-
--------------------------------------------------------- */
.pcView div.Researcher-Wapper.en div.ResearcherEx span.OrderLU::after,
.pcView div.Researcher-Wapper div.ResearcherEx.en span.OrderLU::after { content:"\0020(left)"; font-size:1.0rem!important;}
.pcView div.Researcher-Wapper.en div.ResearcherEx span.OrderRB::after,
.pcView div.Researcher-Wapper div.ResearcherEx.en span.OrderRB::after { content:"\0020(Right)"; font-size:1.0rem!important;}
.pcView div.Researcher-Wapper.en div.ResearcherEx span.OrderCM::after,
.pcView div.Researcher-Wapper div.ResearcherEx.en span.OrderCM::after { content:"\0020(Center)"; font-size:1.0rem!important;}

.spView div.Researcher-Wapper.en div.ResearcherEx span.OrderLU::after,
.spView div.Researcher-Wapper div.ResearcherEx.en span.OrderLU::after { content:"\0020(Upper)"; font-size:1.0rem!important;}
.spView div.Researcher-Wapper.en div.ResearcherEx span.OrderRB::after,
.spView div.Researcher-Wapper div.ResearcherEx.en span.OrderRB::after { content:"\0020(Lower)"; font-size:1.0rem!important;}
.spView div.Researcher-Wapper.en div.ResearcherEx span.OrderCM::after,
.spView div.Researcher-Wapper div.ResearcherEx.en span.OrderCM::after { content:"\0020(Middle)"; font-size:1.0rem!important;}

/* ---------------------------------------------------------
 ポイント、背景、新たな成果、今後の展開 
--------------------------------------------------------- */
.pcView div.hlPoint { padding: 0 10px; }
.pcView div.hlPoint p { padding: 0 5px 15px; }
.pcView div.hlPoint-Content { width: 100%; display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; align-items: stretch; margin: 20px 0; }
.pcView div.hlPoint-Content div.hlTextArea-Wapper { min-width: 460px; height: auto; margin: 0 10px; display: -webkit-flex; display: flex; align-items: flex-start; justify-content: center; }
.pcView div.hlPoint-Content div.hlTextArea-Wapper div.hlTextArea { align-content: stretch; /*width: 410px;*/ height:auto; }
.pcView div.hlPoint-Content div.hlTextArea-Wapper div.hlTextArea p { padding: 0 5px; }
.pcView div.hlPoint-Content div.hlTextArea-Wapper div.hlTextArea sub {font-size: 0.7rem; vertical-align: sub; }
.pcView div.hlPoint-Content div.hlTextArea-Wapper div.hlTextArea sup {font-size: 0.7rem; vertical-align: super;}
/*.pcView div.hlPoint-Content div.hlTextArea-Wapper.column { width: 960px; }*/ /* 1カラム */


.pcView div.hlPoint .hlCaption figure { margin: 10px 15px; max-width: 50%;}
.pcView div.hlPoint figure img { margin: 0; }
.pcView div.hlPoint.en figure img { max-width: 439px; }

div.contents h2 { position: relative; border-top: solid 1px #cf0010; border-bottom: solid 1px #cf0010; line-height: 1.4; padding: 0.5em 0.1em 0.3em 0.25em; background: none; margin-top: 22px; font-size: 1.8rem; }
div.contents h2::after { position: absolute; background: #cf0010; color: #fff; left: 0px; bottom: 100%; border-radius: 5px 5px 0 0; padding: 7px 12px 4px; font-size: 1.0rem; line-height: 1; }
div.contents:first-child h2.tab_01::after { content: '\30DD\30A4\30F3\30C8'; } /* ポイント */
div.hlPoint-Content div.hlTextArea-Wapper div.hlTextArea h2.tab_02::after { content: '\80CC\666F'; } /* 背景 */
div.hlPoint-Content div.hlTextArea-Wapper div.hlTextArea h2.tab_03::after { content: '\65B0\305F\306A\6210\679C'; } /* 新たな成果 */
div.hlPoint-Content div.hlTextArea-Wapper div.hlTextArea h2.tab_04::after { content: '\4ECA\5F8C\306E\5C55\958B'; } /* 今後の展開 */

.pcView div.contents h2 { font-size: 1.8rem; }
.pcView div.hlPoint-Content div.hlPhotoArea { margin: 0 10px; background-size: cover; background-position: center center; background-repeat: no-repeat; min-height: 307px; min-width: 460px;}
.pcView div.hlPoint-Content div.hlPhotoArea img { max-width: 460px; height: 100%; object-fit: cover;}


.pcView div.hlPoint.en h2,
.pcView div.hlPoint-Content div.hlTextArea-Wapper div.hlTextArea.en h2 { font-size: 1.4rem; }
.spView div.hlPoint.en h2,
.spView div.hlPoint-Content div.hlTextArea-Wapper div.hlTextArea.en h2 { font-size: 1.4rem;  line-height: 1.2; }

.spView div.hlPoint-Content { display: -webkit-flex; display: flex; flex-wrap: wrap; align-items: stretch; margin: 20px 0; }
.spView div.hlPoint-Content div.hlPhotoArea { margin: 0 auto; background-size: cover; background-position: center center; background-repeat: no-repeat; min-height: calc(100vw * 0.58); min-width: 100%;
}

.pcView .hlPoint-Content:nth-of-type(even) .hlTextArea-Wapper { -ms-flex-order:2; -webkit-order:2; order:2; }
.pcView .hlPoint-Content:nth-of-type(even) .hlPhotoArea { -ms-flex-order:1; -webkit-order:1; order:1; }
.pcView .hlPoint-Content:nth-of-type(odd) .hlTextArea-Wapper { -ms-flex-order:1; -webkit-order:1; order:1; }
.pcView .hlPoint-Content:nth-of-type(odd) .hlPhotoArea { -ms-flex-order:2; -webkit-order:2; order:2; }

.pcView div.hlCaption {display: -webkit-flex; display: flex; margin: 20px 0 10px;}
.spView div.hlCaption figure:nth-of-type(2) {margin: 30px 0 0;}
/* ---------------------------------------------------------
 Key point、Background、New results、Future research plans 
--------------------------------------------------------- */
div.hlPoint.en h2.tab_01::after { content: 'Key\a0point'; } /* Key point */
div.hlPoint-Content div.hlTextArea-Wapper div.hlTextArea.en h2.tab_02::after { content: 'Background'; } /* Background */
div.hlPoint-Content div.hlTextArea-Wapper div.hlTextArea.en h2.tab_03::after { content: 'New\00a0 results'; } /* New results */
div.hlPoint-Content div.hlTextArea-Wapper div.hlTextArea.en h2.tab_04::after { content: 'Future\00a0 development'; } /* Future development */

/* ---------------------------------------------------------
Full HD Display用 
--------------------------------------------------------- */
@media screen and (min-width:1921px){
	.pcView div#PagetitlePane { height: 620px!important; }
	.pcView div#PagetitlePane::before{ height: 620px!important; }
}

/* ---------------------------------------------------------
写真、キャプション
--------------------------------------------------------- */
div.hlPhotoArea .caption { font-size: 1.3rem; text-align: right; margin-top: 5px; }
figure { display: table!important; margin: 0 auto; }
figcaption { display: table-caption!important; caption-side: bottom; vertical-align:text-top; width: fit-content; font-size: 1.3rem; margin: 10px auto 0; padding: 0 0.5em;}
div.hlPoint.en figcaption, figcaption.en { font-size: .9rem; }
.hlCaption figcaption { display: block!important; }

/* ---------------------------------------------------------
研究ハイライト用見出しなど(文字列HTML版)　2025/03/03追加
--------------------------------------------------------- */
div.hlPoint{
	margin-bottom: 5em;
}

div.hlPoint p{
	margin-bottom: 1.5em;
}

.pcView div.hlPoint figure.imgItem img{
	max-width: 100%;
}

.hl_redHeading .headingName{
	display: inline-block;
	background: #cf0010;
	color: #FFFFFF;
	font-size: 1.2rem;
	position: absolute;
	left: 0;
	bottom: 100%;
	border-radius: 5px 5px 0 0;
	padding: 7px 12px 4px;
	line-height: 1;
}

.hlPoint.en .hl_redHeading .headingName{
	font-size: 1rem;
}

.hlPoint .interviewerText{
	font-weight: bold;
}

.hlPoint .interviewerText::before{
	content: '──';
	margin-right: 0.3em;

}

.hlPoint .intervieweeName{
	font-weight: bold;
	margin-right: 1em;
}

.hlPoint figure{
	margin-bottom: 5em;
}

.contents .hlPoint h2.hl_keypointHeading{
	position: static;
	display: inline-block;
	background: #cf0010;
	color: #FFFFFF;
	font-size: 1.2rem;
	left: 0;
	bottom: 100%;
	border-radius: 5px 5px 0 0;
	padding: 7px 12px 4px;
	line-height: 1;
	margin: 0
}

.hlPoint.en h2.hl_keypointHeading{
	font-size: 1rem;
}

/*--キーポイント　枠--*/
div.hlPoint .bg_keypoint{
	background: #f3f3f3;
	padding: 15px;
}
div.hlPoint .bg_keypoint p:last-of-type{
	margin-bottom: 0;
	padding-bottom: 0;
	
}