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

/* ---------------------------------------------------------
カバーイメージサイズ
--------------------------------------------------------- */
.pcView div#PagetitlePane { height: 375px; }
.spView div#PagetitlePane { height: 250px; }

/* ---------------------------------------------------------
PC設定
--------------------------------------------------------- */
.pcView div#mainBody { width: 100%; }
.pcView div#contentWrap { position:relative; }
.pcView div#PagetitlePane h1 { background: none!important; text-indent:100%; white-space:nowrap; overflow:hidden; }
.pcView div.ContentPane{ width: 1000px; margin: 0 auto; padding: 30px 20px; background-color: #fff; }

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

/* ---------------------------------------------------------
 ページタイトル
--------------------------------------------------------- */
div.contents div.bluebacksTitle,
div.contents div.bluebacksSubtitle,
div.contents div.notes div.date,
div.contents div.notes div.author { font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; }

div.contents div.bluebacksTitle { color: #0076BE; }
div.contents div.bluebacksSubtitle { font-weight: 500; }
div.contents div.notes span { padding: 0 5px; }

.pcView div.contents div.bluebacksTitle {  font-weight: 600; font-size: 270%;  line-height: 150%; padding-bottom: 8px; text-align: center; }
.pcView div.contents div.bluebacksSubtitle { font-size: 193%; line-height: 150%; padding-bottom: 20px; text-align: center; }

.spView div.contents div.bluebacksTitle {  font-weight: 500; font-size: 231%; line-height: 140%; padding-bottom: 10px; }
.spView div.contents div.bluebacksSubtitle { font-size: 154%; line-height: 140%; padding-bottom: 13px; }

.pcView div.contents div.date { font-size: 116%; color: #666; margin-bottom: 18px; }
.pcView div.contents div.author { font-size: 116%; text-align: right; padding-bottom: 30px;}

.spView div.contents div.date { font-size: 108%; margin-bottom: 7px; }
.spView div.contents div.author { font-size: 108%; text-align: right; }

/*.spView div.contents h2 { font-size: 108%; margin-bottom: 7px; }*/

/* ---------------------------------------------------------
 イントロ背景
--------------------------------------------------------- */
div.contents div.bluebacksIntro {background:#F5F5F5; padding:1.2em;}


/* ---------------------------------------------------------
 強調文字
--------------------------------------------------------- */
.pcView div.contents .bluebacksCenterText { font-size: 154%; line-height: 130%; text-align: center; }
.spView div.contents .bluebacksCenterText { font-size: 124%; line-height: 120%; }

div.contents .bluebacksIntroText { color: #cf0010; }
.pcView div.contents .bluebacksIntroText { font-size: 154%; line-height: 130%; padding: 10px 0 15px;}
.spView div.contents .bluebacksIntroText { font-size: 124%; line-height: 120%; }

.pcView div.contents div.indent-4 { padding-left: 4.2em; text-indent: -4.2em; padding-bottom: 0.5em;}
.spView div.contents div.indent-4 { padding: 5px 3px;}
div.contents .radius-20 { color: #fff; font-weight:bold; padding: 5px 5px 3px 5px; border-radius: 20px; background-color: #cf0010; margin-right: 10px;}


/* ---------------------------------------------------------
 横向きの場合のスタイル
--------------------------------------------------------- */
@media screen and (orientation: landscape) {
	.spView div.contents div.bluebacksTitle,
	.spView div.contents div.bluebacksSubtitle { text-align: center; }
}
/* ---------------------------------------------------------
 縦向きの場合のスタイル
--------------------------------------------------------- */
@media screen and (orientation: portrait) {
	.spView div.contents div.bluebacksTitle,
	.spView div.contents div.bluebacksSubtitle { text-align: left; }
}
/* ---------------------------------------------------------
 改行指定
--------------------------------------------------------- */
.pcView span.pc-br::before { content: "\A" ; white-space: pre; }

/* ---------------------------------------------------------
 イメージのコピーライト
--------------------------------------------------------- */
div.h1-copyright { color: #FFFFFF; background-color: rgba(0,0,0,0.5); font-size: 80%; padding: 3px 5px; }
.pcView div.h1-copyright { position: absolute; top: 353px; right: 0; margin: 0 auto; }
.spView div.h1-copyright { position: absolute; top: 228px; right: 0; margin: 0 auto; }

/* ---------------------------------------------------------
 本文中のイメージ、キャプション
--------------------------------------------------------- */
div.contentsCenter { text-align: center; }
.pcView div.contentsImg { position: relative; }
.pcView div.contentsImg img { max-width: 600px; height: auto; }
.pcView div.contentsImg div { width: 590px; position: absolute; bottom: 0; left: 50%; color: #FFFFFF; background-color: rgba(0,0,0,0.5); padding: 5px 5px 3px; transform: translateX(-50%); -webkit- transform: translateX(-50%); font-size: 97%; }
.spView div.contentsImg img { width: 92vw; height: auto; }
.spView div.contentsImg div { width: 92vw; padding: 5px 0; }
.pcView div.contentsImg .w400 { width: 390px!important; }
.pcView div.contentsImg .w500 { width: 490px!important; }
.pcView div.contentsImg div.credit {text-align: right; }
.spView div.contentsImg div.credit {text-align: right; }

.pcView span.pc-cap-br::before { content: "\A" ; white-space: pre; }
.spView span.sp-cap-br::before { content: "\A" ; white-space: pre; }

.pcView div.cap-m-01 {margin-bottom: 28px;}
.pcView div.cap-m-02 {margin-bottom: 48px;}
.pcView div.cap-m-03 {margin-bottom: 68px;}
.pcView div.contentsImg div.caption-01 {bottom: -28px;}
.pcView div.contentsImg div.caption-02 {bottom: -48px}
.pcView div.contentsImg div.caption-03 {bottom: -68px}


/* ---------------------------------------------------------
 研究者のプロフィール
--------------------------------------------------------- */
.pcView td.imgProf img { max-width: 300px; }
.spView td.imgProf { text-align: center; }
.spView td.imgProf img { width: 200px; }
.spView img.imgRight {float: none!important; margin: 10px 0 0!important;}
/* ---------------------------------------------------------
 モバイルモーダルウィンドウ非表示
--------------------------------------------------------- */
.spView div.contentsCenter div.contentsImg a.spModal {pointer-events: none; cursor: default;}

/* ---------------------------------------------------------
 画像の横並び
--------------------------------------------------------- */
.pcView .imgpr10  {padding-right: 10px;}
.pcView .imgpl10  {padding-left: 10px;}