@charset "utf-8";

/*
■ MARK
■ LINK BUTTON
■ PAGE HEADER
■ パンくずリスト
----------------------------------------
■ 
----------------------------------------
■ EXTRA CLASS	
======================================== */


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

[class*="ly_colWrap"]{
  display: grid;
  margin-bottom:3em;
 grid-template-columns: 1fr;

}


[class*="ly_colWrap"].bl_zoomHover {
 row-gap:2em; 
}


/*colWrap のバリエーション（分割数）*/
.ly_colWrap-col3 {
 gap:0 3%;/* 上下のギャップは内包するパーツにより異なるので設定しない */
 /*grid-template-columns: repeat(auto-fit, minmax(266px, 1fr)); 
 grid-template-columns: repeat(3, 1fr); */
 /* 266px は横4列にしないための内包BOXの最小値*/
}




/* 画面サイズ 768px 以上(PC用)
--------------------------------------------------------------- */
@media (min-width: 768px) { 


.ly_colWrap-col2 {
 gap:1em 5%;
 grid-template-columns: repeat(2, 1fr); 

}
.ly_colWrap-col4 {
  grid-template-columns: repeat(4, 1fr);
}
 
.ly_colWrap-col5 {
  grid-template-columns: repeat(5, 1fr);
}

}


/* ///////////////////////////////////
かなsortテーブル 
///////////////////////////////////*/

.bl_staffList_link {
 /*display: grid;
 grid-template-columns: auto 1fr;*/
 
}
.bl_staffList_link .el_linkBtn-bevel {

}

.ly_flexSb {
 display: flex;
 justify-content: space-between;
}


.ly_flexSb.bl_staffList_note {
flex-wrap: wrap;
}
.ly_flexSb.bl_staffList_note p {
 margin-top:0;
}

.el_btn-round {
 border:1px solid #000;
 height:2em;
 background: #fff;
 border-radius:1em;
}

/*----*/

.bl_staffList_note {
 margin-bottom:2.4em;
}

.bl_kanaSort span,
.bl_kanaSort button,
.bl_abcSort button{ 
 display: grid;
 background:#fff;
 border-color:#ccc;
 border-style:solid;
 /*border-width:1px 1px 0 0;*/
  border-width:0 1px 1px 0;
 text-align: center;
 align-items: center;
 cursor: pointer;
}
/*
.bl_kanaSort_row,
.bl_kanaSort_col:last-child{
 border-bottom:1px solid #ccc;
}
.bl_kanaSort_row:last-child,
.bl_kanaSort_col {
 border-left:1px solid #ccc;
}
*/

.bl_kanaSort_row,
.bl_kanaSort_col:first-child,
.bl_abcSort_col {
 border-top:1px solid #ccc;
}

.bl_kanaSort_row:last-child,
.bl_kanaSort_col {
 border-left:1px solid #ccc;
}



.bl_kanaSort,
.bl_abcSort {
 display:grid;
 margin-block:0.5em 6em;}


@media (any-hover:hover){
 .bl_kanaSort button:hover,
 .bl_abcSort button:hover,
 .st_StaffList .el_btn-round:hover{
  background:#eee;
  color:#000;
 }
 
}

.bl_kanaSort span.is_active,
 .bl_kanaSort button.is_active,
.bl_abcSort button.is_active,
 .st_StaffList .el_btn-round.is_active {
  background: #000;
  color: #fff;
  border-color:#000;
 }
 

.bl_abcSort_col {
 border-bottom-width:1px;
}


/* 画面サイズ 767px 以下(SP用)
--------------------------------------------------------------- */
@media (max-width: 767px) {
 
 .bl_kanaSort.st_pc {
  display: none;
 }
 
 .bl_kanaSort.st_sp {
   grid-template-rows:3.5em 3.5em;
 }
.bl_kanaSort_col {
 display: grid;
 grid-template-columns:repeat(5, 1fr);
}
 
 .bl_abcSort_col{
display: grid;
 grid-template-columns:repeat(6, 1fr);
  grid-template-rows:repeat(5, 3.5em);
}


 .bl_abcSort_col button:nth-child(6n +1) {
 border-left:1px solid #ccc;
}
 
  
}



/* 画面サイズ 768px 以上(PC用)
--------------------------------------------------------------- */
@media (min-width: 768px) {
 
  .bl_kanaSort.st_sp {
  display: none;
 }
 
 .bl_kanaSort.st_pc {
  grid-template-columns: repeat(10, 1fr);
  direction: rtl ;  
 }
 
.bl_kanaSort_row{
 display: grid;
 grid-template-rows:repeat(5, 3em);
 } 
 
 .bl_abcSort_col{
display: grid;
 grid-template-columns:repeat(10, 1fr);
    grid-template-rows:repeat(3, 3em);
}
 
 .bl_abcSort_col button:nth-child(10n +1) {
 border-left:1px solid #ccc;
}
 
}
 








/* Zoom Hover ------------------------*/


 {
 
}

a.bl_zoomHover_item::after {
 content:none;
}



.bl_zoomHover_item {
 display: block;
 position: relative;
 overflow:hidden;
 container-type:inline-size;
}
.bl_zoomHover_imgArea {
 overflow: hidden;
 width:100%;
 height:100%;
}

.bl_zoomHover_imgArea img {
 width:100%;
 height:100%;
 display: block;
 transition: transform 0.4s ease;
 object-fit: cover;
}

