@charset "utf-8";

/*================================================
  research
================================================*/
.page-header {
  background-image: url(../../../image/karat-kun/research-data/page_header_bg.jpg);
  background-position:left center;
}


/*------------------------------------------------
  research-date
------------------------------------------------*/

.research-date {
  display: grid;
  gap: 40px;
  margin-top: 4em;
}

.research-item {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0.1em 0.1em 20px rgba(129, 129, 129, 0.5);
}
.research-item-body {
  padding:1.5em 1.75em;
}
.research-item-body-wide {
  padding:1.5em 1.75em;
}

.research-item-title {
  color: var(--primary-color);
  /* font-size: clamp(1.6rem, 1.44rem + 0.8vw, 2.4rem); */
  font-size: clamp(1.8rem, 1.72rem + 0.4vw, 2.2rem);
  font-weight: 700;
  line-height: 1.8;
  margin: 0.5em 0;
}

.research-item-img {
  padding: 1.5em;
}
.research-item-img.two-item {
  display: grid;
  gap: 20px;
}
.research-item-img.bg-img {
  height: 170px;
  background-size: cover;
  background-position: center center;
  background-image: url(../../../image/karat-kun/research-data/research_item_img_co2.jpg);
}

@media print,screen and (min-width: 590px) {
  .research-item-body {
    padding:2em 2.25em;
  }
  .research-item-body-wide {
    padding:2em 2.25em;
  }
  .research-item-img {
    padding: 1.5em 2.25em;
  }
}

@media print,screen and (min-width: 769px) {
  .research-item {
    border-radius: 30px;
    box-shadow: 10px 10px 40px rgba(129, 129, 129, 0.5);
  }
}

@media print,screen and (min-width: 960px) {
  .research-item {
    display: flex;
    flex-wrap: wrap;
    /* align-items: center; */
    align-items: stretch;
  }
  .research-item-body {
    width: 50%;
    padding:2.75em 0 2.75em 3em;
  }
  .research-item-img {
    width: 50%;
    padding:2.75em 3em;
  }
  .research-item-img.bg-img {
    height: 100%;
    width: calc(50% - 3em);
    margin-left: auto;
  }
  .research-item-body-wide {
    padding:2.75em 3em;
  }
}


@media print,screen and (min-width: 1600px) {
  .research-item-body {
    padding: 4em 0 4em 4em;
  }
  .research-item-title {
    font-size: 2.4rem;
    margin:0 0 1em;
  }
  .research-item-img {
    padding: 4em;
  }
  .research-item-body-wide {
    padding: 4em;
  }
}


/*------------------------------------------------
  materials-img
------------------------------------------------*/
.materials-img > img {
  border: 1px solid var(--color-gray-dark);
  padding: 1px;
}

/*------------------------------------------------
  merit-list
------------------------------------------------*/
.merit-list {
  display: grid;
  gap: 40px;
  margin-top: 3em;
}
.merit-item {
  /* padding:2em 1.5em 1.5em; */
  padding: 2em 1.75em 1.75em;
  background-color: rgba(var(--secondary-color-rgb),0.23);
  position: relative;
}
.merit-item-title {
  color: var(--color-white);
  background-color: var(--secondary-color);
  /* font-size: clamp(1.6rem, 1.44rem + 0.8vw, 2.4rem); */
  font-size: clamp(1.8rem, 1.64rem + 0.8vw, 2.6rem);
  font-weight: 900;
  line-height: 1;
  padding:0.5em 1em;
  border-radius: 2em;
  display: inline-block;
  position: absolute;
  left: 0;
  top: -1em;
}
.research-item p {
  font-size: clamp(1.4rem, 1.32rem + 0.4vw, 1.8rem);
}
.research-item p.formula {
  color: var(--color-gray-dark);
  font-size: clamp(1rem, 0.91rem + 0.45vw, 1.45rem);
  font-weight: 700;
  margin: 1.5em 0;
}
@media print,screen and (min-width: 1600px) {
  .merit-list {
    margin-top: 4.5em;
    gap: 50px;
  }
}

/*------------------------------------------------
  research-item-dl
------------------------------------------------*/

.research-item-dl {
  width: 100%;
}
.research-item-dl .content-title-horizon {
  margin-bottom: 0;
}
.research-item-dl .content-title-horizon span {
  font-size: clamp(1.6rem, 1.52rem + 0.4vw, 2rem);
}


/*------------------------------------------------
  research-date-table
------------------------------------------------*/

.research-date-table-list {
  display: grid;
  gap: 2em;
  padding: 1.5em 1.75em;
  width: 100%;
}

.research-date-table-item .content-title-label {
  /* font-size: clamp(1.6rem, 1.52rem + 0.4vw, 2rem); */
  font-size: clamp(1.2rem, 1.04rem + 0.8vw, 2rem);
  line-height: 1.25;
  padding: 0.75em 0.25em;
  text-align: center;
}

.research-date-table {
  width:100%;
}
.research-date-table thead th {
  color: var(--color-white);
  background-color: #293A3D;
  font-weight: 900;
}
.research-date-table tbody tr:nth-child(odd) td {
  background-color: var(--color-white);
}
.research-date-table tbody tr:nth-child(even) td {
  background-color: #D4DBE2;
}
.research-date-table th,
.research-date-table td {
  /* font-size: 1.2rem; */
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.6rem);
  padding:0.75em 0.25em;
  line-height: 1.25;
  text-align: center;
}

/* .research-date-table th {
  font-size: clamp(1.6rem, 1.56rem + 0.2vw, 1.8rem);
}
.research-date-table td {
  font-size: clamp(1.2rem, 1.12rem + 0.4vw, 1.6rem);
} */

.research-date-table tr th:not(:last-of-type),
.research-date-table tr td:not(:last-of-type) {
  border-right: 1px solid var(--color-gray-dark);
}
@media print,screen and (min-width: 769px) {
  .research-date-table-list {
    grid-template-columns: 1fr 1fr;
    gap: 1em;
  }
  .research-date-table th {
  font-size: clamp(1.6rem, 1.4664rem + 0.278vw, 1.8rem);
  }
}
@media print,screen and (min-width: 1200px) {
  .research-date-table-list {
    gap: 2em;
  }
}

/*------------------------------------------------
  notes
------------------------------------------------*/

.annotation {
  font-size: clamp(1rem, 0.92rem + 0.4vw, 1.4rem);
  line-height: 1.5;
  display: block;
  margin-top: 0.5em;
}

p.source {
  font-size: clamp(1rem, 0.92rem + 0.4vw, 1.4rem);
  text-align: right;
}

p.notes {
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.2rem);
  margin: 2em 0 0;
}