@charset "utf-8";
/* CSS Document */

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

top

====================== */
/*--------- スライダー-----------*/
.top-slider {
  width: 100%;
  display: flex;
  align-items: center;
  position: relative;
}
.top-slider::after {
  content: '';
  position: absolute;
  bottom: 0;
  background: linear-gradient(to top,rgba(0,22,62,.7) 0, rgba(0,22,62,0) 100%);
  width: 100%;
  height: 160px;
  z-index: 3;
}
.top-slider p {
  font-size: calc(3.2rem + ((1vw - (960 / 100 * 0.1rem)) * 100 * (42 - 32) / (1366 - 960)));
  font-weight: bold;
  text-align: center;
  color: #fff;
  position: absolute;
  bottom: .25em;
  z-index: 5;
  text-shadow: 0 0 20px rgba(0,22,62,.7);
  width: 100%;
  line-height: 1.2;
}
@media screen and (min-width: 1366px){
.top-slider p {
  font-size: 4.2rem;
  }
}
@media screen and (max-width: 959px){
.top-slider::after {
  height: 60px;
}
.top-slider p {
  font-size: 2.4rem;
   bottom: .5em;
 }
}
.swiper-container {
  position: initial;
}
.swiper-button-disabled {
  pointer-events: none;
  opacity: 0;
}
.top-slider img {
  width: 100%;
}
.swiper-container .swiper-wrapper{
    transition-timing-function: linear;
}
.swiper-container:not(.swiper-initialized) .swiper-wrapper {
  display: grid;
  grid-template-columns: repeat(1.75, 1fr);
  gap: 0;
  }
.swiper-container:not(.swiper-initialized) {
    padding: 0;
  }
  [class*=swiper]:focus {
    outline: none;
  }
@media screen and (max-width: 959px) {
.swiper-container:not(.swiper-initialized) .swiper-wrapper {
      grid-template-columns: repeat(1, 1fr);
    }
.top-slider {
}
.top-slider .carousel.row {
}
}

/*--------- コンテンツ-----------*/
.wrap-top01 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 1050px;
  padding: 60px 0;
}
.facebook-wrapper,
.wrap-top01 section {
  max-width: 500px;
  width: calc(50% - 25px);
}
.facebook-wrapper > .fb-page {
    width: 100%;
}
.facebook-wrapper > .fb-page > span,
.facebook-wrapper iframe {
    width: 100% !important;
}
.nav-top01 h2 {
  background: no-repeat center url(/e/common/img/top_nav_bg.jpg);
  background-size: cover;
  color: #fff;
  font-size: 3.2rem;
  font-weight: bold;
  line-height: 1.2;
  text-align: center;
  padding: .75em .5em;
}
.nav-top01 h2 span {
  display: block;
  font-weight: normal;
  font-size: 1.5rem;
}
.nav-top01 li a {
  font-size: 1.5rem;
  background: #e7eefb;
  color: #0046c7;
  display: flex;
  align-items: center;
  margin-bottom: 1px;
  min-height: 48px;
  padding: .5em 2em .5em 1em;
  position: relative;
  z-index: 1;
}
.nav-top01 li a:hover {
  padding-left: 2em;
}
.nav-top01 li a::after {
  content: '';
  margin: auto;
  position: absolute;
  right: 1em;
  bottom: 50%;
  top: 50%;
  width: .6em;
  height: .6em;
  border-top: 1px solid #0046c7;
  border-right: 1px solid #0046c7;
  transform: rotate(45deg);
  transition: all 0.3s;
}
.nav-top01 li a::before {
  content: '';
  background: #fff;
  display: block;
  width: 0;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.3s;
  z-index: -1;
}
.nav-top01 li a:hover::before {
  width: 100%;
}

