@charset "UTF-8";
/*
/*VARIABLES
-------------------------------------------*/
/*
GENERAL STYLING
================================================ */
html {
  font-size: 62.5%;
}
body {
  font-size: 1.6rem;
  color: var(--black);
  font-family: var(--NotoSans-font);
  text-size-adjust: none;
  -webkit-text-size-adjust: 100%;
}
section {
  position: relative;
}
img {
  max-width: 100%;
}
a {
  text-decoration: none;
  color: inherit;
}
.dep-top-container {
  padding: 150px 4% 0;
  color: var(--white);
}
/* CSS Document */
.dep h2 {
  margin-bottom: 2rem;
}
.dep section {
  padding: 3rem 0 0;
}
.dep-top {
  width: 100%;
  min-height: calc(150px + 50vh);
  aspectratio: 16 / 9;
  background: url("../images/department/dep-top-bg.jpg");
  background-position: bottom;
  background-size: cover;
}
.dep-container {
  padding: 0 4%;
}
.dep-container-pc {
  width: 100%;
}
.dep-container p {
  text-align: justify;
}
.dep-container h1 {
  padding: 1rem 0;
  font-size: 3rem;
  display: flex;
  flex-direction: column;
}
.dep-container h2 {
  text-align: center;
  padding: 0 0 .5rem;
	color: #fff;
}
.dep-container small {
  font-size: 1rem;
}
.dep-couse article {
  padding: 1rem 0 0;
}
.dep-couce-item {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--green);
  border-radius: 0 0 30px 0
}
.dep-couce-item h3 {
  width: 70%;
  text-align: center;
	color: #fff;
}
.dep-couse-img-01 {
  width: 30%;
  aspect-ratio: 1/1;
  background: url("../images/department/dep-couse-01.jpg");
  background-size: cover;
}
.dep-couse-img-02 {
  width: 30%;
  aspect-ratio: 1/1;
  background: url("../images/department/dep-couse-02.jpg");
  background-size: cover;
}
.dep-kita-bg {
  background: var(--green);
  padding: 3rem 0;
}
.dep-kita-container {
  width: 100%;
  padding: 1rem 0;
}
.dep-kita-container article {
  margin: 1.6rem auto;
  padding: 1rem;
  background: var(--white);
  border-radius: 8px;
}
.dep-kita-img {
  background: url("../images/department/kita-experience-01.jpeg");
  background-size: cover;
  aspect-ratio: 8 / 5;
}
.dep-themedresearch span {
  color: var(--green);
  font-weight: 700;
}
.dep-thema h3 {
  text-align: center;
}
.dep-thema p {
  text-align: center;
}
.dep-thema figure {
  background: url("../images/department/dep-research@2x.jpg");
  background-size: cover;
  background-position: bottom left;
  aspect-ratio: 16 / 9;
}
.dep-thema p::before {
  content: "⚫︎";
  color: var(--green);
}
.dep-dualsystem article {
  margin: 1.8rem auto 3rem;
}
.dep-dualsystem h3 {
  text-align: center;
}
.dep-dualsystem p {
  margin-bottom: 1.8rem;
}
.dep-dualsystem-img {
  width: 100%;
  margin: 1rem auto;
  aspect-ratio: 8 / 5;
  object-fit: cover;
}
.dep-ffj > article {
  padding: .8rem 0;
}
/*
TAB and PC
================================================ */
@media screen and (min-width: 768px) { /* スクリーンサイズが768px以上の場合に適用 */
  .dep-top {
    aspectratio: 16 / 11;
  }
  .dep section {
    width: 100%;
    margin: 6rem 0 0;
  }
  .dep-container {
    margin: auto;
  }
  .dep-kita-pc {
    display: flex;
    align-items: center;
  }
  .dep-kita-container {
    width: 50%;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
  }
  .dep-kita-container article {
    width: 45%;
    text-align: center;
  }
  .dep-kita-container p {
    text-align: center;
  }
  .dep-kita-img {
    width: 45%;
    margin: auto;
    background-size: cover;
    aspect-ratio: 16 / 8;
    background-position: center;
    border-radius: 1rem;
  }
  .dep-couse-pc {
    width: 100%;
    margin: auto;
    display: flex;
    align-items: flex-start;
  }
  .dep-couse-pc article {
    width: 100%;
    padding: 5rem;
  }
  .dep-couse-pc p {
    padding-top: 1.8rem;
  }
  .dep-themedresearch {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    column-gap: 5rem;
  }
  .dep-themedresearch article {
    width: 100%;
  }
  .dep-dualsystem {
    max-width: 900px;
    margin: auto;
    /*
    display: flex;
    align-items: flex-start;
    column-gap: 5rem;
*/
  }
  .dep-dualsystem p {
    margin-bottom: 1.8rem;
  }
  .dep-dualsystem article {
    width: 100%;
  }
  .dep-dualsystem-img {
    width: 100%;
    margin: 1rem auto;
    aspect-ratio: 8 / 5;
    object-fit: contain;
  }
}