@charset "utf-8";

/* --------------------------------------------


トップページ


---------------------------------------------- */


/* --------------------------------------------

mainV

---------------------------------------------- */
.mainV {
 position: relative;
 height: 890px;
 height: 58vw;
 min-height: 700px;
}

.mainV_image {
 width: 71.7%;
 height: 740px;
 height: 84%;
 margin: 0 0 0 auto;
 border-radius: 0 0 0 10px;
 overflow: hidden;
}

.mainV_image img {
 object-fit: cover;
 height: 100%;
}

.mainV_text {
 position: absolute;
 top: 36.7%;
 left: 5%;
 width: 19.7%;
 min-width: 230px;
}

.mainV_text figure {
 margin: 0 0 16%;
}

@media only screen and (max-width:640px) {
 .mainV {
  min-height: 180vw;
 }

 .mainV_image {
  height: 55%;
 }

 .mainV_image img {}

 .mainV_text {
  top: 60%;
  left: 5%;
  min-width: 480px;
 }

 .mainV_text figure {
  margin: 0 0 8%;
 }

 .mainV_text figure:nth-of-type(1) {
  width: 86%;
 }

}





.bg-green {
 align-items: stretch;
 padding: 128px 4.4%;
 background: rgb(0, 125, 127);
 background: linear-gradient(-60deg, rgba(0, 125, 127, 1) 19%, rgba(33, 174, 161, 1) 100%);

}

@media only screen and (max-width:640px) {
 .bg-green {
  padding: 128px 8%;
 }
}

/* --------------------------------------------

コンテンツ

---------------------------------------------- */
.introWrap {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 align-items: center;
 align-content: center;
 width: 42.5%;
 padding-bottom: 12px;
 background-color: #fff;
 border-radius: 10px;
 box-shadow: 0 0 12px rgba(47, 79, 73, 0.5);
}

.introWrap h2 {
 padding-bottom: 12px;
 margin-bottom: 48px;
 text-align: center;
 font-size: 1.8rem;
 letter-spacing: 0.12em;
 line-height: 2;
 color: #009693;
 border-bottom: 2px solid #009693;
}

.introWrap p {
 width: 100%;
 text-align: center;
 font-size: 2.4rem;
 letter-spacing: 0.12em;
 line-height: 2.35;
}

@media only screen and (max-width:640px) {
 .introWrap {
  width: 100%;
  padding: 64px 0;
 }

 .introWrap h2 {
  padding-bottom: 12px;
  margin-bottom: 48px;
  font-size: 1.8rem;
 }

 .introWrap p {
  font-size: 2.0rem;
 }
}




/* --------------------------------------------

コンテンツ

---------------------------------------------- */
.menuWrap {
 width: 57.5%;
}

.menu_item {
 width: calc(50% - 24px);
 margin-left: 24px;
 background-color: #fff;
 border-radius: 10px;
 box-shadow: 0 0 12px rgba(47, 79, 73, 0.5);
}

.menu_item:nth-of-type(1),
.menu_item:nth-of-type(2) {
 margin-bottom: 24px;
}

.menu_item a {
 display: block;
 text-align: center;
 padding: 0px 0 32px;
}

.menu_item figure {
 width: 100px;
 margin: 32px auto 12px;
}

.menu_item_name {
 margin: 0 0 32px;
 text-align: center;
 line-height: 1.4;
 letter-spacing: 0.12em;
 font-size: 2.4rem;
}

.menu_item_name .ff-en {
 font-size: 1.3rem;
 letter-spacing: 0.1em;
 color: #A8AAAA;
}

.menu_item .btn {}

@media only screen and (max-width:640px) {
 .menuWrap {
  width: 100%;
 }

 .menu_item {
  width: calc(50% - 12px);
  margin: 24px 0 0 0;
 }

 .menu_item:nth-of-type(1),
 .menu_item:nth-of-type(2) {
  margin: 24px 0 0 0;
 }

 .menu_item a {
  padding: 12px 0 32px;
 }

 .menu_item figure {}

 .menu_item_name {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  height: 4em;
  margin: 0 0 24px;
  font-size: 2rem;
  line-height: 1.2;
 }

 .menu_item_name .ff-en {
  width: 100%;
  margin-top: 12px;
  text-align: center;
  font-size: 1.1rem;
 }
}




/* --------------------------------------------

コンテンツ

---------------------------------------------- */
.topicWrap {
 align-items: center;
 align-content: center;
}

.topic_header {
 width: 26.5%;
 text-align: center;
}

.topic_header h2 {
 margin-bottom: 32px;
 text-align: center;
}

.topic_header h2 .ff-en {
 font-size: 4rem;
}

.topic_header em {}

.topic_list {
 width: 73.5%;
 min-height: 340px;
 background: #fff;
}

.topic_list ul {
 margin: 64px 7%;
}

.topic_item {
 position: relative;
 justify-content: flex-start;
 align-items: center;
 flex-wrap: wrap;
 padding: 24px;
}

.topic_item:not(:nth-last-of-type(1)) {
 border-bottom: 1px solid #BFBEBE;
}

.topic_date {
 width: 100px;
 font-size: 1.6rem;
 color: #828282;
}

.topic_cat {
 display: inline-block;
 width: 96px;
 text-align: center;
 margin-right: 16px;
 font-size: 1.4rem;
 line-height: 2;
 color: #fff;
 background-color: #70AAD6;
}

.topic_cat.お知らせ {
 background-color: #70AAD6;
}

.topic_cat.イベント {
 background-color: #61BEBC;
}

.topic_item a {
 display: block;
 width: calc(100% - 212px);
}

.topic_title {
 width: 100%;
 padding-right: 48px;
 font-size: 1.8rem;
 display: block;
}

.topic_title::after {
 content: "";
 position: absolute;
 top: calc(50% - 12px);
 right: 24px;
 display: inline-block;
 width: 24px;
 height: 24px;
 background-image: url(/graduate/human-m/diversity/_image/common/icon-arrow.svg);
}

@media only screen and (max-width:640px) {
 .topicWrap {
  position: relative;
  padding: 96px 0 0px;
 }

 .topic_header {
  width: 100%;
 }

 .topic_header h2 {
  margin-bottom: 64px;
 }

 .topic_header h2 .ff-en {
  font-size: 4rem;
 }

 .topic_header em {}

 .topic_header .btn {
  position: absolute;
  left: calc(100% - 520px);
  bottom: 96px;
 }

 .topic_list {
  width: 100%;
  padding-bottom: 160px;
 }

 .topic_item {
  padding: 32px 24px;
 }

 .topic_item:not(:nth-last-of-type(1)) {}

 .topic_date {
  width: 160px;
 }

 .topic_cat {
  width: 160px;
 }

 .topic_item a {
  width: calc(100%);
 }

 .topic_title {
  padding: 16px 64px 0 0;
  font-size: 1.6rem;
 }

 .topic_title::after {
  top: calc(50% - 16px);
  width: 32px;
  height: 32px;
 }
}




/* --------------------------------------------

コンテンツ

---------------------------------------------- */

@media only screen and (max-width:640px) {}




/* --------------------------------------------

コンテンツ

---------------------------------------------- */

@media only screen and (max-width:640px) {}




/* --------------------------------------------

コンテンツ

---------------------------------------------- */

@media only screen and (max-width:640px) {}
