@charset "UTF-8";
/*
VARIABLES
================================================ */ 
:root {
  --black: #1f1f1f;
  --light-green: rgb(190, 231, 237);
  --light-green2: #00517e;
  --greenop80: rgba(0, 154, 186, .8);
  --green: rgb(0, 154, 186);
  --brown: rgb(135, 75, 30);
  --light-grey: #eee;
  --white: #fff;
  --whiteOp80: rgba(256, 256, 256, .9);
  --NotoSans-font: 'Noto Sans JP', sans-serif;
  --Mplus1: 'M PLUS 1p', sans-serif;
  --pcmaxwidth: 1281px;
  --translate: 5px 5px;
  --transition: all .5s ease-in-out;
  --opacity: .8;
}
/*
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;
}
.jh section{
	padding: 0 4% 25px;
}
.jh-top {
  padding: 10px 4%;
}
.jh-top h1{
	text-align: center;
}
.jh-link{
	padding: 40px 4%;
}
.jh-link a{
	display: inline-block;
	margin: 1em 0;
	padding: 1em;
	width: 100%;
  background: var(--light-green);
	border-radius: 8px;
}
.jh-link date{
	color: #6A6A6A;
}
/* 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;
}
.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(--light-green);
  border-radius: 0 0 30px 0
}
.dep-couce-item h3 {
  width: 70%;
  text-align: center;
}
.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(--light-green);
  padding: 3rem 0;
}
.dep-kita-container {
  width: 100%;
  padding: 1rem 4%;
}
.dep-kita-container article {
  margin: 1rem auto;
  padding: 1rem;
  background: var(--white);
  border-radius: 1rem;
}
.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;
}
}