@charset "UTF-8";



.region-1 {

  --region-color1: #ED911D;

  --region-color2: #F5BE7B;

}

.region-2 {

  --region-color1: #3EB135;

  --region-color2: #A2D082;

}

.region-3 {

  --region-color1: #67BCC2;

  --region-color2: #AFD7DB;

}

.region-4 {

  --region-color1: #DE0723;

  --region-color2: #E98368;

}

.region-5 {

  --region-color1: #EF8784;

  --region-color2: #F6BCB5;

}

.region-6 {

  --region-color1: #4D4398;

  --region-color2: #9487BF;

}

.region-7 {

  --region-color1: #804F22;

  --region-color2: #AE8C67;

}

.region-8 {

  --region-color1: #727171;

  --region-color2: #B0B1B1;

}



sub,sup {

  font-size: 0.7em;

}



.pageTitle {

  background-image: url(../img/connected_research/img-seeds_main.jpg);

}



/*=============================

* 一覧ページ・検索ボックス

=============================*/#searchBox {

  background-color: var(--main-green4);

}

#searchBox .searchArea h2 {

  color: var(--main-green1);

  font-weight: bold;

}

#searchBox .searchArea .inputArea {

  width: 100%;

}

#searchBox .searchArea .inputArea form {

  position: relative;

  width: 100%;

}

#searchBox .searchArea .inputArea form .inputText {

  border-radius: 20px;

  padding: 0 50px 0 20px;

  border: none;

  outline: none;

  width: 100%;

  height: 40px;

}

#searchBox .searchArea .inputArea form .submit {

  position: absolute;

  top: 0;

  right: 0;

  z-index: 1;

  border-radius: 50%;

  width: 40px;

  height: 40px;

  background-color: var(--main-green1);

  padding: 9px;

}

#searchBox .searchLinkPdf span {

  background-image: url(../img/connected_research/icon-pamphlet.png);

  background-repeat: no-repeat;

  background-position: center left;

  display: flex;

  align-items: center;

}



#reseachListTable {

  margin-top: 50px;

}

#reseachListTable th {

  color: #fff;

}

#reseachListTable :is(th,td) {

  text-align: left;

}

#reseachListTable thead th {

  background-color: var(--main-green1);

}

#reseachListTable tbody th {

  background-color: var(--region-color1);

}





/* ここから1261以上

--------------------------------------- */

@media all and (min-width: 1261px) {

  #searchBox {

    padding: 20px;

  }

  #searchBox .searchArea {

    display: flex;

    align-items: center;

  }

  #searchBox .searchArea h2 {

    font-size: 2rem;

    line-height: 1.5;

    padding-right: 20px;

    flex-shrink: 0;

  }

  #searchBox .searchArea .inputArea {

    border-left: 1px solid var(--main-green1);

    padding-left: 20px;

  }

  #searchBox .searchArea .inputArea > p {

    margin-bottom: 15px;

  }

  #searchBox .searchLinkPdf {

    max-width: none;

    width: fit-content;

    padding-left: 40px;

    padding-right: 40px;

    margin-top: 30px;

    margin-bottom: 0;

  }

  #searchBox .searchLinkPdf span {

    background-size: 40px auto;

    padding-left: 50px;

    min-height: 33px;

  }

  #reseachListTable .col-genre {

    width: 20%;

  }

  #reseachListTable .col-name {

    width: 30%;

  }

}



/* ここまで1261以上

--------------------------------------- */

/* ここから1260以下

--------------------------------------- */

@media screen and (max-width: 1260px) {

  #searchBox {

    padding: 12px 20px 20px;

  }

  #searchBox .searchArea h2 {

    font-size: 1.6rem;

    line-height: 1.875;

    text-align: center;

    padding-bottom: 3px;

    margin: 0 0 13px;

    border-bottom: 2px solid var(--main-green1);

  }

  #searchBox .searchArea .inputArea {

  }

  #searchBox .searchArea .inputArea > p {

    margin-bottom: 5px;

    text-align: center;

  }

  #searchBox .searchLinkPdf {

    padding-left: 20px;

    padding-right: 20px;

    margin-top: 30px;

    margin-bottom: 0;

  }

  #searchBox .searchLinkPdf span {

    background-size: 33px auto;

    padding-left: 43px;

    min-height: 27.5px;

  }

  #reseachListTable {

    border-collapse: separate;

    border-spacing: 0 10px;



  }

  #reseachListTable thead {

    display: none;

  }

  #reseachListTable :is(th,td) {

    display: block;

  }

  #reseachListTable tr  :is(th,td):not(:last-child) {

    border-bottom: none;

  }

}



/*=============================

* 各研究ページ

=============================*/