.bl_zoomHover_item:hover .bl_zoomHover_imgArea img {
 transform: scale(1.1);
 opacity: 1;
}

.bl_zoomHover_txtArea {
  position:absolute;
 inset:0;
 display: flex;
 flex-direction: column;
 align-items: center;
  justify-content: center;
 color:#fff;
 font-weight:bolder;
 font-size:5.4cqw;
 padding:0.5em 1em;
 text-align: center;
}


.bl_zoomHover_subTxt {
 font-size:3.8cqw;
 line-height: 1.5;
 margin-top:0.6em;
}



.bl_zoomHover_item.st_dark {
 background:#000; 
}
.bl_zoomHover_item.st_dark img {
 opacity:0.5;
}

.bl_zoomHover_item.st_dark:hover img {
  transition: transform 0.4s ease;
  opacity:0.7;

}


.bl_zoomHover.st_bd .bl_zoomHover_item {
 border:1px solid #ccc;
}




/* バナー画像の比率  ------------------------*/


.bl_zoomHover.st_ban01 .bl_zoomHover_item {
 aspect-ratio:335 / 139;
}

/* HOME下の外部リンクバナー */
.bl_zoomHover.st_ban02 .bl_zoomHover_item {
 aspect-ratio:417 / 160;
}

.bl_zoomHover.st_ban03 .bl_zoomHover_item {
 aspect-ratio:531 / 137;
}





/* 画面サイズ 768px 以上(PC用)
--------------------------------------------------------------- */
@media (min-width: 768px) {
  
 .bl_zoomHover.st_bd .bl_zoomHover_item:not(:first-child) {
 border-left:1px solid #fff;
}
 
 .bl_zoomHover.st_pcAuto .bl_zoomHover_item {
  aspect-ratio:unset;
  height:100%;
 }
 
 
}




/* ===== コンテナクエリ ===== */
@container (min-width: 524px)  {
 .ly_colWrap-col3 {
 grid-template-columns: repeat(2, 1fr); 
 }
 
 
 
}
@container (min-width: 860px) {
  .ly_colWrap-col3 {
    grid-template-columns: repeat(3, 1fr);
  }
}




/*/////////////////////////////////////////////////////////////
■ TYPO（hedding）
/////////////////////////////////////////////////////////////*/

.ly_editArea h1 {
 /* H1 / ページタイトルなので、基本的には使用しない */
}

/* H2 / 文字 縦中央にラインのある見出し */
.el_ttlMidBd,
.ly_editArea h2{
 position: relative;
 overflow: hidden;
 font-size:calc(24em / 16);
 font-family: var(--mincho);
 
}
.ly_editArea h2:not(:first-of-type), 
.ly_editArea * + h2,
.el_ttlMidBd:not(:first-of-type) {
  margin-top: 4.5em;
}


