@charset "UTF-8";

:root {
  --clr-sub-04: #fafafa;

  --fz-h3: 34px;

  --cnt-margin-01: 60px;
  --cnt-margin-02: 70px;
}



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

/*===== .face =====*/
.face {
  padding: 10px 15px 15px 10px;
  position: relative;
}
.face::before,
.face::after {
  position: absolute;
  z-index: -1;
  content: '';
}
.face::before {
  width: 200px;height: 150px;
  top: 235px;left: 0;
  background: var(--clr-sub-03);
}
.face::after {
  width: 150px;height: 200px;
  top: 0;right: 0;
  background: var(--clr-sub-02);
}

/*===== .theme =====*/
[class^="theme"] {
    justify-content: flex-start;align-items: center;
  width: 970px;height: 50px;
  margin: auto;
}
[class^="theme"] span {
  width: 200px;height: 100%;
  margin-right: var(--adj-40);
  padding-top: .5em;
  color: var(--clr-base);
  font-weight: inherit;
  line-height: 1.2;
  background: var(--clr-sub-01);
}
.long {
  height: 80px;
}
.long span {
  padding-top: 1.1em;
}



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

.sub h2 {
  font-weight: bold;
  text-align: center;
}
h3 {
  color: var(--clr-base);
  letter-spacing: 1px;
}
h5 {
  margin-bottom: var(--adj-30);
  padding-left: 10px;
  font-size: var(--fz-h5);
}
h5::before {
  content: '[ ';
}
h5::after {
  content: ' ]';
}

/*===== ORDERED =====*/
#english h1 {
  padding-inline: 20px;
  position: relative;
  color: var(--clr-base);
  font-size: 40px;line-height: 1.5;
  filter: drop-shadow(0 0 5px rgba(1,39,74,1));

  &::before {
    --logo-width: 55px;

    width: var(--logo-width);height: calc(var(--logo-width) * 1.53);
    position: absolute;top: -100px;left: calc(50% - var(--logo-width) / 2);
    background: url(/biochem2/img/common/logo2.svg) no-repeat;
    background-size: contain;
    content: '';
  }
}
#english h2 {
  font-weight: normal;
  letter-spacing: -1px;

  &::first-letter {
    color: inherit;
  }
}
#english h3 {
  padding-top: 1em;
  color: inherit;
  letter-spacing: 0;
}

/*===== [class^="mod"] =====*/
[class^="mod"] {
  position: relative;
}
[class^="mod"]::before,
[class^="mod"]::after {
  width: 3px;height: 100%;
  position: absolute;top: 0;
  content: '';
}

/*===== .mod =====*/
.mod {
  height: 60px;
  margin-bottom: calc(var(--sec-padding) / 2);
  padding: 10px 0 0 35px;
  background: var(--clr-main);
}
.mod::before,
.mod::after {
  background: var(--clr-base);
}
.mod::before {
  left: 6px;
}
.mod::after {
  left: 12px;
}

/*===== mod2 =====*/
.mod2 {
  height: 50px;
  margin-bottom: var(--adj-40);
  padding: 2px 0 0 30px;
}
.mod2::before,
.mod2::after {
  height: 40px;
}
.mod2::before {
  left: 10px;
  background: var(--clr-sub-01);
}
.mod2::after,
.mod2 h4::after {
  background: var(--clr-main);
}
.mod2::after {
  left: 16px;
}
.mod2 h4,
.mod2 h4::before,
.mod2 h4::after {
  width: 100%;
}
.mod2 h4::before,
.mod2 h4::after {
  height: 1px;
  position: absolute;bottom: -1px;left: 0;
  content: '';
}
.mod2 h4::before {
  background: var(--clr-sub-03);
}
.mod2 h4::after {
  width: 40%;
}



/* =====<=====<=====<=====<=====<=====<===== */
/* !<- VISUAL ->                             */
/* =====>=====>=====>=====>=====>=====>===== */

