@charset "UTF-8";

/* =====<=====<=====<=====<=====<=====<===== */
/* !<- ORDERED / GENERAL CLASS ->            */
/* =====>=====>=====>=====>=====>=====>===== */

.bg {
  padding: var(--adj-30);
  background-color: var(--clr-base);
}
.blue{
  color: var(--clr-main);
}



/* =====<=====<=====<=====<=====<=====<===== */
/* !<- ORDERED / HEADING ->                  */
/* =====>=====>=====>=====>=====>=====>===== */

h2 {
  font-size: var(--fz-h2);
  text-align: center;
}
h3 {
  font-size: var(--fz-h3);
}
h4 {
  font-size: var(--fz-h4);
}

/*===== .mod =====*/
.mod {
    display: grid;place-items: center;
  min-height: 80px;
  margin-top: var(--adj-40);
  letter-spacing: .1em;
  background-color: var(--clr-sub-02);
}

/*===== .mod2 =====*/
.mod2 {
  display: flex;align-items: center;
  min-height: 50px;
  margin-bottom: var(--adj-40);
  padding: 5px var(--adj-20) 5px 0;
  color: var(--clr-base);
  background-color: var(--clr-main);
}
.mod2::before {
  width: 5px;height: 100%;
  display: block;
  margin-inline: 6px var(--adj-20);
  background-color: var(--clr-sub-02);
  content: '';
}
.mod2 h3 {
  padding-top: 5px;
}

/*=== ORDERED ===*/
:is(#history) .mod2 {
  margin: 0;
}
:is(#member,,#publication-list,#research) .mod2 {
  margin: 0;
}



/* =====<=====<=====<=====<=====<=====<===== */
/* !<- ORDERED / HIDE ->                     */
/* =====>=====>=====>=====>=====>=====>===== */





/* =====<=====<=====<=====<=====<=====<===== */
/* !<- ORDERED / ABOUT ->                     */
/* =====>=====>=====>=====>=====>=====>===== */

#about #sec01 span {
  display: block;
  margin-top: 1em;
  font-weight: bold;
  text-align: right;
}



/* =====<=====<=====<=====<=====<=====<===== */
/* !<- ORDERED / ACCESS ->                   */
/* =====>=====>=====>=====>=====>=====>===== */

#access {
  --box-width: 410px;
  --map-height: 300px;
}
#access .fx {
  justify-content: space-between;
}

/*===== #sec01 =====*/
#access #sec01 ul {
  padding-left: var(--adj-40);
}
#access #sec01 li + li {
  padding-top: .6em;
}

/*===== #sec02 =====*/
#access #sec02 :where(.fx,figure) {
  background-color: var(--clr-base);
}
#access #sec02 .fx {
  padding: 0 var(--adj-70) var(--adj-40);
}
#access #sec02 ul {
  padding-block: var(--adj-30);
}
#access #sec02 li {
  text-align: center;
}
#access #sec02 li:not(:last-child)::after {
  display: block;
  margin: 6px auto 2px;
  content: url(/biochem1/img/access/arrow.png);
}
#access #sec02 figure img {
  margin: var(--adj-30) auto;
}
#access .cntBox {
    align-self: stretch;
  width: var(--box-width);
  background-color: var(--clr-acc-01);
}
#access h4 {
  padding-block: 1em;
  color: var(--clr-base);
  text-align: center;
  background-color: var(--clr-main);
}

/*===== .map =====*/
.map {
  height: var(--map-height);
  border: 3px solid #2b3c87;
  overflow: hidden;
}
.map iframe {
  width: 100%;height: calc(var(--map-height) * 2);
  margin-top: calc(var(--map-height) / -2);
}



/* =====<=====<=====<=====<=====<=====<===== */
/* !<- ORDERED / CLINICAL RESEARCH ->        */
/* =====>=====>=====>=====>=====>=====>===== */

.dl-pdf {
    display: flex;align-items: center;
    column-gap: 10px;
  width: max-content;
  color: var(--clr-main);
  font-size: var(--fz-h4);
  text-decoration: underline;
}



/* =====<=====<=====<=====<=====<=====<===== */
/* !<- ORDERED / HISTORY ->                  */
/* =====>=====>=====>=====>=====>=====>===== */

:is(#history,#research) #sec01 p {
  line-height: var(--ls-read);
}
#history #sec01 p + header {
  margin-top: var(--adj-40);
}



/* =====<=====<=====<=====<=====<=====<===== */
/* !<- ORDERED / MEMBER ->                   */
/* =====>=====>=====>=====>=====>=====>===== */

:is(#member,#research) h4 {
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--clr-main);
}
#member figcaption,
.theme dt {
  font-size: var(--fz-h4);
}
#member figcaption span,
.theme dd {
  font-size: var(--fz-h5);
}