/*--------- バナー-----------*/
.wrap-top-banner {
  position: relative;
  padding: 80px 0;
}
.wrap-top-banner::before {
  content: '';
  background: no-repeat url(/e/common/img/top_banner_bg.jpg) center;
  background-size: cover;
  display: block;
  height: calc(100% + 30px);
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.wrap-top-banner::after {
  content: '';
  backdrop-filter: blur(4px);
  background: rgba(0,70,199,.6);
  display: block;
  height: calc(100% + 30px);
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.wrap-top-banner ul {
  display: flex;
  flex-wrap: wrap;
  max-width: 1000px;
  gap: 20px 20px;
  position: relative;
  z-index: 1;
}
.wrap-top-banner ul li {
    width: calc((100% - 40px) / 3);
}
.wrap-top-banner a:hover img {
  opacity: .8;
}
@media screen and (max-width: 959px) {
  .wrap-top01 {
    display: block;
    padding: 0;
  }
  .facebook-wrapper,
.wrap-top01 section {
  width: 100%;
  margin: 40px auto;
}
  .wrap-top-banner {
    padding: 40px 0;
  }
}
@media screen and (max-width: 767px) {
.wrap-top-banner ul {
  display: flex;
  flex-wrap: wrap;
  max-width: 1000px;
  gap: 10px 10px;
}
  .wrap-top-banner ul li {
    width: calc((100% - 10px) / 2);
}
}

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

International Activities

====================== */
.wrap-activities {
  display: flex;
  justify-content: space-between;
}
.wrap-activities:nth-child(odd) {
  flex-direction: row-reverse;
}
.wrap-activities:nth-child(even) {
  background: #e7eefb;
}
.wrap-activities {
  padding: 60px 50px;
}
.wrap-activities section {
  width: 60%;
  max-width: 660px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.wrap-activities figure {
  border: 1px solid #ddd;
  background: #fff;
  max-width: 400px;
  width: 37%;
  margin-top: auto;
  margin-bottom: auto;
}
.wrap-activities.vertical section {
  width: 70%;
  max-width: 770px;
}
.wrap-activities.vertical figure {
  max-width: 260px;
  margin-right: 20px;
  width: 25%;
}
.wrap-activities.no-img section {
  max-width: 100%;
  width: 100%;
}
@media screen and (max-width: 959px) {
  .wrap-activities {
    flex-direction: column !important;
    justify-content: center;
    padding: 40px 1em;
    align-items: center;
  }
  .wrap-activities section,
  .wrap-activities.vertical section,
  .wrap-activities.no-img section {
    width: 100%;
    max-width: 660px;
    margin-bottom: 1em;
  }
.wrap-activities figure,
.wrap-activities.vertical figure {
  max-width: 480px;
  width: 100%;
  margin-right: 0;
  }
  .wrap-activities.vertical figure {
    max-width: 220px;
  }
}

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

profile

====================== */
.wrap-profile-member li {
    display: flex;
    max-width: 17em;
    justify-content: space-between;
}
.wrap-list-profile {
  display: flex;
  flex-wrap: wrap;
}
.wrap-list-profile dt {
  display: flex;
  width: 20%;
  font-weight: bold;
  padding: 1em;
  border-bottom: 2px solid #fff;
  background: #ccdaf4
}
.wrap-list-profile dd {
  display: flex;
  width: 80%;
  padding: 1em;
  border-bottom: 2px solid #fff;
  background: #e7eefb;
}
.wrap-list-profile dd span {
  margin-right: .5em;
}
.wrap-chairperson {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  width: 100%;
}
.wrap-chairperson figure {
  max-width: 200px;
  margin-right: 2em;
  width: 50%;
}
@media screen and (max-width: 959px) {
  .wrap-list-profile {
    display: block;
  }
  .wrap-list-profile dt {
    width: 100%;
    border-bottom: none;
    padding: .5em 1em;
  }
    .wrap-list-profile dd {
    width: 100%;
    border-bottom: none;
  }
.wrap-list-profile dd span {
  display: block;
}
.wrap-chairperson p {
  width: 60%;
}
.wrap-chairperson figure {
  margin-right: 1em;
  width: calc(40% - 1em);
}
}

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

access

====================== */
.wrap-list-access {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
}
.wrap-list-access dl {
  display: flex;
  flex-wrap: wrap;
}
.wrap-list-access dl dt,
.wrap-list-access dl dd {
  padding: 0.5em 1em;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  margin-top: -1px;
}
.wrap-list-access dl dt {
  font-weight: bold;
  width: 20%;
}
.wrap-list-access dl dd {
  width: 80%;
}
.wrap-list-access dl,
.wrap-list-access figure {
  width: 48%;
  margin-top: 2em;
}
@media screen and (max-width: 960px) {
  .wrap-list-access {
    display: block;
  }
.wrap-list-access dl dt,
.wrap-list-access dl dd {
  width: 100%;
  margin-top: 0;
}
  .wrap-list-access dl dt {
  background: #eee;
  border: none;
  padding: 0.5em;
  }
.wrap-list-access dl dd {
  border: none;
  padding: 0.5em;
  padding-bottom: 1.5em;
  }
.wrap-list-access dl,
.wrap-list-access figure {
  max-width: 640px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

}


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

mission

====================== */
.wrap-mission01 {
  display: flex;
  justify-content: space-between;
}
.wrap-mission01 div {
  width: 60%;
}
.wrap-mission01 figure {
  width: 35%;
}
.wrap-img-mission01 {
  max-width: 320px;
  width: 100%;
  border: 1px solid #ccc;
  display: block;
}
.wrap-img-mission01:hover {
  border: 1px solid #0046c7;
}
.wrap-img-mission01:hover img {
  opacity: .8;
}
@media screen and (max-width: 960px) {
  .wrap-mission01 {
    display: block;
  }
  .wrap-mission01 div,
  .wrap-mission01 figure {
  width: 100%;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}
  .wrap-mission01 figure {
    margin-top: 2em;
  }
}


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

affiliation

====================== */
.wrap-list-area {
  display: flex;
  flex-wrap: wrap;
}
.wrap-list-area dt,
.wrap-list-area dd {
  padding: 0.5em 1em;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  margin-top: -1px;
}
.wrap-list-area dt {
  font-weight: bold;
  width: 15%;
}
.wrap-list-area dd {
  width: 85%;
}
@media screen and (max-width: 960px) {
.wrap-list-area dt,
.wrap-list-area dd {
  width: 100%;
  margin-top: 0;
}
  .wrap-list-area dt {
  background: #eee;
  border: none;
  padding: 0.5em;
  }
.wrap-list-area dd {
  border: none;
  padding: 0.5em;
  padding-bottom: 1.5em;
  }

}

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

emagazine

====================== */
.col-btn-emagazine a {
  padding: 2vw;
  background: #0046c7;
  color: #fff;
  display: block;
  font-size: 2.4rem;
  font-weight: bold;
  line-height: 1.3;
  position: relative;
}
.col-btn-emagazine a::before {
  content: '';
  width: 0;
  height: 100%;
  background: #02C0AA;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.3s;
}
.col-btn-emagazine a:hover::before {
  content: '';
  width: 100%;
}

.col-btn-emagazine a p {
  position: relative;
  padding-right: 2em
}
.col-btn-emagazine a p::after {
  content: '';
  margin: auto;
  position: absolute;
  right: .5em;
  bottom: 50%;
  top: 50%;
  width: 1em;
  height: 1em;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  transition: all 0.3s;
}
.col-btn-emagazine a:hover p::after {
}
  .wrap-img-emagazine {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1em;
    position: relative;
}
.wrap-img-emagazine img {
  width: calc((100% - 8px) / 3);
}
.list-emagazine {
  display: flex;
  flex-wrap: wrap;
  gap: .5em 3em;
}
.list-emagazine li {
  width: calc((100% - 6em) / 3);
}
.list-emagazine li a {
  width: 100%;
  height: 100%;
  justify-content: flex-start;
}
@media screen and (max-width: 960px) {
.col-btn-emagazine a {
  font-size: 1.8rem;
  }
.list-emagazine li {
  width: calc((100% - 3em) / 2);
}
}
@media screen and (max-width: 767px) {
  .list-emagazine li {
    width: 100%;
  }
}

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

membership

====================== */
.table-membership {
  max-width: 1000px;
  margin: auto;
}
.table-membership th,
.table-membership td {
  border: 1px solid #ccc;
  text-align: center;
}
.table-membership td:first-child {
  background: #eee;
}
.bg-membership01 {
  background: #ccdaf4;
}
.bg-membership02 {
  background: #b3ece4;
}
.bg-membership03 {
  background: #ffd1b2;
}

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

contact

====================== */
.wrap-btn {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1em;
  font-size: 2rem;
}
.wrap-btn .link-btn {
  max-width: 320px;
  width: 100%;
  margin: 1em .5em 0 .5em;
  padding: .4em 1em .4em 1em !important;
}
.g-recaptcha > div {
	margin: 2em auto 0;
}
@media screen and (max-width: 959px) {
  .wrap-btn {
    font-size: 1.6rem;
  }
}