#researchDetail .regionName {

  font-weight: bold;

}

#researchDetail .regionName .label {

  background-color: var(--region-color1);

  color: #fff;

  text-align: center;

}

#researchDetail .reserachLabel-1 {

  position: relative;

  background-color: var(--region-color1);

  color: #fff;

}

#researchDetail .reserachLabel-1:before,

#researchDetail .reserachLabel-1:after {

  content: "";

  display: block;

  width: 0;

  height: 0;

  border-style: solid;

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

}

#researchDetail .reserachLabel-1:before {

  border-color: transparent var(--region-color1) transparent transparent;

}

#researchDetail .reserachLabel-1:after {

  border-color: transparent transparent transparent var(--region-color1);

}

#researchDetail .aboutResearch {

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

}

#researchDetail .aboutResearch .professor .detail {

  display: flex;

  order: 1;

}

#researchDetail .aboutResearch .professor .detail > img {

  flex-shrink: 0;

}

#researchDetail .aboutResearch .professor .detail .profile {

  align-self: flex-end;

}

#researchDetail .aboutResearch .professor .detail .profile .name {

  font-weight: bold;

}

#researchDetail .aboutResearch .researchLinkPdf {

  display: block;

  align-self: center;

  flex-shrink: 0;

}

#researchDetail .aboutResearch .researchLinkPdf img {

  display: block;

}

#researchDetail .researchTitle {

  background-color: var(--region-color1);

}

#researchDetail .researchTitle h2 {

  color: #fff;

  font-weight: bold;

  text-align: center;

}

#researchDetail .researchTitle h2 span {

  display: block;

}

#researchDetail .researchTitle .keywords {

  text-align: center;

  background-color: #fff;

}

#researchDetail .researchTitle .keywords .label {

  color: var(--region-color1);

  position: relative;

  font-weight: bold;

}

#researchDetail .researchTitle .keywords .label:before,

#researchDetail .researchTitle .keywords .label:after {

  content: "";

  display: block;

  position: absolute;

  transform: translateY(-50%);

  background-color: var(--region-color1);

  border-radius: 50%;

}

#researchDetail .researchTitle .keywords .label:before {

  left: 0;

}

#researchDetail .researchTitle .keywords .label:after {

  right: 0;

}

#researchDetail .researchArticleTitle {

  background-image: linear-gradient(to right, var(--region-color1) 75%, #fff 100%);

  color: #fff;

  font-weight: bold;

}

#researchDetail .detailArea .text,

#researchDetail .detailArea figure {

  display: block;

}

#researchDetail .detailArea .text p:last-child {

  margin-bottom: 0;

}

#researchDetail .detailArea figure {

  margin: 0;

}

#researchDetail .detailArea figure img {

  display: block;

  margin: 0 auto;

}

#researchDetail .detailArea figure figcaption {

  text-align: center;

}

#researchDetail .relatedArea {

  border: 2px solid #333;

}

#researchDetail .relatedArea h4 {

  background-color: var(--region-color2);

  display: flex;

  justify-content: center;

}

#researchDetail .relatedArea p:last-child {

  margin-bottom: 0;

}

#researchDetail .appealArea p:last-child {

  margin-bottom: 0;

}

#researchDetail .researchContactLink img {

  display: block;

}



/* ここから1261以上

--------------------------------------- */

