@charset "utf-8";

/*
■ RESET
■ BASE
　- Typo
  - スクリーンリーダー対応
----------------------------------------
■ LAYOUT WRAP
■ SIDE
  - Header
  - Nav Area / Global Nav
  - search Form (検索エリア)
  - el_lang （英語切替）
■ MAIN
■ FOOTER
======================================== */


/*/////////////////////////////////////////////////////////////
■ RESET
/////////////////////////////////////////////////////////////*/
html,body,div,span,figure,
dl,dt,dd,ul,ol,li,p,blockquote,pre,
h1,h2,h3,h4,h5,h6,img,hr,
form,fieldset,input,textarea,label,abbr,acronym,
table,caption,tbody,tfoot,thead,tr,th,td,
address,cite,code,dfn,em,strong,var {
margin:0;padding:0;font-size:inherit;vertical-align: baseline;}
table,tr,th,td {border-collapse:collapse;border-spacing:0;}
img {vertical-align: bottom; outline:0;border:0;}/* 画像下の隙間とフォーカス枠削除 */

ins {text-decoration: none;}
main,article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}

/*/////////////////////////////////////////////////////////////
■ BASE
/////////////////////////////////////////////////////////////*/

*,
*::before,
*::after {
 box-sizing: border-box;
}

html {
  /*font-size:16px;*//*rem基準となるベースサイズ*/
  scroll-behavior: smooth; /*スムーズスクロール*/
scroll-padding-top: 80px;
}
body {
  font-family: "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
     font-feature-settings: "palt" 0;
 word-wrap: break-word;
  font-size: .875rem;/* 14px */
 font-size: clamp(14px, 1.0vw, 18px);
 font-weight:500;
  line-height: 1.5;
  color:#333;
  background-color:#fff;    
	-webkit-text-size-adjust : 100%; 
  overflow-wrap: break-word;
}

input, select, button, textarea, label {
  font-family: inherit;
  cursor: pointer;
}
img {
  width:auto;
  max-width:100%;
}


table {
 /* データではなく英語の個人名も多いため、break-allは使わない */  
   word-break: break-word;
}

:is(table,tr,td,th) img {
max-width:100%;
width:auto;} 

table, tr, th, td {
height:auto !important;
}



/* スマホ only
--------------------------------------------------------------- */
@media (max-width: 768px) {
input{ font-size:1rem; } /*フォームの拡大フォーカスOFF font-size 16px 以上*/
 body {font-size: clamp(15.5px, 1.0vw, 18px);}
 .bl_tab {font-size: clamp(14px, 1.0vw, 18px);
 font-feature-settings: "palt" 1}
}


/*===========================================================
■ LINK　
=========================================================== */
a {
   color:inherit;
}

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


/*------------*/
a[target="_blank"]::after,
a[href$=".pdf"]::after,a[href$=".PDF"]::after,
a[href*=".doc"]::after,
a[href*=".xls"]::after,
a[target="_blank"] figcaption:not(:empty)::after,
a[href$=".pdf"] figcaption:not(:empty)::after,
a[href$=".PDF"] figcaption:not(:empty)::after{
 content:"";
 width:100%;
 padding-right:1.2rem; 
}

a[target="_blank"]:has(img)::after,
a[href$=".pdf"]:has(img)::after {
 display:none;
}



a[target="_blank"]::after,
a[target="_blank"] figcaption::after {
 background: url("https://www.chikyu.ac.jp/rihn/files/theme/ico_external.svg") no-repeat right center / 0.7rem auto;/*文字に合わせて巨大化しないようにrem指定*/
}

a[href$=".pdf"]::after,
a[href$=".pdf"] figcaption::after,
a[href$=".PDF"]::after,
a[href$=".PDF"] figcaption::after{
  background:url("https://www.chikyu.ac.jp/rihn/files/theme/ico_pdf.png") no-repeat right 0 / 0.92em auto;
}

