@charset "utf-8";

/*
■ 
======================================== */


h2.el_ttlMin {
 font-family: var(--mincho);
 font-size:calc(24em / 16);
 
}
p {
 margin-bottom:1em;
}




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

.ly_side {
 z-index:1;
}
.ly_sideInner {
 height:fit-content;
 max-height: 100vh;

}
.ly_main {
 z-index:0;
}

@media (min-width: 768px) {
 .ly_sideInner{
   overflow-y: auto;
 }
 
}


/*/////////////////////////////////////////////////////////////
■ スライダー下 BUTTON
/////////////////////////////////////////////////////////////*/

.bl_topBtn {
 display: grid;
 gap:2em;
 grid-template-columns: repeat(2, 1fr); 
}

.bl_topBtn a {
 display: grid;
 text-align: center;
 align-items: center;
 padding-block:1em;
 min-height: 6em;
 text-decoration: none;
 font-weight: 600;
}

.bl_topBtn a:first-child {
 background:#000;
 color:#fff;
}
.bl_topBtn a:last-child {
 background:#eee;
}

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

a.el_linkBtn-gr{
 background-color:#eee;
 color:#000; 
 width:80%; 
}

/*/////////////////////////////////////////////////////////////
■ section
/////////////////////////////////////////////////////////////*/
.ly_mainHead {
}

/* TOP ページは mainBody を無くす*/
.sec_normal {
 max-width: calc(1200px + 7%);
 margin-inline:auto;
 margin-block:4em;
 padding-inline:4%; 
}

.ly_fullBgInner {
 background:rgba(255,255,255,1);
 padding:3em 4% 2.4em 4%;
}

.sec_normal p,
.ly_fullBgInner p {
 margin-block:2.4em;
}




:is(.sec_normal, .ly_fullBgInner) .bl_articleList {
 margin-bottom:0;
}

:is(.sec_normal, .ly_fullBgInner) .bl_articleList_item:not(:last-child){
  margin-bottom: 1em;
}

:is(.sec_normal, .ly_fullBgInner) .bl_articleList_item:last-child{
  border-bottom: none;
}

:is(.sec_normal, .ly_fullBgInner) .bl_articleList_item dt {
margin-bottom: 0.3em;
 
}


.ly_fullBgInner.st_noBg {
 background: transparent;
}

.ly_fullBg::before { 
 content:"";
 position: absolute;
/* background:#ecf0f6; 各セクションの ::before に指定 */
 inset:0;
 display: block; 
 /*left: calc(-1 * (var(--sidebar-width) + var(--sidebar-gap)));
 width: calc(100% + var(--sidebar-width) + var(--sidebar-gap));*/
 left: calc(-1 * (var(--sidebar-width) + var(--main-left-padding)));
 width: calc(100% + var(--sidebar-width) + var(--main-left-padding));  

 z-index:-1;  
 
}


.sec_youtube {
 padding-inline:0;
}



/* 画面サイズ 768px 以上に対応
--------------------------------------------------------------- */
@media (min-width: 768px) {
 
 .sec_normal, .sec_youtube {
 padding-inline:2% 5%;
}
 
.ly_fullBg {
 padding-right:3%; 
}
 
 .ly_fullBgInner {
   max-width:calc(1200px + 4%);
  margin-inline:auto;
  padding:3em 2% 2.4em 2%;
 }
 
 
}


/*/////////////////////////////////////////////////////////////
■ フルサイズセクション
/////////////////////////////////////////////////////////////*/

