@charset "utf-8";



/* 確認用に一時記述----------*/
/*header{ background-color: rgb(172, 172, 172); }*/
/*footer{ background-color: rgb(0, 60, 255); }*/




/* 共通 ------------------------*/
html {
  font-size: 62.5%;
}

body {
  font-family: 'Noto Serif JP', serif;
  font-size: 1.4em;
  letter-spacing: 0.4rem;
}

.irudBlue {
  color: #005bac;
}
a.irudBlueLink {
  color: #005bac;
  text-decoration: underline;
}
.irudRed {
  color: #d93932;
  font-weight: bold;
}

.irudGray {
  color: #9ca5aa;
}

.irudBlueUnderLine {
  border-bottom: 1px solid #005bac;
}

.irudRedUnderLine {
  border-bottom: 1px solid #d93932;
}

.irudGrayUnderLine {
  border-bottom: 1px solid #9ca5aa;
}

/* 遺伝子名はイタリック・太字 */
.gene {
  font-style: italic;
  font-weight: bold;
}

/* float解除用（親コンテナに設定) */
.cl:after {
	content: "";
	display: block;
	clear: both;
}

.text_center {
  text-align: center;
}
.text_right {
  text-align: right;
}
.text_ribon::before {
  content: "─ ";
}
.text_ribon::after {
  content: " ─";
}


/*=== スマホ・PC切り替え用  ===*/
.disp-mb {
	display: none!important;
}
.disp-pc {
	display: inline!important;
}
@media screen and ( max-width:640px ){
	.disp-mb {
		display: inline!important;
	}
	.disp-pc {
		display: none!important;
	}
}



/* h,p,li 設定 -----------------------------*/
.h1 {
  text-align: center;
  padding-bottom: 200px;
}
@media screen and ( max-width:640px ) {
  .h1 {
    padding-bottom: 100px;
  }
}

.rBorder {
  display: inline-block;
  padding: 1.4rem 8rem;
  border: solid 1px black;
  border-radius: 10px;
}
@media screen and ( max-width:640px ) {
  .rBorder {
    display: block;
    padding: 1.4rem 0;
    border: solid 1px black;
    border-radius: 10px;
  }
}

h1 {
    font-size: 3.2rem;
    font-weight: normal;
    display: inline;
  }
@media screen and ( max-width:640px ) {
  h1 {
    font-size: 2.4rem;
  }
}

h2 {
  /*border: 1px solid red;*/
  font-size: 3.2rem;
  font-weight: normal;
  line-height: 4.8rem;
  display: inline;
}
@media screen and ( max-width:640px ) {
  h2 {
    font-size: 2.4rem;
    line-height: 3.6rem;
  }
}

h3 {
  font-size: 1.8rem;
  font-weight: normal;
}
@media screen and ( max-width:640px ) {
}

p, li , dt, dd {
  /*border: 1px solid red;*/
  /*background: bisque;*/
  font-size: 2.0rem;
  line-height: 4rem;
  padding-bottom: 4rem;
}

a {
  text-decoration: none;
}



ol, ul {
  list-style-position: outside;
  padding-left: 6rem;
  padding-right: 1rem;
}

/* header 設定 -----------------------------*/
header {
  width: 1080px;
  height: 120px;
  /* height: 360px;  2つ目の div info により修正 */
  margin: 0 auto;
  padding-top: 50px;
  margin-bottom: 200px;
  position: relative;
}
@media screen and ( max-width:640px ) {
  header {
    width: 100%;
    padding: 25px 20px 0 20px;
    margin-bottom: 50px;
  }
  header { /* div info により追加 */
    height: 240px;
    /* height: 420px;  2つ目の div info により修正 */
  }
}


header div.info  {
  margin-top: 70px;
  text-align: center;
  /*border: 2px solid #d93932;*/
  background-color: #fcedec;
}
@media screen and ( max-width:640px ) {
    header div.info  {
      margin-top: 50px;
    }
  }


header div.info p {
  color: #d93932;
  padding: 20px 0;
  line-height: 1.rem;
}
@media screen and ( max-width:640px ) {
  header div.info p {
    font-size: 1.2rem;
    line-height: 2.4rem;
    padding: 10px 0;
  }
}


/* footer 設定 -----------------------------*/

footer {
  background: #f0f0f0;
}

#footerContents {
  width: 1080px;
  height: auto;
  margin: 0 auto;
  padding: 100px 0;
}
@media screen and ( max-width:640px ) {
  #footerContents {
    width: 100%;
    padding: 50px 20px;
  }
}










/*-ハンバーガーメニュー 設定 --------------------------------*/
/*-▼--------------------------------*/
/* ALL */
.hamburger {
  display: none;
}
@media screen and ( max-width:640px ) {
  .hamburger {
    display: inline-block;
    position: absolute;
    padding-top: 15px;
    z-index: 100;
  }
}