a[href*=".doc"]::after {
  background:url("https://www.chikyu.ac.jp/rihn/files/theme/ico_word.png") no-repeat right 0 / 0.92em auto;
}
a[href*=".xls"]::after {
  background:url("https://www.chikyu.ac.jp/rihn/files/theme/ico_excel.png") no-repeat right 0 / 0.92em auto;
}




/*===========================================================
■ TYPO　（MTのテキストブロックで使用するものはタグ直接指定）
=========================================================== */

:root {
 --mincho:"游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif; 
 --gothic:"游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
 
}

.el_pageTtl {
	margin-bottom:1em;	
}

.ly_editArea :is(h1,h2,h3,h4,h5,h6) {
 margin-bottom:1.5em;
	/*文字と画像の上面を揃えるため、マージンは極力下のみに入れる
 →　元のサイトが上マージン思想なので、極力統一 */

	/*margin-bottom:1.4em;*/
}
.ly_editArea p,
.ly_mainBody p {
		margin-block:2.4em;
  line-height:1.75;
}

div > p:first-child {
 margin-top:0;
}


.ly_editArea :is(h3,h4,h5,h6) + p {
 margin-top:1.4em;
}


.ly_editArea li {
 margin-block:0.4em;
}



.ly_editArea .bl_outline li {
 margin-block:0;
}

.ly_editArea iframe {
 border:0;
}





/*その他、詳細指定は、パーツのCSSへ*/


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

}


/*===========================================================
スクリーンリーダー対応
=========================================================== */

.sr_only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.sr_skipLink {
 bottom:-0.6em;
 font-size: 0.8em;
}

.sr_skipLink:focus {
width: auto;
height: auto;
clip: auto;
}

.sr_skipLink {
   position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}





/*/////////////////////////////////////////////////////////////
■ LAYOUT WRAP
-----------------------------------------------------------
・side とmain を ly_layoutWrapで纏める作り
・header は side 内
・footer は lauoutWrap の外

/////////////////////////////////////////////////////////////*/

:root {
/*--sidebar-width: clamp(200px, 20vw, 360px);*/
 --sidebar-width: clamp(200px, 18vw, 340px);
/* --sidebar-gap: 2%;
--sidebar-gap: 0;*/
 
}

.ly_layoutWrap {
	display:grid;
 grid-template-columns:1fr;
	gap:0;
}

/* 画面サイズ 768px 以上 (PC)
--------------------------------------------------------------- */
@media (min-width: 768px) {
 
 	.ly_layoutWrap {
		grid-template-columns: var(--sidebar-width) 1fr;
  /*column-gap:var(--sidebar-gap);*/
	}
}

/* 画面サイズ 2000px 以上に対応
-------------------------------------------------------------- */
@media (min-width: 2000px) {
 
  .ly_mainBody {
   /*
 padding-inline:0 4rem;*/

}
 
 
}

/*/////////////////////////////////////////////////////////////
■ SIDE
-----------------------------------------------------------
　PC用とSP用のデザイン差が大きいので、sp専用のデザインも設定
/////////////////////////////////////////////////////////////*/

/* 汎用
--------------------------------------------------------------- */
.ly_side{
 position:relative;
 background:rgba(255,255,255,.7);

 
  ol,ul,li {list-style:none;}
}

.ly_side a {
  color:inherit;
	 text-decoration: none;
 display: block;
}

.ly_sideInner {
  z-index:999999;
 min-width:170px;
}


/* 画面サイズ 768px 以上 (PC)
--------------------------------------------------------------- */
@media (min-width: 768px) {
 
 .ly_side{
  width: var(--sidebar-width);
  

 }
	
	.ly_sideInner {
		position: sticky;
  top:0.75rem;/*marginと同じ高さ*/
 /*  margin:0.75rem 1rem 1em 1.7em;*/
 /*margin:0.75rem 2vw 1em 2vw;*/
  margin-block:0.75rem;
  background: #fff;
  /*padding:1rem 1rem 2rem;*/
  padding:1rem 0.7rem 2rem;
  
  
  /*max-width:500px;*/
  /*max-width:14em;*/
  overflow-y: auto;
  height:fit-content;/* トップページだけこれにするか。文字分だけの高さにする */
  max-height: 100vh;
  /*margin-inline:auto;*/
  margin-inline:auto 7%;
  
  width: clamp(170px, 15vw, 300px);
  
	}

}