#SV {
    justify-content: center;align-items: center;
  height: 350px;
  padding-bottom: var(--cnt-margin-01);
}
#SV::before,
#SV::after {
  width: 95%;height: 290px;
  position: absolute;
  z-index: -1;
  content: '';
}
#SV::before {
  bottom: 0;left: 0;
  background: #bbd7ff;
}
#SV::after {
  top: 0;right: 0;
  background: url(/biochem2/img/common/t01.png);
  background-color: var(--clr-base);
}
#SV header {
  width: auto;
}

/*===== ORDERED =====*/
#english #SV {
    align-items: flex-start;
  height: 500px;
  margin: 0;
  padding: 200px 0 0;
  background-image: url(/biochem2/img/english/SV-m.jpg);
}
#english #SV::before,
#english #SV::after {
  display: none;
}



/* =====<=====<=====<=====<=====<=====<===== */
/* !<- SECTION ->                            */
/* =====>=====>=====>=====>=====>=====>===== */

section {
  padding-bottom: var(--sec-padding);
}
section .inner > header:nth-of-type(1) + p {
  margin-bottom: var(--cnt-margin-01);
}

/*===== ORDERED =====*/
#english .inner > header {
  margin-bottom: var(--cnt-margin-02);
}
#english .inner > header:nth-of-type(1) + p {
  margin-bottom: 1em;
}



/* =====<=====<=====<=====<=====<=====<===== */
/* !<- BREAD-CRUMB LIST ->                   */
/* =====>=====>=====>=====>=====>=====>===== */

.bc ol {
    justify-content: flex-end;
  font-size: 14px;line-height: 2.5;
}
.bc li:nth-child(n+2) {
  margin-left: .8em;
}
.bc li:nth-child(n+2)::before {
  margin-right: .6em;
  color: var(--clr-sub-01);
  content: '>';
}
.bc a {
  text-decoration: underline;
  transition: .5s ease-in-out;
}
.bc a:hover {
  color: var(--clr-sub-01);
}



/* =====<=====<=====<=====<=====<=====<===== */
/* !<- COMMON ->                             */
/* =====>=====>=====>=====>=====>=====>===== */

.history :nth-of-type(even),
[class^="theme"] {
  background: var(--clr-sub-04);
}

/*===== display =====*/
.mem-EN p span,
.fig figcaption::after,
figcaption span {
  display: block;
}

/*===== margin / padding =====*/
:is(#hst,#msg) p + p,
#mem figcaption,
.ACS_ac dt:nth-of-type(2),
.pubList li + li {
  margin-top: 1em;
}

/*===== color / font =====*/
#english h1 strong,
#mem figcaption,
#msg strong,
:is(.memBox,.theme2) li,
[class^="theme"],
label[for^="acd"] {
  font-weight: bold;
}
#mem figcaption,
[class^="theme"] span {
  font-size: 24px;
}
#english h3,
#mem figcaption span {
  font-size: 18px;
}
#msg figcaption,
.ACS_ac,
.ACS_ad li {
  font-size: 16px;
}
#english h1,
#Nav-EN a,
#res figcaption,
[class^="theme"] span {
  text-align: center;
}



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

#english h1::after,
.acd-check,
.newsIndex::before {
  display: none;
}
#SV br,
#english h2 br,
#res .mod2 br {
  display: none;
}





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

#acs .left img {
  max-width: 500px;
  margin: auto;
}
.Gmap {
  width: 500px;height: 375px;
}
.map {
  position: relative;
}

/*===== .ACS_ac =====*/
.ACS_ac {
  margin-top: var(--adj-50);
}
.ACS_ac dd {
  text-indent: 1em;
}

/*===== .ACS_ad =====*/
.ACS_ad {
    justify-content: center;
  margin-top: var(--adj-40);
}
.ACS_ad dt {
  margin: auto 0;
  font-weight: bold;
}
.ACS_ad dd {
  margin-left: 1.5em;
  padding: 1em 0 1em 1em;
  border-left: 2px solid var(--clr-sub-03);
}
.ACS_ad li:nth-of-type(1) {
  margin-bottom: 1em;
}



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