.hamburger .line{
  width: 50px;
  height: 5px;
  background-color: black;
  display: block;
  margin: 0px auto 8px auto;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
@media screen and ( max-width:640px ) {
  .hamburger .line{
    width: 30px;
    height: 3px;
    margin: 0px auto 4px auto;
  }
}

.hamburger:hover{
  cursor: pointer;
}

/* ONE */
#hamburger-1.is-active .line:nth-child(2){
  opacity: 0;
}

#hamburger-1.is-active .line:nth-child(1){
  -webkit-transform: translateY(13px) rotate(45deg);
  -ms-transform: translateY(13px) rotate(45deg);
  -o-transform: translateY(13px) rotate(45deg);
  transform: translateY(13px) rotate(45deg);
}
@media screen and ( max-width:640px ) {
  #hamburger-1.is-active .line:nth-child(1){
    -webkit-transform: translateY(7px) rotate(45deg);
    -ms-transform: translateY(7px) rotate(45deg);
    -o-transform: translateY(7px) rotate(45deg);
    transform: translateY(7px) rotate(45deg);
  }
}

#hamburger-1.is-active .line:nth-child(3){
  -webkit-transform: translateY(-13px) rotate(-45deg);
  -ms-transform: translateY(-13px) rotate(-45deg);
  -o-transform: translateY(-13px) rotate(-45deg);
  transform: translateY(-13px) rotate(-45deg);
}
@media screen and ( max-width:640px ) {
  #hamburger-1.is-active .line:nth-child(3){
    -webkit-transform: translateY(-7px) rotate(-45deg);
    -ms-transform: translateY(-7px) rotate(-45deg);
    -o-transform: translateY(-7px) rotate(-45deg);
    transform: translateY(-7px) rotate(-45deg);
  }
}
/*-▲--------------------------------*/


/*メニュー 設定 ------------------------*/
.is-on {
  display: block!important;
}

#modal-overlay {
    display:none;
}
@media screen and ( max-width:640px ) {
  #modal-overlay {
    display: block;
    z-index:5;
    position:fixed;
    top:0;
    left:0;
    width:100vw;
    height:100vh; /* iPhoneの上下のナビゲーションが隠れる分大きめに */
    background-color:rgba(240, 240, 240, 1.0);
  }
}


/* #global 設定 -----------------------------*/

#global {
  width: 100%;
  height: auto;
  position: relative;
  /*background: seagreen;*/
}

#global #headerLogo a {
  display: block;
  /*border: 1px solid blue;*/
  width: 200px;
  height: 70px;
  background-image: url("../images/irud_logo_la.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top left;
}
@media screen and ( max-width:640px ) {
  #global #headerLogo a {
    width: 100px;
    height: 70px;
    background-image: url("../images/irud_logo_lo.png");
    background-position: top center;
    margin: 0 auto;
  }
}



/* #global .globalMenu 設定 -----------------------------*/

#global .globalMenu {
  padding-top: 20px;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
}
@media screen and ( max-width:640px ) {
  #global .globalMenu {
    width: 100%;
    padding-top: 100px;
    /*background: rgb(139, 137, 46);*/
    display: none;
  }
}


#global .globalMenu ul {
  padding: 0;
}


#global .globalMenu ul li {
  width: 280px;
  height: 60px;
}
@media screen and ( max-width:640px ) {
  #global .globalMenu ul li {
    width: 100%;
    height: inherit;
  }
}


#global .globalMenu ul.menu {
  display: inline-block;
  vertical-align: top;
}
@media screen and ( max-width:640px ) {
  #global .globalMenu ul.menu {
    vertical-align: inherit;
    width: 100%;
  }
}

#global .globalMenu ul.menu li:first-child {
  text-align: center;
  /*border-bottom: 1px solid #d93932;*/
  /*background: sienna;*/
}
@media screen and ( max-width:640px ) {
  #global .globalMenu ul.menu li:first-child {
    text-align: left;
    border-bottom: none;
  }
}

#global .globalMenu ul.menu li:first-child a {
  text-align: center;
  color: #3b3b3b;
}
@media screen and ( max-width:640px ) {
  #global .globalMenu ul.menu li:first-child a {
    text-align: left;
    color: #005bac;
    /*border-bottom: 1px solid #cccccc;*/
  }
  #global .globalMenu ul.menu li:first-child a::before {
    content: "＜ ";
  }  
}


#global .globalMenu ul.subMenu {
  margin-top: 10px;
}
@media screen and ( max-width:640px ) {
  #global .globalMenu ul.subMenu {
    margin: 0;
    width: 100%;
  }
}

#global .globalMenu ul.subMenu li {
  /*background: violet;*/
  text-align: center;
  margin-bottom: 2px;
}
@media screen and ( max-width:640px ) {
  #global .globalMenu ul.subMenu li {
    /*background: violet;*/
    text-align: left;
    padding: 0;
  }
}

