@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;}*/

/* ---------------------------------------------------------
 タイトル・研究者名等
--------------------------------------------------------- */
.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#PagetitlePane h1 { background: none!important; text-indent:100%; white-space:nowrap; overflow:hidden; }

/* ---------------------------------------------------------
 フォント等の指定（title,subtitle）
--------------------------------------------------------- */
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); }

.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; }

/* ---------------------------------------------------------
 フォント指定　-特殊文字
--------------------------------------------------------- */
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; }

/* ---------------------------------------------------------
 フォント指定　特徴文字大き目
--------------------------------------------------------- */
.kyouchou {font-size:110%;}

h3.hasamu { position: relative; border-top: solid 1px #888888; border-bottom: solid 1px #888888; border-left:none; line-height: 1.4; padding: 0.8em 0.1em 0.7em 0.25em; background: none; margin: 15px 0 10px; font-size: 1.4rem; }

h3.navy {border-left: solid 4px #115c9e; line-height: 1.4; padding: 0.3em 0.1em 0.3em 0.6em; background: none; margin-top: 22px; font-size: 1.4rem;}

/* -------------------------------------------------------------------
 事例紹介（1列）　　　
-------------------------------------------------------------------- */
.pcView div.jirei { padding: 10px 10px 25px; }
.pcView div.jirei p { padding: 0 5px 5px; }
.pcView div.jirei img { margin: 0; }

div.jirei h4 { clear: both; margin: 8px 0 4px; padding: 5px 5px; font-size: 1.4rem; line-height: 110%; border:none; color: #115c9e;}/*見出しを左に出すときは、margin-top:0;*/

p.kannrennsouchi {font-weight:600;}
p.kannrennsouchi a,
p.kannrennsouchi a hover,
p.kannrennsouchi a visited {text-decoration:none!important;}
p.kannrennsouchi a hover{opacity:0.8;}

p.gazouCaption { /*padding:10px 0!important;*/ font-size:1.4rem; font-weight:400;}
/*.pcView p.gazouCaption {display: -webkit-flex; flex; flex-direction: row; align-items: stretch; justify-content: flex-start; flex-wrap: nowrap;margin: 20px 0 10px;}
.spView p.gazouCaption figure:nth-of-type(2) {margin: 30px 0 0;}*/

div.jirei ul.koumoku { list-style:none!important; margin:0; padding:0; }
div.jirei ul.koumoku li { width:100%; display:block; padding: 0;}
div.jirei div.midashi { display:block; width:220px; }
div.jirei div.honbun { display:block; }

/*見出しを同じ行の左に配置（使用しない）*/
/*div.jirei ul.koumoku li { width:100%; display:flex; flex-direction: row; align-items: stretch; justify-content: space-between; flex-wrap: nowrap; padding: 0;}
div.jirei div.midashi { display:block; width: 150px; }
div.jirei div.honbun { display:block; width: calc(100% - 40px); margin:0;padding:0;}*/

div.jirei div.gazou { width:100%; text-align:center; margin-bottom:10px; }
div.jirei div.gazou img { padding-bottom: 20px; }

/* -------------------------------------------------------------------
 事例紹介（2列）　　　ポイントを応用 (h2をh3に変更・使用せず)
-------------------------------------------------------------------- */
.pcView div.jirei-Content { width: 100%; display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; align-items: stretch; margin: 30px 0 50px; }
.pcView div.jirei-Content div.jireiTextArea-Wapper { min-width: 460px; height: auto; margin: 0 10px; display: -webkit-flex; display: flex; align-items: flex-start; justify-content: center; }
.pcView div.jirei-Content div.jireiTextArea-Wapper div.jireiTextArea { align-content: stretch; /*width: 410px;*/ height:auto; }
.pcView div.jirei-Content div.jireiTextArea-Wapper div.jireiTextArea p { padding: 0 5px; }
.pcView div.jirei-Content div.jireiTextArea-Wapper div.jireiTextArea h3.hasamu { margin-top: 0; }
.pcView div.jirei-Content div.jireiTextArea-Wapper div.jireiTextArea sub {font-size: 0.7rem; vertical-align: sub; }
.pcView div.jirei-Content div.jireiTextArea-Wapper div.jireiTextArea sup {font-size: 0.7rem; vertical-align: super;}
/*.pcView div.jirei-Content div.jireiTextArea-Wapper.column { width: 960px; }*/ /* 1カラム */

.pcView div.jirei-Content .jireiCaption figure { margin: 10px 15px; max-width: 50%;}

.pcView div.jirei-Content div.jireiPhotoArea { margin: 0 10px; background-size: cover; background-position: center center; background-repeat: no-repeat; min-height: 307px; min-width: 460px; text-align:center;}
.pcView div.jirei-Content div.jireiPhotoArea img { max-width: 460px; /*height: 100%;*/ object-fit: cover; padding-bottom: 20px;}

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

/*---- 画像とテキスト、順に振り分け ---*/
.pcView .jirei-Content:nth-of-type(even) .jireiTextArea-Wapper { -ms-flex-order:2; -webkit-order:2; order:2; }
.pcView .jirei-Content:nth-of-type(even) .jireiPhotoArea { -ms-flex-order:1; -webkit-order:1; order:1; }
.pcView .jirei-Content:nth-of-type(odd) .jireiTextArea-Wapper { -ms-flex-order:1; -webkit-order:1; order:1; }
.pcView .jirei-Content:nth-of-type(odd) .jireiPhotoArea { -ms-flex-order:2; -webkit-order:2; order:2; }

/* -------------------------------------------------------------------
 2列振り分け　
-------------------------------------------------------------------- */
div.furiwake { width: 100%; display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; justify-content: flex-start; align-items: stretch; /*margin: 30px 0 50px;*/ }
div.furiwakeBox_l { display:block; width: 50%; padding-right:15px; }
div.furiwakeBox_r { display:block; width: 50%; padding-left:15px; }
.spView div.furiwake { display:block; }
.spView div.furiwakeBox_l { width: 100%; padding: 0; }
.spView div.furiwakeBox_r { width: 100%; padding: 0; }

/* -------------------------------------------------------------------
 装置紹介（1列）　　　
-------------------------------------------------------------------- */
.pcView div.souchi { padding: 10px 10px 25px; }
.pcView div.souchi p { padding: 0 5px 5px; }
.pcView div.souchi img { margin: 0; }

div.souchi .title { margin-bottom: 10px;
  color: #111111;
  font-weight: bold;
  line-height: 1.5;
  font-size: 1.6rem;
}
div.souchi ul.koumoku { list-style:none!important; margin:0; padding:0; }
div.souchi ul.koumoku li { padding: 5px 0 25px; }
.pcView div.souchi ul.koumoku li { width:100%; display:flex; flex-direction: row; align-items: stretch; justify-content: flex-start; flex-wrap: nowrap; }
.spView div.souchi ul.koumoku li { width:100% display:block; }

div.souchi div.honbun { display:block; width: calc(100% - 300px); }
div.souchi div.gazou { display:block; width: 300px; }
div.souchi div.gazou ::after { clear:both; }

.spView div.souchi div.honbun { display:block; width: 100%; margin: 0; padding: 0; }
.spView div.souchi div.gazou { display:block; width:100%; margin-bottom: 20px; text-align:center; }

/* -------------------------------------------------------------------
 装置紹介（3列）　　　デフォルトの3列を改造
-------------------------------------------------------------------- */
.souchiList {
  margin: 0 0 5px!important;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.souchiList > li {
  list-style: none;
  margin-bottom: 5px;
  background-color: none;
  width: 310px;
}
.souchiList li .photoBox img {
  max-height: 310px;
  object-fit: contain;
}
.souchiList li .photoBox {
  text-align:center;
  vertical-align: top;
}

.souchiList li .textBox {
  padding: 20px;
  border: none !important;
}
.souchiList li .textBox .title {
  margin-bottom: 10px;
  color: #111111;
  font-weight: bold;
  line-height: 1.5;
  font-size: 1.6rem;
}
.souchiList li .textBox .title a {
  color:#111;
  text-decoration: none;
}
.souchiList li .textBox .title a:hover {
  opacity: 0.7;
}
.souchiList li .textBox p {
  padding: 0;
}
.souchiList li .textBox .txt {
  margin-bottom: 20px;
  color: #6a6a6a;
  line-height: normal;
}
.souchiList li .textBox .txtList ul li {
  font-size: 1.2rem!important;
  padding: 0;
}
.souchiList li .textBox .txtList ul li::after {
  display: none;
  padding: 0;
}

.souchiList li:not(:last-of-type) {
  margin-bottom: 8px;
}
.spView .souchiList {
  display: inline-table;
  width: 100%;
  margin: 0 0 20px !important;
  padding: 0.5em 0 1em 0;
}
.spView .souchiList li > li {
  width:100%;
  margin-bottom: 10px;
}
.spView .souchiList li .textBox {
  margin: 0!important;
  padding: 10px!important;
}

/*------------------------------------------------------------
関連リンク	comLinkListをリンクに応用
------------------------------------------------------------*/
.pfLinkList {
  margin: 10px 10px 30px ;
  padding: 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.pfLinkList::after {
  width: 296px;
  content: "";
}
.pfLinkList li {
  margin: 0;
  padding: 0;
  position: relative;
  margin-top: 40px;
  width: 296px;
  background-color:#eeeeee;
  list-style: none;
}

.pfLinkList li .pho {
  width: 296px;
  height: 98px;
}
.pfLinkList li .pho a {
  width: 296px
  height: 98px;
}
.pfLinkList li .pho img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pfLinkList li p {
  list-style: none;
  margin-top:7px;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  text-decoration: none!important;
  padding: 8px 7px!important;
}
.pfLinkList li a {
  display: block;
  color: #333333 !important;
}
.pfLinkList li a:hover {
  opacity: 0.8;
}
.pfLinkList li p a:link,
.pfLinkList li p a:visited,
.pfLinkList li p a:active {
  text-decoration: none!important;
}
.pfLinkList li p a:hover {
  text-decoration: underline;
}

/* ---------------------------------------------------------
動画2列用　3列はデフォルトのvideoBoxlistを使用
--------------------------------------------------------- */
/*   video_style.css　より      */
.videoBoxList2c {  width: 100%;  display: block;  text-align: center;}
.videoBoxList2c li {  height: auto;}
/*   contents.css　より      */
.videoBoxList2c { margin: 0; padding: 0;}
.videoBoxList2c li { display: inline-block; width: 430px;height: 300px; list-style: none; margin: 0 5px 10px 15px;padding: 5px; vertical-align: top; }
.videoBoxList2c li .text {width: 100%; text-align:center;padding: 5px 0 5px 0;}
/*　　3列の変更点　　　*/
.videoBoxList li { margin: 0!important;}

.videoBoxList2c li .youtube-container { width:100% }

.spView .videoBoxList2c li { display:block; width:100%!important; height: auto; margin: 0 5px 10px 7px; padding:5px; }
.spView .videoBoxList2c li .text { width:100% }

/* ---------------------------------------------------------
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; }

/* ---------------------------------------------------------
装置紹介（四国センター）使用しない
--------------------------------------------------------- */
.col {
	width: 100%;
}
.row:before, .row:after {
	content: "";
	display: table;
}
.row:after {
	clear: both;
}
.g-ivent ul, .g2-ivent ul, .ivent ul {
	margin: 0 0 20px 20px;
}
.g-ivent ul li, .g2-ivent ul li, .ivent ul li {
	padding: 5px 5px 5px;
	text-align: left;
	font-size: 14px;
}
.g2-ivent {
	color: #2F322A;
	padding: 20px 20px 20px 20px;
}
.g2-ivent p {
	text-align: justify; /* 両端揃え */
  	text-justify: inter-ideograph; /* 両端揃えの種類 */
	margin-bottom: 0;
}
/*Tablet View*/
@media screen and (min-width: 768px) {
	.col-md-one-half {
		width: 50%;
	}	
	.col {
		float: left;
		padding: 0px 7px 14px 7px;
	}
}