@charset "utf-8";

/*
■ カスタムブロックテンプレート用
（リンクなど、一部 Style_parts と共有のものはそちらに記載。
----------------------------------------
■ リンクボタン（黒、白ベベル）
■ レイアウトBOX
■ 罫線（水平線）
■ 余白
■ Table
■ URL 画像入力
■ 画像回り込み（URL画像入力を内包）
■ QA


======================================== */

img {
width:auto;
max-width:100%;}



/* 黒 ------------------------------ */

p.cb_linkBtn-bk {
 margin-block:1em;
 text-align: center;
}

p.cb_linkBtn-bk,
p.cb_linkBtn-bevel {
 
}

p.cb_linkBtn-bk a,
p.cb_linkBtn-bevel a{ 
 display: inline-block;
 text-decoration: none;
 align-content: center;
 word-break: break-all;
 line-height:1.1;
 margin:0 auto 0 auto;
 padding-inline:1em;
}

/*上記以外の a のスタイルは .el_linkBtn-bk に記載 */


/* 白ベベル ------------------------------ */


p.cb_linkBtn-bevel {
 margin-block:1em;
 display: inline-block;
}

.cb_linkBtn-bevel:not(:last-child){
 margin-right:1em; 
}

p.cb_linkBtn-bevel.el_pageTopLinkBox {
 display: block;
 position: absolute;
 top:1em;
}

p:not(.cb_linkBtn-bevel) + p.cb_linkBtn-bevel {
 margin-top:-1.5em;
}


/* 画面サイズ 768px 以上に対応
--------------------------------------------------------------- */
@media (min-width: 768px) {
 p.cb_linkBtn-bevel.el_pageTopLinkBox{
  right:8%;

 }
}

/* 画面サイズ 1700px 以上に対応
--------------------------------------------------------------- */
@media (min-width: 1700px) {
 p.cb_linkBtn-bevel.el_pageTopLinkBox{
  right:-1em;

 }
}




/*/////////////////////////////////////////////////////////////
■ レイアウトBOX
/////////////////////////////////////////////////////////////*/

/* インデントBOX
---------------------------------*/
.cb_indentBl {
 margin-left:1em;
 margin-bottom:2.4em;
}

.cb_indentBl > *:last-child {
 margin-bottom:0 !important;
}

:is(h2,h3,h4,h5,h6) + .cb_indentBl {
 margin-top:-1em;
}


/* センターBOX
---------------------------------*/
.cb_centerBlock {
  text-align:center;
}
.cb_centerBlock > * {
margin-inline:auto;
}
.cb_centerBlock figure {
margin-inline:auto;
}

/* 枠･背景BOX
-------------------------------------------------*/
.cb_borderBox {
  margin-block:1rem;
  padding:2.4em;
  border:0 solid #ccc;

}
.cb_borderBox > *:first-child {
 margin-top:0 !important;
}

.cb_borderBox > *:last-child {
 margin-bottom:0 !important;}