.sec_topNews {
 position: relative;
padding-bottom:8em;
 border-top:1px solid #000;
}
.sec_topNews::before {
  background:linear-gradient(to bottom, rgba(236, 240, 246, 0) 53%, #ecf0f6 53%);
}

.sec_topEvent {
 position: relative;
 padding-block:12em 4em;
 margin-bottom:6em;
}


.sec_topEvent::before {
 background:#ecf0f6 url(https://www.chikyu.ac.jp/rihn/files/theme/bgEvent.jpg) no-repeat center top;
 background-size: 100%;
}


.sec_flowSlider {
 position: relative;
 
 /*left: calc(-1 * (var(--sidebar-width) + var(--sidebar-gap)));
 width: calc(100% + var(--sidebar-width) + var(--sidebar-gap));*/
 /* left: calc(-1 * (var(--sidebar-width) + var(--sidebar-gap)));
 width: calc(100% + var(--sidebar-width) + var(--sidebar-gap));*/
 
  /*left: calc(-1 * (var(--sidebar-width) + var(--main-left-padding)));*/

 width:100%; 
 margin-top:4em;
}


.sec_recruit {
 margin-block:5em 2.4em;
}


.sec_youtube .bl_zoomHover {
 aspect-retio: 1332 / 509;
 
}

.bl_zoomHover .ly_youtubeCh_logo {
 width:30%;
 max-width:200px;
 margin-bottom: 0.9em;
}

.sec_youtube .bl_zoomHover_txtArea {
  font-size: calc(28em / 16);
  font-size:clamp(20px, 3cqw, 28px);
}
.sec_youtube .bl_zoomHover_subTxt {
  font-size: calc(18em / 16);
  font-size:clamp(14px, 2.2cqw, 20px);
  margin-top:0.5em;
}





@media (any-hover:hover){
 
 .ex_zoomHover {
  overflow: hidden;
 }
 
 .ex_zoomHover img:not(.ly_youtubeCh_logo) {
  transition: transform 1.5s cubic-bezier(0.25, 1, 0.5, 1);
  object-fit: cover;
    } 
 .ex_zoomHover:hover img:not(.ly_youtubeCh_logo) {
  transform: scale(1.1);
 }
}





/* 画面サイズ 768px 以上に対応
--------------------------------------------------------------- */
@media (min-width: 768px) {
 
 
.sec_flowSlider {
 position: relative;
 grid-column: 1 / -1;
 /*left: calc(-1 * (var(--sidebar-width) + var(--sidebar-gap)));
 width: calc(100% + var(--sidebar-width) + var(--sidebar-gap));*/
 /* left: calc(-1 * (var(--sidebar-width) + var(--sidebar-gap)));
 width: calc(100% + var(--sidebar-width) + var(--sidebar-gap));*/
 
  left: calc(-1 * (var(--sidebar-width) + var(--main-left-padding)));
 width: calc(100% + var(--sidebar-width) + var(--main-left-padding)); 

}

 
}

.sec_books {
 position: relative;
 /*padding:0 1em 4em;*/
 margin-block:6em 6em;
 padding-bottom:3em;
}
.sec_books::before {
 background: #ecf0f6;
}

.sec_books .ly_bookListArea {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
  gap:2em;
 justify-items:center;

}
.sec_books .ly_bookListArea a {
 display:block;
text-align: center;

}
.sec_books .ly_bookListArea img { 
 object-fit: contain;
    max-height: 220px;
}


.sec_books .ly_bookListArea figure {
 margin:0;
}


.sec_banExternal h2 {
 margin-bottom:1.5em;
}


.sec_normal.ly_colWrap-col2 .bl_zoomHover_txtArea {
 margin-top:2em;
}




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

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


.ly_mainFoot {
 padding-block:1em;
}



/*/////////////////////////////////////////////////////////////
■ Slide
/////////////////////////////////////////////////////////////*/
.ly_mainHead {
  margin-bottom:3em;
 overflow:hidden;
}

#mainSlide  {
 position:relative;
 max-width:1200px;
 /* max-width: calc(1200px + 7%);*/
 max-width:1270px;
 margin:0 auto;
/* padding:0 10em;*/ 
}

#mainSlide .swiper {
 overflow:visible;
}

#mainSlide .swiper-wrapper {
 position:relative;
width:100%;
 height:100%;
}


#mainSlide .swiper-slide:not(.swiper-slide-visible) {
    pointer-events: none;
    opacity: 0.3;
  }