#global .globalMenu ul.subMenu li a {
  display: block;
  line-height: 60px;
  background: #f5f5f5;
  color: #606060;
}
@media screen and ( max-width:640px ) {
  #global .globalMenu ul.subMenu li a {
    line-height: inherit;
    background: none;
  }
  #global .globalMenu ul.subMenu li a::before {
    content: "＜ ";
  }  
}

#global .globalMenu ul.subMenu li a:hover {
  background: #ebebeb;
  color: #3b3b3b;
}
@media screen and ( max-width:640px ) {
  #global .globalMenu ul.subMenu li a:hover {
    background: none;
    color: inherit;
  }
}


#global .globalMenu .subMenu {
  display: none;
}
@media screen and ( max-width:640px ) {
  #global .globalMenu .subMenu {
    display: inline-block;
  }
}

#global .globalMenu ul.globalMenuEtc {
  display: none;
}
@media screen and ( max-width:640px ) {
  #global .globalMenu ul.globalMenuEtc {
    display: block;
  }
}



/* #fGlobal 設定 -----------------------------*/

#fGlobal {
  margin-bottom: 100px;
}

#fGlobal ul {
  margin: 0;
  padding: 0;
}

#fGlobal ul li {
  font-size: 1.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media screen and ( max-width:640px ) {
}

#fGlobal ul li a {
  color: #005bac;
}


#fGlobal ul.menu {
  flex: 1;
}
@media screen and ( max-width:640px ) {
  #fGlobal ul.menu {
    margin-bottom: 50px;
  }
}



#fGlobal ul.subMenu {
  border-left: 1px solid #c0c0c0;
  padding-left: 25px;
}
@media screen and ( max-width:640px ) {
  #fGlobal ul.subMenu {
    border-left: none;
    padding-left: 0;
  }
}


#fGlobal .ffb {
  display: flex;
  flex-direction: row;
}
@media screen and ( max-width:640px ) {
  #fGlobal .ffb {
    display: block;
  }
 }




/* #fLogos 設定 -----------------------------*/

#fLogos {
  margin-bottom: 50px;
}

#fLogos .irud_logo {
  /*float: left;*/
  margin-top: 25px;
}
@media screen and ( max-width:640px ) {
  #fLogos .irud_logo {
    float: none;
    margin-top: 0;
    margin-bottom: 25px;
  }
}

#fLogos .irud_logo img {
  height: 70px;
}
@media screen and ( max-width:640px ) {
  #fLogos .irud_logo img {
    height: 55px;
  }
}

#fLogos .irud_contact {
  margin-top: 50px;
}
@media screen and ( max-width:640px ) {
  #fLogos .irud_contact p {
    font-size: 10px;
    line-height: 20px;
  }
}


#fLogos .ncnp_logo {
  margin-top: 10px;
}
@media screen and ( max-width:640px ) {
  #fLogos .ncnp_logo {
    float: none;
  }
}

#fLogos .ncnp_logo img {
  height: 90px;
}
@media screen and ( max-width:640px ) {
  #fLogos .ncnp_logo img {
    height: 50px;
  }
}



#fLogos .amed_logo {
  /*float: right;*/
  margin-top: 50px;
}
@media screen and ( max-width:640px ) {
  #fLogos .amed_logo {
    float: none;
  }
}

#fLogos .amed_logo img {
  height: 110px;
}
@media screen and ( max-width:640px ) {
  #fLogos .amed_logo img {
    height: 50px;
  }
}



/* #fCopyrights 設定 -----------------------------*/


#fCopyrights small {
  color: #9ca5aa;
  line-height: 2.4rem;
}




/* main 設定 -----------------------------*/
main {
  width: 1080px;
  height: auto;
  margin: 0 auto;
  padding-bottom: 0;
}
@media screen and ( max-width:640px ) {
  main {
    width: 100%;
    padding: 0 20px;
  }
}


/* article,section 設定 -----------------------------*/

section {
  padding-bottom: 150px;
}



/* ｆlex 設定 -----------------------------*/

.fb {
  display:flex;
  flex-direction: row; /* 横 */
}
@media screen and ( max-width:640px ) {
  .fb {
    flex-direction: column; /* 縦 */
  }
}


/* トップページ最近の動きリンク 設定 -----------------------------*/

div.recently {
  height: 600px;
  overflow:auto;
  border: 1px solid #999;
  padding: 10px 30px;
}
@media screen and ( max-width:640px ) {
  div.recently {
    width: 100%;
    padding: 5px 10px;
  }
  div.recently dl dt, div.recently dl dd {
    font-size: 1.6rem;
    line-height: 3.2rem;
  }
}

div.recently dl dt {
  padding-bottom: inherit;
}
div.recently dl dt span.date {
  color: #7E7E7E;
}
div.recently dl dt span.title {
  color: black;
  font-weight: bold;
}

div.recently dl dd a {
  color: #005BAC;
}