@charset "UTF-8";

/* 機械システム工学プログラム */
.p-mech {
  --page-color1: #E50150;
  --page-color2: rgba(229, 1, 80, 0.8);
}
.p-mech .pageTitle {
  background-image: url(../../faculty_guidance/mech/img/img-main.jpg);
}
/* 社会基盤工学プログラム */
.p-infra {
  --page-color1: #EC6C00;
  --page-color2: rgba(236, 108, 0, 0.8);
}
.p-infra .pageTitle {
  background-image: url(../../faculty_guidance/infra/img/img-main_infra.jpg);
}
/* 電子情報通信プログラム */
.p-ele {
  --page-color1: #FEA900;
  --page-color2: rgba(254, 169, 0, 0.8);
}
.p-ele .pageTitle {
  background-image: url(../../faculty_guidance/ele/img/img-main_ele.jpg);
}
/* 知能情報システムプログラム */
.p-inte {
  --page-color1: #6CB132;
  --page-color2: rgba(108, 177, 50, 0.8);
}
.p-inte .pageTitle {
  background-image: url(../../faculty_guidance/inte/img/img-main_inte.jpg);
}
/* 化学システム工学プログラム */
.p-che {
  --page-color1: #109150;
  --page-color2: rgba(16, 145, 80, 0.8);
}
.p-che .pageTitle {
  background-image: url(../../faculty_guidance/che/img/img-main_che.jpg);
}
/* 材料科学プログラム */
.p-mat {
  --page-color1: #09968E;
  --page-color2: rgba(9, 150, 142, 0.8);
}
.p-mat .pageTitle {
  background-image: url(../../faculty_guidance/mat/img/img-main_mat.jpg);
}
/* 建築学プログラム */
.p-arch {
  --page-color1: #014B96;
  --page-color2: rgba(1, 75, 150, 0.8);
}
.p-arch .pageTitle {
  background-image: url(../../faculty_guidance/arch/img/img-main_arch.jpg);
}
/* 人間支援感性科学プログラム */
.p-human {
  --page-color1: #631D7D;
  --page-color2: rgba(99, 29, 125, 0.8);
}
.p-human .pageTitle {
  background-image: url(../../faculty_guidance/human/img/img-main_human.jpg);
}
/* 協創経営プログラム */
.p-emgt {
  --page-color1: #B70171;
  --page-color2: rgba(183, 1, 113, 0.8);
}
.p-emgt .pageTitle {
  background-image: url(../../faculty_guidance/emgt/img/img-main_emgt.jpg);
}

/* 工学部の紹介 下層 */
.c-title1 {
  background-image: url(../img/faculty_guidance/img-title_program.png);
}
.programTitle {
  color: var(--page-color1);
  font-weight: bold;
}
.programFigure {
  position: relative;
  align-self: flex-start;
}
.programFigure figcaption {
  background-color: var(--page-color2);
  color: #fff;
  font-weight: bold;
  width: 100%;
}

/* 工学部の紹介 */
figure.messageFigure {
  position: relative;
  margin-bottom: 20px;
}
.messageFigure figcaption {
  background-color: rgba(0, 133, 85, 0.8);
  color: #fff;
  font-weight: bold;
  position: absolute;
}
.p-faculty_guidance #video .listWrap p {
  margin-bottom: 0;
}


/* ここから1261以上
--------------------------------------- */
@media all and (min-width: 1261px) {

  /* 工学部の紹介 下層 */
  .programTitle {
    font-size: 3rem;
    margin: 20px 0;
    text-align: center;
  }
  .programFigure figcaption {
    border-radius: 0 20px 20px 0;
    font-size: 2rem;
    padding: 6px 10px 4px;
    position: absolute;
    left: 0;
    bottom: 17px;
  }
  .programFigure figcaption span {
    font-size: 1.4rem;
    margin-left: 8px;
  }
  .programTable {
    width: 100%;
    display: flex;
  }
  .programTable li {
    width: 50%;
    display: flex;
    flex-direction: column;
  }
  .programTable li .head {
    background-color: #f2f2f2;
    font-weight: bold;
    text-align: center;
    padding: 7.5px 10px;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
  }
  .programTable li .contents {
    padding: 10.5px 10px;
    height: 100%;
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
    display: flex;
    align-items: center;
  }
  .programTable li:last-child .head,
  .programTable li:last-child .contents {
    border-right: 1px solid #ccc;
  }
  .programSxs {
    display: flex;
    margin-top: 30px;
  }
  .programSxs > *:first-child {
    width: 240px;
    margin-right: 50px;
  }
  .programSxs > *:last-child {
    width: calc(100% - 290px);
  }

  /* 工学部の紹介 */
  .p-faculty_guidance #message {
    margin-top: 50px;
  }
  .p-faculty_guidance #message article:first-child {
    margin-bottom: 85px;
  }
  .p-faculty_guidance #message .c-sxs1 + .c-sxs1 {
    margin-top: 50px;
  }
  .p-faculty_guidance #message .c-accTitle4:first-child {
    margin-top: 0;
  }
  .p-faculty_guidance .c-sxs1 img + img {
    margin-top: 23px;
  }
  .messageFigure img {
    width: 240px;
  }
  .messageFigure figcaption {
    font-size: 2rem;
    border-radius: 0 20px 20px 0;
    padding: 5px 10px;
    left: 240px;
    bottom: 25px;
    width: calc(100% - 240px);
  }
  .messageFigure figcaption span {
    font-size: 1.4rem;
  }
  .p-faculty_guidance .pamphlet .listWrap {
    display: flex;
    flex-wrap: wrap;
  }
  .p-faculty_guidance .pamphlet .listWrap.list1 {
    margin-left: -15px;
    margin-right: -15px;
  }
  .p-faculty_guidance .pamphlet .listWrap.list1 > * {
    width: calc(100% / 3 - 30px);
    margin-left: 15px;
    margin-right: 15px;
  }
  .p-faculty_guidance .pamphlet .listWrap.list2 {
    margin-left: -12px;
    margin-right: -12px;
  }
  .p-faculty_guidance .pamphlet .listWrap.list2 .image {
    width: calc(25% - 24px);
    margin-left: 12px;
    margin-right: 12px;
  }
  .p-faculty_guidance .pamphlet .listWrap.list2 .image:nth-child(n+5) {
    margin-top: 20px;
  }
  .p-faculty_guidance .pamphlet .listWrap.list2 .image li {
    margin-top: 15px;
  }
  .p-faculty_guidance #video .listWrap {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
  }
  .p-faculty_guidance #video .listWrap li {
    width: calc(100% / 3 - 30px);
    margin-left: 15px;
    margin-right: 15px;
  }
  .p-faculty_guidance #video .listWrap li:nth-child(n+4) {
    margin-top: 25px;
  }
  .p-faculty_guidance #video .listWrap li p {
    margin-top: 10px;
    text-align: center;
    font-weight: bold;
  }

}