#mainSlide .swiper-slide {
    transition:0.8s cubic-bezier(.2, 1, .2, 1), opacity 1s;
 overflow: hidden;
  }
#mainSlide .swiper-slide img {
 object-fit: cover;
 aspect-ratio:2127 / 2269; 
 width:100%; 
 
}


#mainSlide .bl_mainSlide_cap {
 display: block;
 position:absolute;
 width:fit-content;
 max-width:36%;
 min-width:20rem;
 left:0;
 bottom:3rem;
 background:rgba(255,255,255,0.9);
  text-decration:none;
 /*font-feature-settings: "palt" 1;*/
 color:#000;
}

a.bl_mainSlide_cap:link {
 text-decoration: none;

} 

.bl_mainSlide_ttl {
 font-family: var(--mincho);
 font-size:calc(20em / 16);
 border-bottom:1px solid #000;
 padding: 1.5em 1.5em 0.4rem 1.6rem;
 margin-bottom:0.7rem;
 margin-right:1.5em;
 background: url("https://www.chikyu.ac.jp/rihn/files/theme/ico_chevron-right.svg") no-repeat right 1.5em / auto 0.6em;
 
}
.bl_mainSlide_cap p {
  margin-bottom:0.5em;
  margin-right:2em;
 margin-left:1.6rem;
  font-size:calc(14em / 16); 
 line-height: 1.75;
}

.bl_mainSlide_cap p:last-child {
 margin-bottom:2.4em;
} 

#mainSlide .swiper-button-prev,
#mainSlide .swiper-button-next,
#mainSlide button.swiper-toggle {
 font-size:1em;
 position: absolute;
 background-color:rgba(0,0,0,0.9);
 color:#fff;
 z-index:1;
 bottom:0;
 width:2.8em;
 height:2.8em;
 display: table-cell;
 text-align: center;
 cursor: pointer;
 
 svg {
  transform: translateY(-50%);
  margin-top:50%;
  width:0.5em;
 }
}

#mainSlide .swiper-button-prev{
 right:5.1em;
  transform:rotate(180deg);
}
#mainSlide .swiper-button-next {
 right:0;
}

#mainSlide button.swiper-toggle {
  width:2em;
 right: 2.9em;
 border: 0;
 line-height:1;
 
 
 /*   position: absolute;
    bottom: 0;
    z-index: 999;
    background: #000;
    color: #fff;
    
    height: 3em;
width:3em;
    */
}

#mainSlide .swiper-pagination {
 position:absolute;
 display: flex;
 gap: 1rem 0.6rem;
 top:2rem;
 right:2rem;
 z-index:999;
  /* mix-blend-mode: difference;*/

}

#mainSlide .swiper-pagination-bullet {
    width: 0.6rem;
    height:0.6rem;
    border-radius: 50%;
    cursor: pointer;
    vertical-align: top;
    background-color:#fff;
   opacity:.6;

  }
#mainSlide .swiper-pagination-bullet-active {
 opacity:1;
  }


#flowSlide .swiper-wrapper {
    transition-timing-function: linear;
}

#flowSlide .swiper-slide {
 /*width:auto;*/
 width: 200px;
}

#flowSlide .swiper-slide img {
 /*height:180px;*/
}


/*
#flowSlide .swiper-slide img {
 max-height:180px;
}
*/



/* 画面サイズ 767px 以下に対応 sp
--------------------------------------------------------------- */

@media (max-width: 767px) {
 #mainSlide .swiper-slide img {
  object-fit: contain;
  object-position: center 8%;
 }
 .bl_mainSlide_cap p {
 line-height: 1.4;
}

}

/* 画面サイズ 768px 以上に対応 PC
--------------------------------------------------------------- */
@media (min-width: 768px) {
 
 
 #mainSlide .swiper-slide img {
  aspect-ratio:2442 / 1510;

 }
 
#flowSlide .swiper-slide {
width:26em;

 
}

 
 
 
}

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






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

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