.cb_borderBox.Pale_Gray {border-color:#ccc;}
.cb_borderBox.Gray {border-color:#aaa;}
.cb_borderBox.Black {border-color:#000;}

.cb_borderBox.bg_Pale_Gray {background-color:#f5f5f5;}
.cb_borderBox.bg_Gray {background-color:#aaa;}
.cb_borderBox.bg_Black {background-color:#000;}

.mt-be-column > .cb_borderBox {
 height:100%;
}



/*/////////////////////////////////////////////////////////////
■ 罫線（水平線）
/////////////////////////////////////////////////////////////*/

[class*="cb_hrLine"] {
 height:1px;
 color:transparent;
 border:0;
 border-width:1px 0 0 0;
 margin-block:0.5em;
}

[class*="cb_hrLine-Solid"]{
 border-style: solid;
}
[class*="cb_hrLine-Dotted"] {
 border-style: dotted;
}
[class*="cb_hrLine-Dashed"] {
 border-style: dashed;
}
[class*="cb_hrLine-Double"]{
 border-style:double;
 border-top-width:4px;
}

[class*="cb_hrLine"][class*="Black"] {
 border-color: #000;
}
[class*="cb_hrLine"][class*="Gray"] {
 border-color: #aaa;
}
[class*="cb_hrLine"][class*="Pale_Gray"] {
 border-color: #ddd;
}

/*/////////////////////////////////////////////////////////////
■ 余白
/////////////////////////////////////////////////////////////*/

hr[class^="space_"] {
height:0;
border:0;
color:transparent;
}
hr.space_S {
padding-top:2rem;}
hr.space_M {
padding-top:3rem;}
hr.space_L {
padding-top:4.5rem;}
hr.space_XL {
padding-top:6rem;}



/*/////////////////////////////////////////////////////////////
■ Table
/////////////////////////////////////////////////////////////*/

[class*="cb_tb-"]{
  width:100%;
 border:none;
 overflow:auto;
 margin-bottom:5px;/*スクロールバー用*/
 /*table-layout: fixed;/*em値での幅の指定が効くようにする*/
}


.mt-be-column > [class*="cb_tb-"] ,
.mt-be-column > .cb_tableWrap {
 margin-block:0;
}

[class*="cb_tb-"] col {
 min-width:5em;
}
 
 [class*="cb_tb-"] :is(th,td){
  min-width:5em;
 }

[class*="cb_tb-"] :is(th, td) > p {
 margin-block:1em;
}


/* グレー見出し
--------------------------------------------*/
.cb_tb-thGray {
 border-top:1px solid #ddd;
}

.cb_tb-thGray :is(th,td) {
 border:0px solid #ddd;
 border-bottom-width: 1px;
 padding:0.8em 1em;
}

.cb_tb-thGray tr:not(:has th) > td:first-child {
 padding-left:0;
}

.cb_tb-thGray tr:last-child {
 padding-right:0.2em;
}

.cb_tb-thGray th {
 background: #eee;
 font-weight: 500;

}

.st_bdVt .cb_tb-thGray :is(th,td){
 border-right-width:1px;
}


.cb_tb-thGray tr > *:last-child {
 border-right:none;
}


.cb_tableOuter {
 
}
.cb_tableWrap {
  margin-bottom:2.4em;
  overflow-x: auto;
 position: relative;
 /* テーブルの幅が100%を超えるとスクロールバーが出る */
}




/* 下線テーブル
--------------------------------------------*/
.cb_tb-btDot tr {
 border-bottom:1px dotted #000; 
}

.cb_tb-btDot :is(th,td) {
 border:none;
 /*padding:0.8em 1em;*/
 padding:1em 2em 0.8em 0;
}
.cb_tb-btDot table {
 border:none;
}

.cb_tb-btDot td:last-child {
 padding-right:0.2em;
}

/* 画面サイズ 767px 以下 (スマホ)
--------------------------------------------------------------- */
@media (max-width: 767px) {
[class*="cb_tb-"] {
 min-width:99.6%;
  font-size:calc(15em / 16);
 }

 .tpl_202 [class*="cb_tb-"]{
  font-size:1em;
 }
 

   /* 横スクロール用 */
 .cb_tableOuter .cb_tableWrap {
  margin-top:3.2em;
 } 
 
 
 .cb_tableOuter.is-scrollable {
  padding-bottom:0.5em;
  position: relative;
 }
 .cb_tableOuter.is-scrollable::before,
 .cb_tableOuter.is-scrollable::after,
 .bl_subNav::before,
 .bl_subNav::after{
   content:"";
  position:absolute;
  top:-0.6em;
  right:0;
    border-radius:999px;
    height:3px;
  z-index:-1;
 }
  .bl_subNav::before,
 .bl_subNav::after{
 top:-0.3em;
 }
 
 
 
 .cb_tableOuter.is-scrollable::before,
 .bl_subNav::before {
  width:8em;
  background:#eee;
 }
 
 .cb_tableOuter.is-scrollable::after,
 .bl_subNav::after{
  width:3em;
  background:#aaa;
 }
  
 
}





/* スマホ縦積み用に強制表示 -----------------*/

@media (max-width: 767px) {

col {
    width: unset !important;
}
 
 
 table.st_spBlock {
  width:100% !important;
  height: unset !important;
 }
 .st_spBlock col {
    width: unset !important;
}
 
 .st_spBlock :is(th,td) {
  display:block;
  height: unset !important;
  width: 100% !important;
  text-align: left !important;
 }
 .st_spBlock :is(th,td):first-child {
  /*padding-left:0.8em !important;*/
 }
 .st_spBlock td{
  padding-block:1em;
  border:0;
 }
 
 .st_spBlock td + td {
  padding-top:0;
 }
 
 .cb_tb-thGray.st_spBlock tr {
  border-bottom:1px solid #ddd;
 }
 .cb_tb-thGray.st_spBlock th {
  padding-left:0.8em;
 }
 
 
 }



/*/////////////////////////////////////////////////////////////
■ URL 画像入力
/////////////////////////////////////////////////////////////*/
.cb_imgURL,
.cb_imgURL_bd {
	text-align:center;
	margin-inline:auto;
	margin-bottom:10px;
}
figure.cb_imgURL_bd {
display:inline-block;
}

.cb_imgURL_bd {
border:1px solid #ccc;
padding:6px;
}

figcaption {
font-size:smaller;
margin:0;
text-align:center;
position:relative;
top:4px;
}

.cb_imgBd {
border:1px solid #ccc;
padding:6px;
}

.ly_editArea figure {
 margin-bottom:2.4em;
}
.ly_editArea figure + figure {
 margin-top:4em;
}


/*/////////////////////////////////////////////////////////////
■ 画像回り込み
/////////////////////////////////////////////////////////////*/

.cb_floatBlock {
display:block;
margin-bottom:2rem;
}
.cb_floatBlock > *:last-child {
margin-bottom:0;
}

.cb_floatBlock.float_right figure {
 float:right;
margin:0 0 1rem 2%;

}

.cb_floatBlock.float_left figure {
 float:left;
margin:0 2% 1rem 0;
}

.cb_floatBlock::after {
content:"";
clear:both;
display:block;
}

/*スマホ*/
@media (max-width: 767px) {

 .cb_floatBlock.float_right figure,
 .cb_floatBlock.float_left figure {
 width:46%;
}
.cb_floatBlock.float_right img,
.cb_floatBlock.float_left img {
 width:100%;
}

}


/*/////////////////////////////////////////////////////////////
■ Q A
/////////////////////////////////////////////////////////////*/
details.cb_qa{
 border-top:1px dotted #000;
}
details.cb_qa:last-of-type {
 border-bottom:1px dotted #000;
 margin-bottom:4em;
}

summary.cb_qa_q {
 position: relative;
 list-style-type:none;
 font-weight: 600;
 padding:1.5em 3em 1.5em 0;
 cursor: pointer;
}
.cb_qa_q::-webkit-details-marker {
  display: none;/*Safariで表示されるデフォルトの三角形アイコンを消す*/
}
.cb_qa_q::before {
 /* content:"Q";
 position: absolute;
 left:0;*/
}
.cb_qa_q::after {
 content:"";
 position: absolute;
 display:inline-block;
 width:10px;
 height:7px;
 right:1em;
 background:url("https://www.chikyu.ac.jp/rihn/files/theme/ico_chevron-down.svg") no-repeat center;
 transform: rotate(0);
 transition: transform 0.2s;
 }

.cb_qa_a {
 position: relative;
 padding:0.5em 3em 2em 2.5em;
  
}
/*
.cb_qa_a > *:first-child {
 margin-top:0;
}
*/
.cb_qa_a > *:last-child {
 margin-bottom:0;
}

.cb_qa_a::before {
 /*
 content:"A";
 position: absolute;
 left:0;
 font-weight: 600; */
}


.cb_qa_qLabel {
 padding-right:1.5em;
}
.cb_qa_aLabel {
 font-weight: 600;
 position: absolute;
 left:0;
 margin-top:0.1em;
}

div.cb_qa_a .cb_qa_aLabel + * {
 margin-top:0;
}

/* 開閉アニメーション */

details.cb_qa {
  /* --------アコーディオンの中身のスタイル-------- */
  &::details-content {
    transition:
      height 0.4s,
      opacity 0.4s,
      content-visibility 0.4s allow-discrete;
    height: 0;
    opacity: 0;
    overflow: clip;
  }

  /* --------アコーディオンの中身のスタイル（開いている時）-------- */
  &[open]::details-content {
    opacity: 1;
  }

  /* アコーディオンが開いた時のスタイル */
  &[open] .cb_qa_q::after {
  transform: rotate(180deg);
  }
}

@supports (interpolate-size: allow-keywords) {
  :root {
    interpolate-size: allow-keywords; /* height:0（数値型） → auto（文字型） のアニメーションを可能にするための指定 */
  }
  .cb_qa[open]::details-content {
    height: auto;
  }
}

/* height:0→autoへのアニメーションが対応していない場合は、固定値にアニメーションさせる */
@supports not (interpolate-size: allow-keywords) {
  .cb_qa[open]::details-content {
    height: 150px;
    overflow-y: scroll;
  }
}




/*/////////////////////////////////////////////////////////////
■ LAYOUT
/////////////////////////////////////////////////////////////*/



/* 画面サイズ 768px 以上に対応
--------------------------------------------------------------- */
@media (min-width: 768px) {
}

/* 画面サイズ 2000px 以上に対応
-------------------------------------------------------------- */
@media (min-width: 2000px) {
}



/*/////////
■ LAYOUT
/////////////////////////////////////////////////////////////*/


/* ここから旧スタイル 見直し要 */

/* デフォルト　カラムスタイルの修正*/
.mt-be-columns {
	gap:1.4rem 3%; }
.mt-be-column {
	flex: 1 1 0;
min-width:0;}

/* デフォルト　カラムスタイルの修正1 固定幅、スマホ並び選択*/
/* display:flex;の指定は、タグに直書き。MTエディタ対応のため*/
.mt-be-columns.cb_flexFixedBox .mt-be-column {
}

/* デフォルト　カラムスタイルの修正2　幅非固定*/
.mt-be-columns.cb_flexNoWidth .mt-be-column {
	flex: auto;}

/*マルチカラムに画像が入ったら（小さい画像でも）幅いっぱいに広がる*/
 .mt-be-column > figure,
 .mt-be-column > figure > img {
  width:100%;
 }



/*スマホ*/
@media (max-width: 759px) {
.mt-be-columns {
	flex-direction:column;}
 
 /*スマホで横並びさせる*/
.mt-be-columns.cb_spStack_row,
.cb_col2_ASY.cb_spStack_row {
	flex-direction:row;}
 
 .mt-be-columns img {
  width:100%;
 }
  
 
}


/*2カラム非対称
-------------------------------------------------*/
  .cb_col2_ASY {
    display: flex;
	gap:2rem 4%;
  }

/*スマホ*/
@media (max-width: 759px) {
  .cb_col2_ASY {
  flex-direction:column;
	}
  .cb_col2_ASY.leftPane,
  .cb_col2_ASY.rightPane {
  width:100%;
	margin-bottom:1rem;
	}  
}

/*pc*/
@media (min-width: 768px) {
  .cb_col2_ASY {
  }
  .cb_col2_ASY.left70 .leftPane {
    flex:0 0 66%;
  }
  .cb_col2_ASY.left30 .leftPane {
    flex:0 0 30%;
  }
}


/*左詰めカラム
-------------------------------------------------*/

.cb_col_alignL > * {
  display: inline-block;
 margin-right: 1em;
}


/*研究一覧の上に止まるBOX
-------------------------------------------------*/
.cb_stickyBox {
 position: relative;
   background: #fff;
   z-index: 10;
 padding-bottom:4em;
}
 
 
.cb_stickyBox .cb_stickyBox_ttl {
 position: sticky !important;
 top:0;
 color:#fff;

font-family: var(--gothic);
 font-size: 1.2em;
 padding-left:0.3em;
 border-top:2px solid #000;
 margin-bottom:1em;

}
.cb_stickyBox .cb_stickyBox_ttl::before {
 content:"";
 width:7em;
 background:#000;
 position: absolute;
 height:2em;
 z-index:-1;
 left:0;
}

.cb_stickyBox .cb_stickyBox_ttl::after {
 display: none;
}

.cb_stickyBox_body a {
 font-size:1.2em;
 font-weight: bold;
}

.cb_stickyBox_body td {
 padding:1.5em 0;
}

.cb_stickyBox_body td p {
 margin:0;
}


/* 画面サイズ 768px 以上に対応
--------------------------------------------------------------- */
@media (min-width: 768px) {
.cb_stickyBox_body{
  padding-left:10em;
 }
 
}