#hst #sec01 header + p {
  margin-bottom: 0;
}
#hst .face {
  margin: var(--cnt-margin-01) auto;
}
#hst .face::before,
#hst .face::after {
  width: 415px;height: 200px;
}

/*===== .history =====*/
.history,
.history dd + dt {
  position: relative;
}
.history {
  padding-block: 4px;
  border-top: 1px solid;
  border-bottom: 1px solid;
  border-color: var(--clr-main);
}
.history::before,
.history::after {
  width: 100%;height: 1px;
  position: absolute;left: 0;
  background: var(--clr-sub-03);
  content: '';
}
.history::before {
  top: 2px;
}
.history::after {
  bottom: 2px;
}
.history dt {
  width: 400px;
  padding: 1em 0 1em 50px;
}
.history dd {
  width: 600px;
  padding: 1em 0 1em var(--cnt-margin-01);
}
.history dd + dt,
.history dd:nth-of-type(n+2) {
  border-top: 1px solid #c9dbea;
}
.history dd + dt::after {
  width: 400px;height: 1px;
  position: absolute;top: -1px;left: 0;
  background: var(--clr-sub-03);
  content: '';
}
dt.long2 {
  padding-top: 1.8em;
}



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

#mem .cntBox:nth-of-type(2) {
  margin: var(--cnt-margin-01) 0;
}
#mem .left {
  width: 295px;
  margin-left: 15px;
}
#mem .right {
  width: 630px;
}
#mem figcaption span {
  line-height: 1.4;
}
.as,
.bg {
  margin-left: .5em;
  line-height: 1.8;
}
.as li::before {
  content: '・';
}
.bg dt {
  width: 36%;
}
.bg dd {
  width: 63%;
  text-align: left;
}

/*===== .memBox =====*/
.memBox {
  margin-top: var(--sec-padding);
}
.memBox ul {
    justify-content: flex-start;
  margin-inline: 15px;
  font-size: 22px;
}
.memBox li:not(:last-child) {
  margin-right: 2em;
}
.memBox:nth-last-of-type(3) li:nth-last-child(n+2) {
  margin-right: 1em;
}



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

#msg .left {
  width: 610px;
}
#msg .right {
  width: 295px;
  margin-right: 15px;
}
#msg figcaption {
  margin-top: 2em;
}



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

#news .newsIndex {
  width: 100%;
  padding: 0 1em 0 0;
  box-shadow: none;
}
.dt + dd {
  margin-top: .25em;
  color: #9f9f9f;
  font-size: calc(var(--std-fz) - 2px);
}
.dt + dd a {
  color: var(--clr-sub-01);
  text-decoration: underline;
}

/*===== .doc =====*/
.doc {
  --label-height: 40px;
  --doc-arw-size: 12px;
}
.doc {
  width: 100%;
  margin-top: var(--adj-20);
}
.doc label {
    display: flex;justify-content: flex-start;align-items: center;
  height: var(--label-height);
  color: var(--clr-base);
  font-weight: bold;
  font-size: var(--fz-L);
  background-color: var(--clr-sub-02);
}
.doc label::before,
.doc label::after {
  content: '';
}
.doc label::before {
  width: 3px;height: 22px;
  margin-right: 15px;
  background-color: #fff;
}
.doc label::after {
  width: var(--doc-arw-size);height: var(--doc-arw-size);
  margin-top: 3px;
  margin-right: var(--adj-20);
  background-image: url(/biochem2/img/common/arrow3.svg);
  background-size: contain;
  transform: rotateX(180deg);
}
.doc label span {
  margin-inline:  auto 10px;
  font-size: 15px;
}
.doc > dl,
.doc input {
  display: none;
}
.doc > dl {
  margin-top: var(--adj-20);
  overflow: hidden;
}
.doc input:checked + dl {
  display: inherit;
}



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

#pub .cntBox + .cntBox {
  margin-top: var(--cnt-margin-01);
}
#pub hr {
  height: 2px;
  margin: var(--sec-padding) 0 var(--adj-40);
}
.pdf {
  justify-content: flex-start;
}
.pubList li {
  margin-left: 3em;
  padding-inline: 2em;
  list-style: decimal;
}



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