@media all and (min-width: 1261px) {

  #researchDetail > article {

    margin-top: 20px;

    margin-bottom: 10px;

  }

  #researchDetail .regionName {

    border-bottom: 2px solid var(--region-color1);

    display: flex;

    margin-bottom: 20px;

  }

  #researchDetail .regionName .label {

    border-top-left-radius: 8px;

    border-top-right-radius: 8px;

    font-size: 1.8rem;

    letter-spacing: -0.02em;

    min-width: 400px;

    width: fit-content;

    flex-shrink: 0;

    line-height: 1.555;

    padding: 7px 15px 4px;

  }

  #researchDetail .regionName .name {

    font-size: 2.4rem;

    line-height: 1.6;

    padding-left: 20px;

  }

  #researchDetail .reserachLabel-1 {

    display: inline-block;

    line-height: 1.625;

    padding: 2px 17px;

    margin: 0 20px 0 15px;

  }

  #researchDetail .reserachLabel-1:before {

    border-width: 15px 15px 15px 0;

    left: -15px;

  }

  #researchDetail .reserachLabel-1:after {

    border-width: 15px 0 15px 15px;

    right: -15px;

  }

  #researchDetail .aboutResearch {

    margin-top: 20px;

  }

  #researchDetail .aboutResearch .professor {

    display: flex;

    flex-wrap: wrap;

    flex-shrink: 0;

    gap: 20px;

    align-items: center;

    width: calc(100% - 135px);

  }

  #researchDetail .aboutResearch .professor .detail {

    width: 332px;

    flex-shrink: 0;

  }

  #researchDetail .aboutResearch .professor .detail > img {

    width: 120px;

    margin-right: 10px;

  }

  #researchDetail .aboutResearch .professor .detail .profile {

    align-self: flex-end;

  }

  #researchDetail .aboutResearch .professor .detail .profile :is(.affiliation,.name-en) {

    font-size: 1.4rem;

    line-height: 1.75;

  }

  #researchDetail .aboutResearch .professor .detail .profile .name {

    font-size: 2.4rem;

    line-height: 1.416;

  }

  #researchDetail .aboutResearch .professor .detail .profile .name .name-en {

    margin-left: 12px;

  }

  #researchDetail .aboutResearch .professor .detail .profile .name + .affiliation {

    margin-top: 5px;

  }

  #researchDetail .aboutResearch .researchLinkPdf {

    width: 120px;

    margin-left: 15px;

  }

  #researchDetail .aboutResearch .relatedUrl {

    width: 100%;

    margin-top: 20px;

  }

  #researchDetail .researchTitle {

    padding: 16px 18px 20px;

    margin-top: 20px;

  }

  #researchDetail .researchTitle h2 {

    font-size: 3.6rem;

    line-height: 1.111;

    margin: 0 0 18px;

  }

  #researchDetail .researchTitle h2 span {

    margin-top: 16px;

  }

  #researchDetail .researchTitle .keywords {

    line-height: 1.625;

    border-radius: 10px;

    padding: 2px 15px;

  }

  #researchDetail .researchTitle .keywords .label {

    padding: 0 19px;

    margin-right: 8px;

    display: inline-block;

  }

  #researchDetail .researchTitle .keywords .label:before,

  #researchDetail .researchTitle .keywords .label:after {

    top: calc(50% + 1px);

    width: 14px;

    height: 14px;

  }

  #researchDetail .researchArticleTitle {

    font-size: 2rem;

    line-height: 1.5;

    margin: 0 0 10px;

    padding: 5px 30px 5px 20px;

    border-top-left-radius: 20px;

    border-bottom-left-radius: 20px;

  }

  #researchDetail .detailArea {

    display: flex;

    flex-wrap: wrap;

    gap: 20px 40px;

    margin-bottom: 15px;

  }

  #researchDetail .detailArea > div {

    width: calc(50% - 20px);

  }

  #researchDetail .detailArea > div:only-child {

    width: 100%;

  }

  #researchDetail .detailArea > div > * + * {

    margin-top: 20px;

  }

  #researchDetail .detailArea .text p {

    font-size: 1.8rem;

    line-height: 2.111;

  }

  #researchDetail .detailArea figure figcaption {

    line-height: 1.625;

  }

  #researchDetail .relatedArea {

    display: flex;

    padding: 20px;

    margin-bottom: 20px;

  }

  #researchDetail .relatedArea h4 {

    margin: 0 20px 0 0;

    line-height: 1.625;

    width: 180px;

    flex-shrink: 0;

  }

  #researchDetail .relatedArea h4 span {

    align-self: center;

    text-align: center;

  }

  #researchDetail .relatedArea p {

    line-height: 1.625;

  }

  #researchDetail .appealArea {

    display: flex;

    justify-content: space-between;

    gap: 60px;

    flex-wrap: wrap;

  }

  #researchDetail .appealArea > div {

    width: calc(50% - 30px);

  }

  #researchDetail .appealArea p {

    font-size: 1.8rem;

    line-height: 2.111;

  }

  #researchDetail .researchContactLink {

    display: block;

    width: fit-content;

    margin: 0 auto;

  }

  #researchDetail .backListLink {

    max-width: 360px;

  }

}



/* ここまで1261以上

--------------------------------------- */

/* ここから1260以下

--------------------------------------- */