/*===== .cntBox =====*/
#member .cntBox {
    display: flex;justify-content: space-between;align-items: flex-start;
    flex-wrap: wrap;
  padding: var(--adj-40) var(--adj-30) var(--adj-50);
  background-color: var(--clr-base);
}
#member .cntBox:not(:last-child) {
  margin-bottom: var(--adj-50);
}
#member .cntBox + .cntBox {
  margin-top: calc(var(--adj-30) * -1);
}
#member .cntBox div {
  width: 700px;
}
#member .cntBox div dl {
    display: flex;align-items: flex-start;
    flex-wrap: wrap;
  font-size: 15px;
}
#member .cntBox div dt {
  flex-basis: 28%;
}
#member .cntBox div dd {
  flex-basis: 72%;
}
#member .cntBox div :is(dt,dd):nth-of-type(n+2) {
  margin-top: .5em;
}
#member figure {
  width: 200px;
}
#member figure img {
  width: 100%;height: auto;
}
#member figcaption {
  margin-top: var(--adj-20);
  font-weight: bold;
}
#member figcaption span {
  display: block;
  margin-top: .5em;
  font-weight: normal;
}
#member figcaption span span {
  font-size: 14px;
}

/*===== .theme =====*/
.theme {
    display: flex;
  width: 100%;
  margin-top: var(--adj-40);
  background-color: var(--clr-acc-01);
}
.theme :is(dt,dd) {
    display: grid;place-items: center;
  height: 66px;
  font-weight: bold;
}
.theme dt {
  width: 150px;
  color: var(--clr-base);
  background-color: var(--clr-main);
}
.theme dd {
  padding-left: var(--adj-20);
  letter-spacing: -.05em;
}



/* =====<=====<=====<=====<=====<=====<===== */
/* !<- ORDERED / PUBLICATION LIST ->         */
/* =====>=====>=====>=====>=====>=====>===== */

#publication-list {
  --his-width: 150px;
}
#publication-list h4 {
  margin-top: var(--adj-40);
  font-size: var(--fz-h3);
}
#publication-list p {
  margin-bottom: var(--adj-30);
  padding-block: var(--adj-30) 15px;
  font-size: var(--fz-h5);
  text-align: center;
  border-bottom: 1px solid var(--clr-main);
}

/*===== .chg =====*/
.chg {
    display: flex;justify-content: space-between;align-items: flex-start;
  margin-bottom: var(--adj-50);
}
.chg a {
    flex-basis: 49%;
    display: grid;place-items: center;
  height: 70px;
  color: var(--clr-main);
  font-weight: bold;
  font-size: var(--fz-h4);
  border-top: 3px solid;
  background-color: var(--clr-base);
  transition: var(--transition);
}
.chg .on,
.chg a:not([class]):hover {
  color: var(--clr-base);
  border-color: var(--clr-sub-02);
  background-color: var(--clr-main);
  transition: var(--transition);
}

/*===== .ach =====*/
.ach {
  margin-left: var(--adj-20);
  list-style: disc;
}
.ach li {
  margin-top: var(--adj-20);
  font-size: var(--fz-h5);
}
.ach li span {
  font-weight: bold;
}
.line {
  text-decoration: underline;
}

/*===== .his =====*/
.his {
  justify-content: center;
  column-gap: 15px;
}
.his a {
    flex-basis: var(--his-width);
    display: grid;place-items: center;
  padding-block: 25px;
  color: #2b3c87;
  font-weight: bold;
  font-size: var(--fz-h5);
  border: 2px solid;
  transition: var(--transition);
}
.his a:hover {
  color: var(--clr-base);
  background-color: var(--clr-main);
  transition: var(--transition);
}



/* =====<=====<=====<=====<=====<=====<===== */
/* !<- ORDERED / RESEARCH ->                 */
/* =====>=====>=====>=====>=====>=====>===== */

/*===== .index =====*/
.index {
  margin-bottom: var(--adj-40);
}
.index li {
  margin-top: .5em;
  padding-left: 1em;
}
.index li a {
  color: var(--clr-main);
}
.index i {
  padding-inline: .5em;
}

/*===== .cntBox =====*/
#research .cntBox {
  padding: var(--adj-30);
  background-color: var(--clr-base);
}
#research .cntBox p {
  margin-bottom: var(--adj-30);
}
#research .cntBox img {
  margin-inline: auto;
}
#research .cntBox + header {
  margin-top: var(--adj-50);
}
#research ol {
  margin-left: 1em;
  list-style: decimal;
}
#research ol li + li {
  margin-top: 1em;
}
#research :where(ol span,figcaption) {
  font-weight: bold;
}
#research figcaption {
  margin-block: 10px var(--adj-30);
  color: var(--clr-main);
  font-size: 14px;
  text-align: center;
}
.supText {
  font-size: var(--fz-S);
  vertical-align: super;
}