/*===========================================================
Header
=========================================================== */

.ly_header {
	position: relative;
 display: flex;  
}

.el_hdLogo {
	/*padding:1rem 1.4rem;*/
	flex-basis:63%;
	padding-left:4%;
}

.el_hdLogo img {
	margin-block:0.9rem;
}

.el_gNavBtn {
	/*width: 6.4rem;*/
	display: inline-block;
    height: 100%;
	aspect-ratio: 1 / 1;	
    position: absolute;
    top: 0;
    right: 0;
	background:#000;
	color:#fff;
	border:0;
	container-type: inline-size;/* コンテナ基準指定（フォントサイズベース） */
}
/*
.el_gNavBtn_ico {
	display: block;
	width: 50%;
	background-color: #fff;
    height: 2px;
    position: relative;
	margin-block:2em auto;
}
*/
.el_gNavBtn_ico {
	display: block;
	width: 44%;
 background: linear-gradient(#fff, #fff) center / 100% 2px no-repeat;
 aspect-ratio:1 /1;
    position: relative;
	margin-block:1em 0.2em;
 margin-inline:auto;
}


.el_gNavBtn_ico::before,.el_gNavBtn_ico::after {
 	content: " ";
	display: block;
	width:100%;
	height: 2px;
	background-color: #fff;
	position: absolute;
	left: 0;
	-webkit-transition: all .25s;
	transition: all .25s;
  transform-origin: center;
 top:50%;
 
}

.el_gNavBtn_ico::before {
 transform:translateY(-0.8rem);
	}

.el_gNavBtn_ico::after {
	 transform:translateY(calc(0.8rem - 2px));
}

.el_gNavBtn_txt{
	font-size: 1.1rem;
	font-size:17cqw;
 font-weight: bold;
}




/*開いているとき*/


.el_gNavBtn.is_opened .el_gNavBtn_ico {
 background: transparent;
}

.el_gNavBtn.is_opened .el_gNavBtn_ico::before {
transform:translateY(0) rotate(-45deg);
}

.el_gNavBtn.is_opened .el_gNavBtn_ico::after {
 transform: translate(0) rotate(45deg);
}



/* 画面サイズ 767px 以下(スマホonly)
--------------------------------------------------------------- */
@media (max-width: 767px) {
body:has(.el_gNavBtn.is_opened) {
 overflow:auto;
 }

}



/* 画面サイズ 768px 以上に対応 
--------------------------------------------------------------- */

@media (min-width: 768px) {

 .ly_header {
  /*flex-direction: column;*/
  display:block;
 }
 
  .ly_sideInner {
 max-width:280px;
}
 
 .el_hdLogo {
	/*padding:1rem 1.4rem;*/
	flex-basis:63%;
	padding-left:4%;
}
 
 
	.el_hdLogo img {
 		/*max-width:180px;*/
		margin-block:0 1.25rem;
	} 
 
  
 .el_gNavBtn {
		display: none;
	}

}


/*===========================================================
Nav Area / Global Nav （サイドメニュー）
　PC用とSP用のデザイン差が大きいので、sp専用のデザインも設定
===========================================================*/

.bl_gNav {
	letter-spacing: .024em;
	cursor: pointer;
 margin-bottom:2rem;
}

ul.cb_gNavData > li {
 position: relative;
	border-bottom:1px solid #fff;
	padding:1em;
}


ul.cb_gNavData > li:not(:has(ul)){
 padding:0;
}
ul.cb_gNavData > li:not(:has(ul)) > a {
 padding:1em;
}


/*svgアイコン*/

/*回転させるため疑似要素で挿入*/
ul.cb_gNavData > li:has(ul)::before {
 content:"";
 /*content:"";*/
 background:url("https://www.chikyu.ac.jp/rihn/files/theme/ico_chevron-down.svg") no-repeat center / 0.7em;
 position: absolute; 
 display:inline-block;
 width:10px;
 height:7px;
 top:1.5em;
 right:0.6em;

 
 transform: rotate(0);
 transition: transform 0.2s;
}

ul.cb_gNavData > li.is_opened::before { 
 transform: rotate(180deg);
 transition: transform 0.2s;
}

/*2階層目*/
ul.cb_gNavData ul {
	overflow:hidden;
 transition-duration: 0.5s;
 margin-right:-1em;
}
ul.cb_gNavData ul li {
 padding-inline:0.2rem
}

ul.cb_gNavData ul a {
 text-decoration: underline;
 display: block;
	padding: 0.4em 0 0.3em 1em;
}

ul.cb_gNavData ul li:last-child {
 padding-bottom:0.5em;
}
 ul.cb_gNavData ul li:first-child {
	padding-top:0.5em;
}




.cb_gNavData {
  interpolate-size: allow-keywords;
}

/*初期状態*/
.cb_gNavData > li:not([class]) > ul{
 height:0;
 transition: unset;
}

.cb_gNavData > li.is_opened ul{
 height:auto;
 transition: height 0.5s /*allow-discrete*/;
}

.cb_gNavData > li.is_closed ul{
 height:0;
 transition: height 0.5s /*allow-discrete*/;

}

/* 画面サイズ 767px 以下(スマホonly)
--------------------------------------------------------------- */
@media (max-width: 767px) {
 
  .ly_gNavArea {
  background: rgba(0,0,0,.9);
   	color:#fff;
   padding:0 2rem;
   position:absolute;
   width:100%;
   z-index:9999999;
   overflow: hidden;/*読み上げ大丈夫か後で検討*/
   height:0;
   transition-duration: 0.5s;

 }
 
 .ly_gNavArea > *:last-child {
  margin-bottom: 10em;
 }
 
 .bl_gNav{
  padding-top:2rem;
 }
 


.ly_gNavArea.is_opened {
 height:100vh;
 height:100dvh;
transition-duration: 0.5s;
 overflow: auto;
 -webkit-overflow-scrolling: touch;
 }

 
/*svgアイコンの色*/ 
ul.cb_gNavData > li:has(ul)::before {
 background-color:#fff;
 filter: invert(1);
}
 
 ul.cb_gNavData ul li {
 padding-bottom:0.6em;
}


 }
 

/* 画面サイズ 768px 以上に対応 (モバイル分岐を768pxと定義)
--------------------------------------------------------------- */

@media (min-width: 768px) {
	
	.bl_gNav {
		display: block;
		position:relative;
	}

ul.cb_gNavData li {
	border-color:#ccc;
}
 
 ul.cb_gNavData ul li {
	font-feature-settings: "palt" 1;
}
 

}


/*===========================================================
 bl_searchForm （検索BOX）
===========================================================*/

.bl_searchForm {
 display: grid;
 grid-template-columns: calc(100% - 2em) 2em;
 margin-bottom:2rem;
 border:1px solid;
}

.bl_searchForm input[type="search"] {
 border:none;
 padding: 0.2em 0.5em;
}

.bl_searchForm input[type="submit"]{
  border:none;
 text-indent:-9999em;
 background:url("https://www.chikyu.ac.jp/rihn/files/theme/ico_search.svg") no-repeat center;
 filter: invert(1);/*画像と背景色の両方が反転対象*/
}

/* 画面サイズ 768px 以上(PC Style)に対応
--------------------------------------------------------------- */
@media (min-width: 768px) {
 .bl_searchForm input[type="submit"]{
 filter:none;
  
 } 
}



/*===========================================================
 el_lang （英語切替）
===========================================================*/


.el_lang a {
 opacity: 1;
}
.el_lang a[aria-disabled="true"] {
 opacity: .36;
 pointer-events: none;
 cursor: default;
}


/*/////////////////////////////////////////////////////////////
■ Main
/////////////////////////////////////////////////////////////*/

.ly_main {
container-type: inline-size;/*コンテナクエリ基準*/
 position: relative;
 }


.ly_mainBody { 
position: relative;
 padding-inline:6%;
 padding-block:2em 12em;
}
.ly_mainFoot {
 position: absolute;
 bottom:0;
 left:3em;
 right:0;
}


.ly_mainBody > *:first-child,
.ly_editArea > *:first-child {
 margin-top:0;
}

.ly_editArea :is(ol,ul){
 padding-left:1.6em;
 margin-block:2.4em;
}


.ly_editArea :is(ol,ul) :is(ol,ul){
margin-block:0;
}



/*html直書き部分で、影響がある部分に対する修正*/


.ly_mainBody .bl_outline :is(ol,ul) {
  margin-block:0;
}

.ly_editArea .bl_outline li {
 margin-block:0;
}

/*その他*/

.ly_editArea {
overflow-y:auto;/* 内包するGridやFlexboxのスクロールを許可する*/
}

.ly_editArea:has(.cb_stickyBox) {
 overflow:unset;
 }


.ly_sec {
 margin-bottom:6em;
}

.ly_sec > *:last-child {
 margin-bottom:0;
}

.ex_wbr {
  display: inline-block;
}

.ex_taR {
 text-aligh:right !important;
}
.ex_mR1em {
 margin-right:1em;
}
.ex_mL1em {
 margin-left:1em;
}


/* 画面サイズ 768px 以上 (PC)
--------------------------------------------------------------- */

:root {
 /*
--main-left-padding: 2%;*/
 --main-left-padding: 3%;
 
 
}

@media (min-width: 768px) { 
 
.ly_main {
 padding-left:var(--main-left-padding);/*追加*/
 }
 
 
 .ly_mainHead:has(img) {
  /*background:#fafafa;*/
}
 
  .home .ly_mainHead {
  background:#fafafa;
}
 
 
 /*
 .ly_mainBody,.ly_mainFoot {
 max-width:1200px;
 margin-inline:auto;
 padding-inline:0 2rem; 
}*/
 
 .ly_mainBody {
  padding-inline:0 8%;
  max-width:1200px;
  margin-inline:auto;
  padding-top:4em;
 }

 
 .ly_mainFoot {
  padding-inline:0 8%;
   max-width:1200px;
  margin-inline:auto;
   left:4%;
 }
 
.ex_spOnly {
  display: none;
}
 
 .el_pageTopLinkBox {
 text-align: right;

}
 
}

@media (min-width: 1700px){
 
  .ly_mainBody,.ly_mainFoot {
 padding-inline:0 0rem;
}
 
 
 .ly_main:not(.home) {
  margin-right:14%;
 }
 
 
}




/* 画面サイズ 2000px 以上に対応
-------------------------------------------------------------- */
@media (min-width: 2000px) {
 
 .ly_mainFoot {
 padding-inline:0 4rem;
}
}


/*/////////////////////////////////////////////////////////////
■ Footer
-----------------------------------------------------------
　PC用とSP用のデザイン差が大きいので、sp専用のデザインも設定
/////////////////////////////////////////////////////////////*/

.ly_footer {
 border-top:2px solid #000;
 font-feature-settings: "palt";
}

.ly_footer a {
 text-decoration: none;
}

.bl_ftSubNavWrap {
 padding:0.8em 6%;
 border-bottom:1px solid #ccc;

}

ul.bl_ftSubNav {

 display: flex;
 width:100%;
 flex-wrap: wrap;
 max-width:calc(1474px + 8%);/*1474はRIHNのサイトより*/
 margin-inline:auto;

}

.bl_ftSubNav_item {
 list-style: none;
  background: url("https://www.chikyu.ac.jp/rihn/files/theme/ico_chevron-right.svg") no-repeat left center / auto 0.4em;
 padding-inline:1em 2.5em;
 margin-block:0.6em;
 width:50%;
}

.ly_ftMain {
 position:relative;
  display:grid;
 grid-template-columns: 1fr;
 gap:0;
 padding-top:4em;
 padding-inline:4% 1%;
  margin-bottom:5em;
  max-width:calc(1474px + 5%);
 margin-inline:auto ;

}

.ly_ftAddArea {
 text-align: center;
 max-width:480px;
 margin-inline:auto;
 display: grid;
 gap:1.6em 1em;
  justify-items: center;
}


.el_ftLogo {
 width:100%;
 max-width:320px;
}

.ly_ftAddArea :is(.el_add, .el_tel) {
 margin-bottom:0.5em;
}

.ly_ftAddArea .el_btnWrap {
 width:100%;
}
.ly_ftAddArea .el_linkBtn-bk {
 min-height:3em;
  padding-inline:0.1em;
 font-feature-settings: "palt" 1;
 white-space: nowrap;
}

.bl_ftSNSlink {
 display: flex;
 list-style: none;
 column-gap: 7%;
 justify-content: space-between;
 max-width: 500px;
 margin-inline: auto;
 margin-bottom:3em;
}
.bl_ftSNSlink_item a::after {
  display: none; 
}

.el_trans {
 display: block;
  border:1px solid #000;
 border-radius: 1000px;
 text-align: center;
 padding:1em 1em 0.9em;
 line-height: 1;
 text-decoration: none;
 margin-inline:auto;
}
.el_trans::after {
 display: none;
}


.el_copy {
 text-align: center;
 margin-block:5em 2em;
 font-size: 0.78em;
}





.ly_ftNavArea {

}


.bl_ftNav {
position: relative;
  display: none; 
 
}

.cb_ftNav {

}

.cb_ftNavData li {
 list-style: none;
 
}



/* 画面サイズ 767px 以下(スマホonly)
--------------------------------------------------------------- */
@media (max-width: 767px) {
 
 /*
 
.ly_ftAddArea :is(.el_btnWrap, .bl_ftSNSlink){
 max-width:300px;
 margin-inline:auto;

}
 */
 
 .ly_ftMain {
 padding-inline:6%;
}

 
}




/* 画面サイズ 768px 以上 (PC)
--------------------------------------------------------------- */
@media (min-width: 768px) {
 
  ul.bl_ftSubNav {
  width:auto;
  justify-content: flex-end;
}
 .bl_ftSubNav_item {
  width:auto;
 }
 
 
 .ly_ftMain {
  grid-template-columns: 25% 1fr;
  gap:8%;

}
 
 .ly_ftAddArea {
  /*padding-left:1em;*/
  /*
   width:30%;
  max-width:20em;
  */
 }
 
 
 .ly_ftAddArea p {
 text-align: left;
}
 
 .bl_ftSNSlink {
  margin-bottom: 0;
 }
 
 
  .bl_ftNav {
  display: grid;
  grid-template-columns: repeat( 4 , 1fr);
   gap:4%;
 }
 
 .cb_ftNavData > li {
  font-weight: 600;
  margin-bottom:2.4em;
  font-size:1.1em;
 }
 .cb_ftNavData ul {
  margin-top:1em;
 } 
 
 .cb_ftNavData > li li {
  font-weight: 400;
  background: url("https://www.chikyu.ac.jp/rihn/files/theme/ico_chevron-right.svg") no-repeat left 0.42em / auto 0.5em;
  padding-left:1em;
  margin-block:0.4em;
  font-size:0.9em;
  
  
 }
 
 .cb_ftNavData > li::before {
  content:"";
  border-left:0.2em solid #000;
  padding-left:1em; 
 }
 
 
 .el_trans {
  position: absolute;
  bottom:0;
  right:4%;
}
 
 .el_copy {
 text-align: left;
 margin:0 0 2em 4%;

 
}
 

}

/* 画面サイズ 2000px 以上に対応（必要に応じPCの最大サイズを設定する）
-------------------------------------------------------------- */
@media (min-width: 2000px) {
}