@media screen and (max-width: 1260px) {

  #researchDetail > article {

    margin-top: 20px;

    margin-bottom: 15px;

  }

  #researchDetail .regionName {

    margin-bottom: 13px;

  }

  #researchDetail .regionName .label {

    display: block;

    border-top-left-radius: 10px;

    border-top-right-radius: 10px;

    min-width: 200px;

    width: fit-content;

    line-height: 1.2;

    padding: 6px 15px 5px;

  }

  #researchDetail .regionName .name {

    position: relative;

    display: block;

    font-size: 1.8rem;

    line-height: 1.555;

    padding-top: 15px;

  }

  #researchDetail .regionName .name:before {

    content: "";

    display: block;

    border-bottom: 2px solid var(--region-color1);

    width: 100%;

    height: 0;

    position: absolute;

    top: 0;

    left: 0;

  }

  #researchDetail .reserachLabel-1 {

    display: block;

    font-size: 1.2rem;

    line-height: 1.5;

    padding: 1px 13.5px;

    margin: 0 10px 6px 10px;

    width: fit-content;

  }

  #researchDetail .reserachLabel-1:before {

    border-width: 10px 10px 10px 0;

    left: -10px;

  }

  #researchDetail .reserachLabel-1:after {

    border-width: 10px 0 10px 10px;

    right: -10px;

  }

  #researchDetail .fieldName .name {

    font-size: 1.2rem;

    line-height: 1.833;

  }

  #researchDetail .aboutResearch {

    margin-top: 16px;

  }

  #researchDetail .aboutResearch .professor {

    flex-shrink: 0;

    width: 100%;

    margin-bottom: 18px;

  }

  #researchDetail .aboutResearch .professor .detail + .detail {

    margin-top: 20px;

  }

  #researchDetail .aboutResearch .professor .detail > img {

    width: 90px;

    margin-right: 10px;

  }

  #researchDetail .aboutResearch .professor .detail .profile {

    align-self: flex-end;

  }

  #researchDetail .aboutResearch .professor .detail .profile :is(.affiliation,.name-en) {

    font-size: 1.2rem;

    line-height: 1.833;

  }

  #researchDetail .aboutResearch .professor .detail .profile .name {

    font-size: 1.8rem;

    line-height: 1.555;

  }

  #researchDetail .aboutResearch .professor .detail .profile .name .name-en {

    margin-left: 9px;

  }

  #researchDetail .aboutResearch .professor .detail .profile .name + .affiliation {

    margin-top: 9px;

  }

  #researchDetail .aboutResearch .researchLinkPdf {

    width: 90px;

    margin-left: 15px;

    align-self: center;

    order: 3;

  }

  #researchDetail .aboutResearch .relatedUrl {

    width: calc(100% - 105px);

    align-self: center;

    order: 2;

  }

  #researchDetail .aboutResearch .relatedUrl a {

    font-size: 1.2rem;

    line-height: 1.833;

  }

  #researchDetail .researchTitle {

    padding: 14px 20px 20px;

    margin-top: 20px;

  }

  #researchDetail .researchTitle h2 {

    font-size: 2.4rem;

    line-height: 1.416;

    margin: 0 0 18px;

  }

  #researchDetail .researchTitle h2 span {

    margin-top: 10px;

  }

  #researchDetail .researchTitle .keywords {

    font-size: 1.2rem;

    line-height: 1.833;

    border-radius: 10px;

    padding: 4px 15px 5px;

  }

  #researchDetail .researchTitle .keywords .label {

    padding: 0 15px;

    display: block;

    width: fit-content;

    margin-left: auto;

    margin-right: auto;

  }

  #researchDetail .researchTitle .keywords .label:before,

  #researchDetail .researchTitle .keywords .label:after {

    top: calc(50% + 0.5px);

    width: 10px;

    height: 10px;

  }

  #researchDetail .researchArticleTitle {

    font-size: 1.6rem;

    line-height: 1.875;

    margin: 0 0 13px;

    padding: 5px 30px 5px 20px;

    border-top-left-radius: 20px;

    border-bottom-left-radius: 20px;

  }

  #researchDetail .detailArea {

    flex-direction: column;

    gap: 12px;

    margin-bottom: 15px;

  }

  #researchDetail .detailArea > div + div,

  #researchDetail .detailArea > div > * + * {

    margin-top: 12px;

  }

  #researchDetail .detailArea .text p {

    font-size: 1.6rem;

    line-height: 1.625;

  }

  #researchDetail .detailArea figure figcaption {

    font-size: 1.2rem;

    line-height: 1.833;

    margin-top: 2px;

  }

  #researchDetail .relatedArea {

    border-width: 1px;

    padding: 20px 20px 15px;

    margin-bottom: 20px;

  }

  #researchDetail .relatedArea h4 {

    margin: 0 0 15px 0;

    line-height: 1.714;

    min-height: 50px;

  }

  #researchDetail .relatedArea h4 span {

    align-self: center;

    text-align: center;

  }

  #researchDetail .relatedArea p {

    line-height: 1.714;

  }

  #researchDetail .appealArea p {

    font-size: 1.6rem;

    line-height: 1.625;

  }

  #researchDetail .appealArea .appeal + .appeal {

    margin-top: 15px;

  }

  #researchDetail .researchContactLink {

    display: block;

    width: fit-content;

    margin: 0 auto;

  }

}