#res #sec02 {
  padding: 0;
}
#res .theme {
  margin: 40px auto var(--cnt-margin-01);
  font-weight: normal;
}
#res :is(.theme span,figcaption) {
  font-weight: bold;
}
#res .theme span {
  background: var(--clr-sub-03);
}
.indent {
  display: inline-block;
}
.theme2 {
  height: 200px;
}
.theme2 li {
  margin-left: 25px;
  padding-left: .5em;
  list-style: decimal;
}
.theme2 span {
  padding-top: 3.6em;
}

/*===== .fig =====*/
.fig {
  margin: var(--adj-40) auto;
}
.fig figcaption {
  font-size: 26px;
}
.fig figcaption::after {
  width: 85%;height: 2px;
  margin: 0 auto .5em;
  background: #f6b37f;
  content: '';
}

/*===== .resIndex =====*/
.resIndex {
  margin: 0 0 var(--cnt-margin-01) 50px;
}
.resIndex a::before {
  margin-right: .5em;
  color: var(--clr-sub-01);
  content: '>';
}

/*===== .acd-cnt =====*/
label,
label[for^="acd"]::after {
  display: block;
}
label[for^="acd"] {
  width: 180px;
  margin: 0 0 0 auto;
  position: relative;
  font-size: 22px;line-height: 1.2;
  text-align: right;
}
label[for^="acd"]::before {
  width: 10px;height: 10px;
  position: absolute;top: calc(50% - 6px);left: 0;
  border-top: 1px solid;
  border-right: 1px solid;
  border-color: var(--clr-sub-01);
  transform: rotate(135deg);
  content: '';
}
label[for^="acd"]::after {
  width: 87%;height: 1px;
  margin: 2px 0 0 auto;
  background: var(--clr-sub-01);
  content: '';
}
label[for^="acd"] + .acd-cnt {
  height: 0;
  margin-bottom: var(--cnt-margin-02);
  overflow: hidden;
}
.acd-check:checked + label[for^="acd"]::before {
  transform: translateY(5px) rotate(315deg);
}
.acd-check:checked ~ .acd-cnt {
  height: auto;
  margin: var(--adj-20) 0 var(--cnt-margin-02);
  padding-block: 1em;
  border: 1px dotted #aaa;
}
label[for="acd04"] + .acd-cnt,
.acd-check:checked + label[for="acd04"] + .acd-cnt {
  margin-bottom: 0!important;
}



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

#Nav-EN a {
  width: 150px;
  padding-block: .4em;
  position: fixed;top: 25px;right: 25px;
  z-index: 100;
  color: var(--clr-sub-01);
  font-size: var(--fz-L);
  border: 2px solid;
  background-color: var(--clr-base);
}
#english :is(
  h1 strong,
  h3 span
) {
  display: block;
}

/*===== #sec01 =====*/
#english #sec01 {
  background: var(--clr-sub-04);
}

/*===== #sec02 =====*/
.mem-EN {
  flex-basis: 295px;
}
.mem-EN :nth-child(n+2) {
  margin-left: 10px;
}
.mem-EN:last-child {
  margin: 0 auto 0 57.5px;
  margin-inline: 57.5px auto;
}
.mem-EN:nth-child(n+4) {
  margin-top: var(--cnt-margin-02);
}
.mem-EN :is(h3,p) {
  line-height: 1.5;
  text-align: left;
}
.mem-EN p {
  margin-top: .8em;
}
.mem-EN p span {
  color: var(--clr-sub-02);
}

/*===== #sec03 =====*/
#english #sec03 {
  background-image: url(/biochem2/img/english/BG_01-m.jpg);
}
#english .ACS_ad dt {
  margin-left: var(--adj-20);
  font-size: 17px;line-height: 2;
}
#english .ACS_ad dd {
  margin: 0 auto 0 40px;
  padding: 1em 0 1em 40px;
}
#english .ACS_ad li:nth-child(1) {
  margin: 0;
}