/* ここまで1261以上
--------------------------------------- */
/* ここから1260以下
--------------------------------------- */
@media screen and (max-width: 1260px) {

  /* 工学部の紹介 下層 */
  .programTitle {
    font-size: 3rem;
    margin: 20px 0;
  }
  .programFigure {
    display: block;
    max-width: 200px;
    margin-left: auto!important;
    margin-right: auto!important;
  }
  .programFigure figcaption {
    border-radius: 0 16.5px 16.5px 0;
    font-size: 1.6rem;
    padding: 6px 10px 4px;
    position: absolute;
    left: 0;
    bottom: 10px;
  }
  .programFigure figcaption span {
    font-size: 1.2rem;
    margin-left: 7px;
  }
  .programTable {
    width: 100%;
  }
  .programTable li .head,
  .programTable li .contents {
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    width: 100%;
    padding: 9px 10px;
  }
  .programTable li .head {
    background-color: #f2f2f2;
    font-weight: bold;
    text-align: center;
  }
  .programTable li:last-child .contents {
    border-bottom: 1px solid #ccc;
  }
  .programSxs {
    margin-top: 30px;
    margin-bottom: 30px;
  }
  .programSxs > figure {
    margin-top: 30px;
    margin-bottom: 20px;
  }

  /* 工学部の紹介 */
  .p-faculty_guidance #message {
    margin-top: 50px;
  }
  .p-faculty_guidance #message .c-sxs1 {
    margin-bottom: 20px;
  }
  .p-faculty_guidance #message .c-sxs1 + .c-sxs1 {
    margin-top: 0;
  }
  .p-faculty_guidance #message .c-accTitle4:first-child {
    margin-top: 0;
  }
  .p-faculty_guidance .c-sxs1 img {
    margin-top: 13px;
  }
  .messageFigure img {
    width: 54%;
  }
  .messageFigure figcaption {
    font-size: 1.65rem;
    border-radius: 0 16.5px 16.5px 0;
    padding: 5px 10px;
    left: 0;
    bottom: 25px;
    width: 100%;
  }
  .messageFigure figcaption span {
    font-size: 1.2rem;
  }
  .p-faculty_guidance .pamphlet .listWrap.list1 .image {
    margin-bottom: 45px;
  }
  .p-faculty_guidance .pamphlet .listWrap.list1 .image > a {
    display: block;
    width: 190px;
    margin-left: auto;
    margin-right: auto;
  }
  .p-faculty_guidance .pamphlet .listWrap.list2 {
    display: flex;
    flex-wrap: wrap;
    margin-left: -5.5px;
    margin-right: -5.5px;
  }
  .p-faculty_guidance .pamphlet .listWrap.list2 .image {
    width: calc(50% - 11px);
    margin-left: 5.5px;
    margin-right: 5.5px;
  }
  .p-faculty_guidance .pamphlet .listWrap.list2 .image .c-linkList a {
    border-radius: 22.5px;
    padding: 1.5px 5px;
    margin-top: 5px;
  }
  .p-faculty_guidance .pamphlet .listWrap.list2 .image:nth-child(n+3) {
    margin-top: 30px;
  }
  .p-faculty_guidance #video .listWrap li:not(:first-child) {
    margin-top: 26px;
  }
  .p-faculty_guidance #video .listWrap li p {
    margin-top: 10px;
    text-align: center;
    font-weight: bold;
  }

}