.el_ttlMidBd::after,
.ly_editArea h2::after {
 content:"";
 position: absolute;
 display: inline-block;
 background: linear-gradient(#000, #000) center / 100% 1px no-repeat;
 width:100%;
 height:1.5em;
 margin-left:1em;
}

.ly_editArea h3 { /* 左にライン */
 font-size:calc(18em / 16);
 line-height:1.3;
 border-left:4px solid #000;
 padding-left:0.6em;
}

.ly_editArea h3:not(:first-of-type),
.ly_editArea * + h3{
 margin-top:3.4em;
}

.ly_editArea h2 + h3 {
 margin-top:-0.5em;
}




.ly_editArea h4 {/*太文字*/
 margin-top:2em;
 font-size:1.05em;
}

.ly_editArea h5 {　/* 囲い罫線 */
 margin-top: 2em;
 border:1px solid #000;
 padding-inline:0.2em;
 width:fit-content;
}

.ly_editArea h6 { /*グレー背景*/
  margin-top: 2em;
  background:#676767;
 color:#fff;
  width:fit-content;
 padding-inline:0.3em;
} 


h2.el_ttlStNormal {
font-family:var(--gothic);
}
h2.el_ttlStNormal::after {
display:none;} 

div > h2:last-child {
margin-bottom:0;} 




.ly_editArea ol{
 padding-left:1.7em;
}

.ly_editArea ol:not([type]) {
 list-style: decimal-leading-zero;
}

.ly_editArea ol:not([type]) > li::marker {
 font-family: var(--mincho);
}


/* リストの記号等 ---------------------*/

/*カッコつきにする（olのtype="A"）等と合わせて使う*/

/* デフォルトはそのまま
.ly_editArea ol:not(.el_paren) {
  list-style: inherit;
}
 */
/* ユーザーに使ってもらうOLのリスト*/

ol[type="a"].ol_paren li::marker {
  content: "(" counter(list-item, lower-alpha) ") ";
}

ol[type="A"].ol_paren li::marker {
  content: "(" counter(list-item, upper-alpha) ") ";
}

ol[type="1"].ol_paren li::marker {
  content: "(" counter(list-item) ") ";
}
ol[type="i"].ol_paren li::marker {
  content: "(" counter(list-item, lower-roman) ") ";
}




 /* 画面サイズ 768px 以上(PC用)
--------------------------------------------------------------- */
@media (min-width: 768px) {

.ly_editArea h2:not(:first-of-type), 
.ly_editArea * + h2,
.el_ttlMidBd:not(:first-of-type) {
  margin-top: 6em;
}

}



/*/////////////////////////////////////////////////////////////
■ LINK BUTTON
/////////////////////////////////////////////////////////////*/

/* リンクボタン 初期設定
---------------------------------*/

a[class^="el_linkBtn"]{ 
 display: inline-block;
 text-decoration: none;
 text-align: center;
 align-content: center;
 line-height:1.1;
 margin:0 auto 1em auto;
 padding-inline:1em;
 word-break: break-all;
}



/* 黒四角ボタン （一部カスタムブロックと共有）
---------------------------------*/

a.el_linkBtn-bk, 
.cb_linkBtn-bk a{
 display: block;
 background-color:#000;
 color:#fff;
 border:1px solid #000;
 min-height:4em;
 width:80%;
 max-width:380px;
}

a.el_linkBtn-bk[target="_blank"]:not([href$=".pdf"]):not([href*=".doc"]):not([href*=".xls"])::after, 
.cb_linkBtn-bk a[target="_blank"]:not([href$=".pdf"]):not([href*=".doc"]):not([href*=".xls"])::after{
 filter:invert(1);
}



/* ボタンが2つ以上並ぶとき*/
.el_btnWrap {
 display: flex;
 justify-content: center;
 gap:1em; 
}
 .el_btnWrap a.el_linkBtn {
  margin-inline:0;
 }


/* 白四角ボタン（ベベルあり）
---------------------------------*/

.el_linkBtn-bevel {
 /*
  border-left:5px solid #000;
 border-right:5px solid #000;
 border-bottom:5px solid #fff;
 height:0;
 */
}

a.el_linkBtn-bevel,
.cb_linkBtn-bevel a{
 padding:0.8em 1em;
 border:1px solid #000;
 background: linear-gradient(45deg, #000 3px, transparent 3px, transparent calc(100% - 3px), #000 calc(100% - 3px)),
             linear-gradient(135deg, #000 3px, transparent 3px, transparent calc(100% - 3px), #000 calc(100% - 3px));
 background-color: #fff;

}

.el_linkBtn-bevel + .el_linkBtn-bevel {
 margin-left:1em;
}

/* HOVER 設定
---------------------------------*/

@media (any-hover:hover){
 
 a.el_linkBtn-bk:hover,
 .cb_linkBtn-bk a:hover{
  background:#fff;
  color:#000;
 }

 a.el_linkBtn-bk[target="_blank"]:not([href$=".pdf"]):not([href*=".doc"]):not([href*=".xls"]):hover::after, 
.cb_linkBtn-bk a[target="_blank"]:not([href$=".pdf"]):not([href*=".doc"]):not([href*=".xls"]):hover::after{
 filter:none;
} 
  a.el_linkBtn-bevel:hover,
 .cb_linkBtn-bevel a:hover{
  background:#000;
  color:#fff;
 }  
   a.el_linkBtn-bevel:not([href$=".pdf"]):not([href*=".doc"]):not([href*=".xls"]):hover::after,
 .cb_linkBtn-bevel a:not([href$=".pdf"]):not([href*=".doc"]):not([href*=".xls"]):hover::after {
  filter: invert(1);
 }
  
}

  


/*/////////////////////////////////////////////////////////////
■ MARK
/////////////////////////////////////////////////////////////*/


[class^="el_rectMark"] {
 display: inline-block;
 line-height:1;
 padding:4px 5px 2px 5px;
 vertical-align: baseline;
 white-space: nowrap;
 font-size:calc( 13em / 16);
 margin-right:10px;
}

[class^="el_rectMark"]:empty {
    padding: 0;
    margin: 0;
}


.el_rectMark-cat {
 color:#fff;
 background:#767676;
 font-weight: 600;
 font-feature-settings: "palt" 1;
 width: fit-content;
}

.el_rectMark-bk {
 color:#fff;
 background:#000;
 min-width:2.5em;
 text-align: center;
}

.el_rectMark-end {
 color:#f44646;
 border:1px solid #f44646;
 background:#fff;
}



.el_backToTopBtn {
 position: fixed;
    right: 0.2em;
    bottom: 1rem;
    background-color: rgba(0, 0, 0, 0.8);
    cursor: pointer;
    width: 2.5rem;
    height: 2.5rem;
    display: none;
}
.el_backToTopBtn span {
   display: block;
   width:1px;
   height:1px;
   overflow: hidden; 
}
.el_backToTopBtn span:after {
    content: "";
    width: 0.5em;
    height: 0.5em;
    position: absolute;
    right: 0px;
    left: 0px;
    bottom: 0px;
    top: 0.4em;
    transform: rotate(-45deg);
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    margin:auto;
}



@media (max-width: 767px) {
 /*スマホ*/
 .el_backToTopBtn {
  right:0;
  width: 2.8rem;
  height: 2.8rem;
  background-color: rgba(0, 0, 0, 0.7);
 }
 
}



/*/////////////////////////////////////////////////////////////
■ PAGE HEADER  bl_pageHd　（ページヘッダー）
/////////////////////////////////////////////////////////////*/

.bl_pageHd {
 position: relative;
 /*margin-right:-4.5em;*//*mainのpadding分*/
 max-width:1200px;
 margin-inline:auto; 
}
.bl_pageHd img {
 width:100%;
}
.bl_pageHd_txtBox {
 position: relative;
 background: rgba(0,0,0,1);
 color:#fff;
 min-width:40%;
 padding:0.8em 2em 0.4em;
 margin-top:3.6em;
}


.bl_pageHd_txtBox a::after {
     filter: invert(1);
}

/*.bl_pageHd_txtBox a*/
.bl_pageHd_btTxt-01 a{
  display: block;
  background:#fff;
  color:#000;
  width:max-content;
 padding:0.2em 1em 0.1em;
 text-decoration: none;
 border:1px solid transparent;
 margin-block:0.8em 0.3em;
}
.bl_pageHd_btTxt-01 a::after {
 filter:none;
}

@media(any-hover:hover) {
 .bl_pageHd_btTxt-01 a:hover {
  background:transparent;
  color:#fff;
  border-color: #fff;
 }
}

.bl_pageHd img + .bl_pageHd_txtBox {
 width:auto;/* 画像が入っている場合は、幅はAuto */
 padding-block:2em;
 margin-top:0;
}

.bl_pageHd_ttl {
  display: flex;
  align-items: flex-start; 
}
.bl_pageHd_ttl .el_rectMark-cat {
 margin-top:0.8em;
 }


.bl_pageHd_ttl h1 {
 font-size:1.8em;
 font-family: var(--mincho);
 font-weight: 600;
 line-height: 1.3;
}

.bl_pageHd_tpTxt {
  margin-bottom:0.8em;
 margin-top:0.2em;
}
.bl_pageHd_btTxt-01 {
  margin-top:1em;
}
.bl_pageHd_btTxt-02 {
 position: relative;
 width:95%;
 left:5%;
 background: #fff;
 padding-inline:2em;
 border:1px solid #fff;
 margin-top:-1em;
}


.bl_pageHd_btTxt-02 > *:first-child {
 margin-top:1.5em;
}
.bl_pageHd_btTxt-02 > *:last-child {
 margin-bottom:1.5em;
}

.ly_mainHead:has(.bl_pageHd_btTxt-02) {
 margin-bottom:3em;
} 


.bl_pageHd.st_project .bl_pageHd_tpTxt {
 font-weight: bold;
 font-size:1.3em;
 margin-bottom:0.5em;
}
.bl_pageHd.st_project .bl_pageHd_btTxt-02 {
 font-weight: bold;
}



/*-----------------------------
記事一覧ページ
-------------------------------*/
.bl_pageHd.st_article {
 margin-top:3.6em;
 padding-inline:2em;
}

.bl_pageHd.st_article h1,
.bl_pageHd.st_article02 h1{
 /*font-family: var(--gothic);*/
 font-size: 1.6em;
 margin-top:0.5em;
 line-height:1.5;
}

.bl_pageHd_date {
 font-family:var(--mincho);
 margin-right:1em;
}

 
 /* 画面サイズ 768px 以上(PC用)
--------------------------------------------------------------- */
@media (min-width: 768px) {
 
 .bl_pageHd_txtBox {
  width:calc(100% - 8%);/*mainBodyのpadding分*/
   background: rgba(0,0,0,0.8);
 }
 
 
 .bl_pageHd img + .bl_pageHd_txtBox {
   position: absolute;
  top:70%;
   transform: translateY(-70%);
   max-width:70%;
 }
 
 .bl_pageHd_ttl h1 {
  font-size:2em;}
 
  .bl_pageHd_btTxt-02 {   
   width:50%;
    left:50%;
    transform: translateY(-50%);
   position:absolute;
   margin-top:2px;/*内容がなく潰す場合のボーダー分*/
 }
 
 .bl_pageHd:has(.bl_pageHd_btTxt-02) {
  margin-bottom:2em;
 }
 
 /*
.ly_mainHead:has(img) {
  background-image:url("../img/mv.jpg");
  background-size:cover;
 position: relative;
 }

 
 .ly_mainHead:has(img)::before {
  content:"";
  position: absolute;
  width:100%;
  height:100%;
  display: block;
  backdrop-filter: blur(20px);

 }
  */
 
 
 .ly_mainHead:has(img) + .ly_editArea h2{
  margin-top:0;
 }
 
 .ly_mainHead:has(.bl_pageHd_btTxt-02) + .ly_editArea h2:first-child{
  margin-top:0;
 }
 

 /*-----------------------------
記事一覧ページ
-------------------------------*/
.bl_pageHd.st_article {
 padding-inline:0 8%;
}
 
}/*pc用END*/





@media (min-width: 1700px) {
 
 
 .bl_pageHd_txtBox {
  width:100%;
 }
}


/* 画面サイズ 2000px 以上に対応
-------------------------------------------------------------- */
@media (min-width: 2000px) {
 
  .bl_pageHd_txtBox {
   /*
  width:calc(100% - 4rem);
   /*mainBodyのpadding分*/
 }
 
  .bl_pageHd {
 } 
}


/*/////////////////////////////////////////////////////////////
■ パンくずリスト
/////////////////////////////////////////////////////////////*/
.bl_topicPath ol {
 display: flex;
 margin-bottom:1em;
 list-style: none;
flex-wrap: wrap;
}

.bl_topicPath li {
 margin: 0 1em 0.6em 0em;
}
 
.bl_topicPath li:not(:first-child) {
 padding-left:0.9em;
  background: url("https://www.chikyu.ac.jp/rihn/files/theme/ico_chevron-right.svg") no-repeat left 0.5em / auto 0.4em;
}

/*/////////////////////////////////////////////////////////////
■ ARTICLE LIST　（記事一覧）
/////////////////////////////////////////////////////////////*/

.ly_mainBody .bl_articleList {
 margin-bottom:4em;
 padding-left:0;
}

.bl_articleList_item {
 padding-bottom:1rem;
 border-bottom:1px dotted #000;
}
.bl_articleList_item:not(:last-child) {
  margin-bottom:1.8rem;
}

.bl_articleList_item p {
 margin-block:1em;
}

.bl_articleList_item dd > *:first-child {
 margin-top:0;
}
.bl_articleList_item dd > *:last-child {
 margin-bottom:0;
}



.bl_articleList dt {
 color:#767676;
 margin-bottom:0.8em;
}

.bl_articleList_date {
 font-family: var(--mincho);
 font-weight: 700;
 margin-right:1em;
}

.bl_articleList_caption {
  margin-top:1em;
}
.bl_articleList_caption p {
 margin-inline:0.5em;
}

  .bl_articleList.st_staffList {
  border-top:1px solid #000;
  padding-top:2em;
 }
 .bl_articleList.st_staffList  .bl_articleList_item {
  display: grid;
  gap:4%;
 }
 
 .bl_articleList.st_staffList .bl_articleList_name {
  font-family: var(--mincho);
 }
 .bl_articleList.st_staffList .bl_articleList_name small {
  font-size: 0.8em;
 }


.bl_articleList.st_hasLongCat dt {
  margin-bottom:0.3em;
}
.bl_articleList.st_hasLongCat dd p {
  margin:0;
}
.bl_articleList.st_hasLongCat dd p:last-child {
 display: inline-block;
} 





/* 画面サイズ 768px 以上(PC用)
--------------------------------------------------------------- */
@media (min-width: 768px) {
 
  .bl_articleList_item {
 display: grid;
 grid-template-columns: 10.5em 1fr;  
 }
 
 .bl_articleList.st_hasCat .bl_articleList_item{
 grid-template-columns: 13em 1fr;  
 }

 
 .bl_articleList.st_hasLongCat .bl_articleList_item{
 grid-template-columns:100%;
 }
 
 .bl_articleList.st_hasLongCat .bl_articleList_date {
  display: inline-block;
  width:10em;
 }
 .bl_articleList.st_hasLongCat dd {
  padding-left:calc( 10em + 1em);
  padding-top:0.5em;
 } 
 
 .bl_articleList.st_hasCat.st_multiDate .bl_articleList_item{
   grid-template-columns: 15em 1fr;
  gap:2em;
 }
  .bl_articleList.st_hasCat.st_multiDate dt {
    display: grid;
    grid-template-columns: 7em auto;
   align-items: start;

 }
  .bl_articleList.st_staffList  .bl_articleList_item {
  grid-template-columns:12em calc((100% - 12em)*0.6) 1fr;
  gap:4%;
 }
  
}





/*/////////////////////////////////////////////////////////////
■ ARTICLE LIST Fx　（IS／FS 一覧、刊行物一覧）flexで並ぶ汎用リスト


確認中。どうしようか　02に戻そうか…
/////////////////////////////////////////////////////////////*/




ul.bl_articleListFx {
  padding-left:0;
 margin-block:2.4em;
}
.bl_articleListFx_item {
 list-style: none;
 border-bottom:1px dotted #000;
 padding-block:1em;
 display: flex;
 align-items: flex-start;
 word-break: break-all;
}

.bl_articleListFx_item {
 column-gap: 2em;
}

ul.bl_articleListFx.st_noGap .bl_articleListFx_item {
  column-gap: 0;
}

ul.bl_articleListFx.st_col1 .bl_articleListFx_item {
 display: block;
}
ul.bl_articleListFx.st_col1 .bl_articleListFx_item h3 {
 font-size:1.2em;
 margin-block:0.2em;
}

ul.bl_articleListFx.st_col1 .bl_articleListFx_item p {
 margin-block:0.2em;
}




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


/*/////////////////////////////////////////////////////////////
■ PAGINATION　（ページ送り）
/////////////////////////////////////////////////////////////*/



.bl_pagination {
 display: grid;
  grid-template-columns: repeat(auto-fit, 1.5em);
 gap:1em 1.2em;
 max-width:calc(1.5em * 8 + 1.2em * 7);  
 margin:2.4em auto;
 justify-content: center;
 text-align: center;
 font-family: var(--mincho);
 height:1;
}

.bl_pagination .is_current {
 background: #ccc;
}

.bl_pagination a {
 text-decoration: none;
}
@media (any-hover:hover){
 .bl_pagination a:hover {
  text-decoration: underline;
 }
}

.bl_pagination span[aria-hidden=true] {
  color:#767676;
}


.bl_pagination button {
 font-size:0;
 border:none;
 background:#fff url("https://www.chikyu.ac.jp/rihn/files/theme/ico_chevron-right.svg") no-repeat right center / auto 50%;
}

.bl_pagination button:first-of-type {
 transform: rotate(180deg);
}

.bl_pagination button:disabled {
  opacity: 0.3;
}

.bl_pagination + nav {
 margin-top:6em;
}




/* 画面サイズ 768px 以上(PC用)
--------------------------------------------------------------- */
@media (min-width: 768px) {

 .bl_pagination {
 grid-template-columns: repeat(auto-fit, 1.5em);
 gap:0 0.6em;
 max-width:none;
}
  
}


/*/////////////////////////////////////////////////////////////
■ ARTICLE LIST CATEGORI TAB　（タブ）
/////////////////////////////////////////////////////////////*/

.bl_tab {
  display: flex;
 justify-content: center; 
 margin-bottom:3em;
 border-width: 0 0 1px 0;
 border-color: #000;
 gap: 1%;
 position: relative;
}

.bl_tab legend {
     display: block;
    height: 0;
    visibility: hidden;
}
.bl_tab_switch {
opacity:0;
 position:relative;
transform: translate(0.5em, -1em);
 width:1em;
 margin-left:-1%;
 padding:0;
 
}
.bl_tab_label {
 flex:1;
 cursor: pointer;
 text-align: center;
 background:#f2f2f2;
 padding:1em 0.3em 0.8em 0.3em; 
 margin-left:-1em;
 
  white-space: nowrap;
}


.bl_tab_switch:checked + .bl_tab_label {
    background:#000;
    color: #fff;
}

/* タブ移動の場合のフォーカス */

.bl_tab_switch:focus-visible {
 opacity:1;
 width:auto;
 position:relative;
 /*left:1.5em;*/
outline:0px solid #fff;
}



/* 画面サイズ 767px 以下(スマホonly)
--------------------------------------------------------------- */
/*@media (max-width: 767px)*/
@container (max-width: 600px){
 .bl_tab {
    position: relative;
   
  flex-wrap: wrap;
 }
 
 .bl_tab_label {
 flex:auto;
  gap:8px 1%;
  margin-bottom: 8px;}
 
 
 
 /*タブが6個以上7個以下の時（子要素の数に、labelだけでなく legendとradio ボタンも含まれる）*/
.bl_tab:has(> :nth-child(11)):has(> :nth-child(-n+13):last-child) .bl_tab_label { 
 width:32%;/*gap分差し引き*/
 }
 
 /*タブが7-8個の時（子要素の数に、labelだけでなく legendとradio ボタンも含まれる）*/
.bl_tab:has(> :nth-child(15):last-child) .bl_tab_label,
.bl_tab:has(> :nth-child(17):last-child) .bl_tab_label {
 width:23.7%;/*gap分差し引き*/
 }
 
 
 
}


/* ---------------------------------------------------------------
　　タブの 別バーション  .st_btLine
--------------------------------------------------------------- */
.bl_tab.st_btLine {

}


.bl_tab.st_btLine {
 display: flex;
 justify-content: center; 
 margin-bottom:3em;
 border-width: 0 0 1px 0;
 border-color: #000;
 gap: 1%;
 position: relative;
}

.bl_tab legend {
     display: block;
    height: 0;
    visibility: hidden;
}
.st_btLine .bl_tab_switch {
opacity:0;
 position:relative;
transform: translate(0.5em, -1em);
 width:1em;
 margin-left:-1%;
 padding:0; 
 
}
.st_btLine .bl_tab_label {
 flex:1;
 cursor: pointer;
 text-align: center;
 background:#fff;
 padding:1em 0.2em 0.8em 0.2em; 
 margin-left:-1em;
 color:#333;
}


.st_btLine .bl_tab_switch:checked + .bl_tab_label {
 background:#fff;
 color: #000;
 font-weight: 600;
 border-bottom:3px solid #000;
   
}

/* タブ移動の場合のフォーカス */
/*
.st_btLine .bl_tab_switch:focus-visible {
 opacity:1;
 width:auto;
 position:relative;
outline:0px solid #fff;
}


*/







/*/////////////////////////////////////////////////////////////
■ ARTICLE LIST FILTER　（年度等のドロップダウンリスト）
/////////////////////////////////////////////////////////////*/

/* iOSフォームの基本リセット */
input,
select,
button {
  /* iOS独自のスタイルを無効化 */
  /*-webkit-appearance: none;
  appearance: none;*/
   border-radius: 0;
 background-color: transparent;
 color:#000;
}


/*------*/

.bl_filter {
 margin-block:2.4em 3em;
 display: flex;
 
}

.bl_filter select {
 border:1px solid #000;
 line-height:1.2;
 padding:1em 3em 0.8em 1em;
 width:45%;
 font-size:1em;
 margin-block:0.3em;
}
.bl_filter select {
 margin-right:1em;
}

/* 画面サイズ 768px 以上(PC用)
--------------------------------------------------------------- */
@media (min-width: 768px) {
 .bl_filter select {
 width:14em;

}
 
}





/*/////////////////////////////////////////////////////////////
■ PAGE INDEX NEWS　（実験ページ等のニュースボックス）
/////////////////////////////////////////////////////////////*/

.bl_pageIndexNews {
 background:#fafafa;
 display: grid;
 grid-template-columns: 1fr;
 padding:3em 1.4em 2.4em 1.4em;
 margin-bottom:4em;
}


.bl_pageIndexNews .el_ttlMin  {
 font-family: var(--mincho);
 margin-bottom:1em;
}

/**/
.bl_ttlBox {
  display: flex;
  align-items: center;
  margin-bottom:2em;
}



.bl_pageIndexNews .bl_ttlBox {
 flex-direction: row;
 justify-content: flex-start;

}
/**/

.bl_ttlBox .el_linkBtn-bevel {
   display: block;
   margin: 0 0 0 auto;
}

.bl_pageIndexNews .el_linkBtn-bevel {
 background-color:#fff;
 width:6em;
}

.bl_pageIndexNews .bl_articleList,
.bl_pageIndexNews .bl_articleList dt {
 margin-bottom:0;
}
.bl_pageIndexNews .bl_articleList_item{
 border-bottom:0; 
}

.bl_pageIndexNews .bl_articleList_date{
 color:#626262;/*背景がグレーなのでコントラストを上げる*/
}

.bl_catTopNavWarp {
 margin-bottom:4em;
}


.bl_ttlBox:not(:has(.el_linkBtn-bevel)) .el_ttlMin {
 margin:0; 
}




/* 画面サイズ 768px 以上(PC用)
--------------------------------------------------------------- */
@media (min-width: 768px) {
 .bl_pageIndexNews {
 /*grid-template-columns:10em 1fr;*/
   padding:3.4em 2.4em 2.4em 2.4em;
}

 


 .bl_pageIndexNews .bl_articleList_item:not(:last-child) {
  margin-bottom:0;
 }
 
 .bl_pageIndexNews .st_hasLongCat .bl_articleList_date{
 width:6em;
}
.bl_articleList.st_hasLongCat dd {
        padding-left: calc(6em + 1em);
    }

/*実験施設ニュース*/
  .tpl_204  .bl_articleList.st_hasLongCat dd {
        padding-left: calc(10em + 1em);
    }
 
 
 
}



/* 画面サイズ 1000px 以上(PC用)
--------------------------------------------------------------- */
@media (min-width: 1000px) {
 .bl_pageIndexNews {
 grid-template-columns:10em 1fr;
   padding:3.4em 2.4em 2.4em 2.4em;
}

  
 .bl_pageIndexNews .bl_ttlBox {
  align-items: flex-start;
  flex-direction: column;
 }
   
.bl_pageIndexNews .el_linkBtn-bevel {
   margin:0 auto 0 0 !important;
}
 
}


/*/////////////////////////////////////////////////////////////
■ 実験施設 ページタイトル
/////////////////////////////////////////////////////////////*/

 .bl_catTopNavWarp {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.4em; 
 } 

 a.bl_catTopNav{  
 display: table;
 width:100%;
 border: 1px solid #000;
 padding-block:1.5em 1.5em;
 text-decoration: none;
min-height: 7.5em;
	background: linear-gradient(45deg, #000 5px, transparent 5px, transparent calc(100% - 5px), #000 calc(100% - 5px)), linear-gradient(135deg, #000 5px, transparent 5px, transparent calc(100% - 5px), #000 calc(100% - 5px));  
}

.bl_catTopNav h3{ 
 display: table-cell;
 width:7.5em;
	text-align: center;
	border-right: 1px solid #000;
	line-height: 1.35;
 vertical-align: middle;
 /*以下別途 h3に指定した記述の打消し*/
 margin-block:0;
 border-left:0;
 padding-left:0;
 font-size: 1.1em;
}

.bl_catTopNav ul{
 display: table-cell;
 line-height: 1.6;
	padding-inline: 3em 1em;
 vertical-align: middle;
}

/*リストが1つだけのものには、リストマークがついていない
リストが1つだけのもの（＝2個目のリストを持っているもの以外）のリストマークをなくす*/
.bl_catTopNav ul:not(:has(li:nth-child(2))) {
 list-style: none;
 padding-left:2em;
}

/* コンテンツ領域が680px以上,ウインドウ幅が 950px以上
--------------------------------------------------------------- */
@media (min-width: 950px){
 .bl_catTopNavWarp {
  grid-template-columns: repeat(2, 1fr);
  gap:2.4em 3%; 
 } 
 .bl_catTopNav h3{
  width:11em;
  width:36%;
 }

}

/* 画面サイズ 768px 以上(PC用)
--------------------------------------------------------------- */
@media (min-width: 768px) {
 
 .bl_catTopNav h3  {
  font-size:1.2em;
 }
 
}


@media(any-hover:hover){
 a.bl_catTopNav:hover {
  background: #000;
  color: #fff;  
 }
 
 a.bl_catTopNav:hover h3 {
  border-color: #fff;
 }
 
 
}




/* TopページよりBanBox移植 ----------- */
/*
.bl_banBox {
 display: grid;
 grid-template-columns: auto;
 grid-auto-flow: row;
 gap:1em;
 position: relative;
  overflow: hidden;
 }

.bl_banBox_item {
 text-decoration: none;
 overflow: hidden;
 container-type:inline-size;
}

.bl_banBox_item::after {
  display:none; 
}

.bl_banBox_item {
 aspect-ratio:335 / 139;

}


.bl_banBox_txt {
position: relative;
 width:100%;
 text-align: center;
 top:-30%;
 z-index:1;
 color:#fff;
 font-weight: 600;
font-size:4cqw;
 margin:0;
}



.sec_banExternal h2 {
 margin-block:2em;
}

.bl_banBox {
 gap:2em;
}
.sec_banExternal .bl_banBox {
 gap:2em 0;
 grid-auto-flow: row; 
}

.sec_banExternal .bl_banBox_item {
border:1px solid #ccc;
 width:100%;
}
*/


/* BanBox 移植 ここまで------------------*/











/* ===== コンテナクエリ ===== */
@container (min-width: 524px)  {
 .sec_books .ly_editArea,
 .bl_banBox {
 grid-template-columns:auto ;
 grid-auto-flow: column;
 }

 .sec_ban .bl_banBox,
 .sec_banExternal .bl_banBox {
 grid-auto-flow: column;
 }


 
}


/*/////////////////////////////////////////////////////////////
■ 実験施設 サブメニュー (移植)
/////////////////////////////////////////////////////////////*/

.bl_subNav {
 margin-top:6em;
 margin-bottom:2.4em;
 position: relative;
}

.bl_subNav ul{
	display: flex;
	justify-content: space-between;
	overflow: auto;
	margin-block: 0;
	padding: 0 0 0.1em 0 !important;
 margin-top:0;
}

.bl_subNav ul li{
	list-style: none;
}

.bl_subNav li{
	width: 100%;
	text-align: center;
	padding: 0 0.2em;
	border: 1px solid #000;
	border-right: none;
}

.bl_subNav li:last-child{
	border-right:1px solid #000;
}

.bl_subNav li a{
	padding: 1em 0.2rem;
	line-height: 1;
	display:block;
	white-space: nowrap;
	text-decoration:none;

}

.bl_subNav .is_current{
	background: #000;
	color: #fff;
}


.bl_subNav ul + .bl_inPageLink {
 margin-top:-2em;
}
.bl_inPageLink {
font-feature-settings: "palt" 1;
 }

/*/////////////////////////////////////////////////////////////
■ MEDIA (研究一覧3カラム)
/////////////////////////////////////////////////////////////*/

a.bl_media {
 margin-bottom:3em;
}

.bl_media img {
 width:100%;
 object-fit: cover;
 aspect-ratio:417 / 259;/*現在の写真サイズ*/
 margin-bottom:1em;
}

:is(h2,h3,h4,h5).bl_media_ttl {
  font-size:calc(21em / 16);
  margin-block:0.5em;
}



/*/////////////////////////////////////////////////////////////
■ スタッフ一覧
/////////////////////////////////////////////////////////////*/


.bl_staffName {
 font-family: var(--mincho);
 font-size:calc(28rem / 16);
 margin-bottom:2.4em;
}

.bl_staffName small {
 font-size:0.6em;
}

.bl_staffName + h2 {
 display:none;
}
.bl_staffQa {
 margin-bottom:6em;
}


.bl_staffQa h3 {
 border-left:none;
 position: relative;
 padding-left:0;
}

.bl_staffQa_qLabel {
  font-family: var(--mincho);
 margin-right:0.5em;
 font-size:1.1em;
 vertical-align: baseline;
}


/*/////////////////////////////////////////////////////////////
■ 研究一覧個別ページ
/////////////////////////////////////////////////////////////*/

.ly_editArea .el_pjLeaderName {
 font-family: var(--mincho);
 font-size:1.5em;
 margin-bottom:0.6em;
}

.el_pjLeaderName + p {
 margin-top:0;
}


.bl_pjNewsTb table {
 table-layout: fixed;
 margin-bottom:2em;
}

.bl_pjNewsTb table,
.bl_pjNewsTb td {
 border:none;
}

 .bl_pjNewsTb td {
  padding:0.8em 0.2em 0.8em 0 !important;
 }

.bl_pjNewsTb tr {
 border-bottom:1px dotted #000;
}

.bl_pjNewsTb td:first-child {
 color:#767676;
 font-family: var(--mincho);
 width:6em;
}

.bl_pjNewsTb td:nth-child(2) {
 width:7em;
}



/* 画面サイズ 767px 以下(スマホonly)
--------------------------------------------------------------- */
@media (max-width: 767px) { 
 
 .bl_pjNewsTb td {
  display: inline-block;
 }
  .bl_pjNewsTb td:nth-child(3) {
   display: block;
 }
 .bl_pjNewsTb td:nth-child(-n + 2) {
 padding-block:1.4em 0;
}
 
}

/*/////////////////////////////////////////////////////////////
■ FTFS Table 用 
/////////////////////////////////////////////////////////////*/

table.bl_labelBkTb {
  table-layout: fixed;
  width:100%;
}
.bl_labelBkTb td:first-child {
 width:3em !important;
}

/* コンテンツテンプレート 各一覧用 */
.ly_editArea + a.el_linkBtn-bk {
 margin-block:6em 4em;
}



/*/////////////////////////////////////////////////////////////
■ スクロールイメージ 
/////////////////////////////////////////////////////////////*/

/*jQuery で figure に .el_imgScrollが追加されたら、imgScrollWarp を追加する*/



@media (min-width: 768px) {
.bl_spItemScroll_txt {
 display: none;
}
 .bl_spItemScrollWarp figure {
  margin-inline:auto;
 }

}



/* 画面サイズ 767px 以下(スマホonly)
--------------------------------------------------------------- */
@media (max-width: 767px) { 
 

 .bl_spItemScrollWarp {
 position: relative;
 margin-bottom:3em;
}

.bl_spItemScrollWarp figure {
 overflow-x: scroll;
 max-width: unset;
 width:100%;
 margin-bottom:0;
}
 .bl_spItemScrollWarp img {
  width:180%;
  max-width: unset;
  height:auto;
  display: block;
  margin-bottom:1em;
 }
 
 .bl_spItemScrollWarp figcaption {
  position: sticky;
  bottom:0;
  left:0;
 }
 
 .bl_spItemScroll_txt {
 /*display: block;*/
  color:#767676;
  text-align: right;
   margin-bottom:0.5em !important;
 font-size:0.86em;
 font-feature-settings: "palt" 1 ;
  position: relative;
 }

 
}



.ex_fzSmall {
 font-size:calc(13em /16);
}

.ex_mt05 {
 margin-top:0.5em;
}

/*/////////////////////////////////////////////////////////////
■ Element
/////////////////////////////////////////////////////////////*/

/* 画面サイズ 767px 以下(スマホonly)
--------------------------------------------------------------- */
@media (max-width: 767px) { 
}

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

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