@charset "UTF-8";
/* http://meyerweb.com/eric/tools/css/reset/ 
 v2.0 | 20110126
 License: none (public domain)
 */
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  position: relative;
  top: 0;
  background: #fff;
  width: 100%;
  color: #221815;
  font-size: 16px;
  z-index: 1;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans" , "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "MS PGothic", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: normal;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden; }

img {
  max-width: 100%;
  height: auto;
  width: auto; }

a {
  text-decoration: none;
  color: #221815; }

.section-header strong {
  font-family: 'Montserrat', sans-serif;
  -o-transform: rotate(0.05deg);
  -ms-transform: rotate(0.05deg);
  -moz-transform: rotate(0.05deg);
  -webkit-transform: rotate(0.05deg);
  transform: rotate(0.05deg); }

.section-header h2,
.section-header p {
  font-family: 'Sawarabi Mincho', sans-serif;
  -o-transform: rotate(0.05deg);
  -ms-transform: rotate(0.05deg);
  -moz-transform: rotate(0.05deg);
  -webkit-transform: rotate(0.05deg);
  transform: rotate(0.05deg); }

.sp_only_s {
  display: block; }
  @media screen and (min-width: 479px) {
    .sp_only_s {
      display: none; } }

.sp_only {
  display: block; }
  @media screen and (min-width: 768px) {
    .sp_only {
      display: none; } }

.pc_only {
  display: none; }
  @media screen and (min-width: 768px) {
    .pc_only {
      display: block; } }

#header {
  padding: 16px;
  border-bottom: 1px solid #23ac6a; }
  @media screen and (min-width: 768px) {
    #header {
      border-bottom: none; } }
  #header .logo {
    max-width: 170px; }
    @media screen and (min-width: 768px) {
      #header .logo {
        max-width: 341px; } }

#main {
  /* #human-first-lab
  ---------------------------------------------------*/ }
  #main .hero {
    display: flex;
    justify-content: center;
    margin: 0 auto 16px;
    max-width: 1300px;
    width: 100%; }
    @media screen and (min-width: 768px) {
      #main .hero {
        margin: 0 auto 32px; } }
    #main .hero .col-1 {
      position: relative;
      width: 20%;
      display: flex;
      justify-content: space-between;
      flex-direction: column; }
    #main .hero .col-2 {
      position: relative;
      width: 60%;
      z-index: 1; }
      #main .hero .col-2 .inner {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin: 0 calc(50% - 50vw);
        width: 94vw;
        padding: 5vh 3vw 10vh; }
        @media screen and (min-width: 768px) {
          #main .hero .col-2 .inner {
            margin: 0 auto;
            width: 100%;
            padding: 0; } }
    #main .hero .col-3 {
      position: relative;
      width: 20%;
      display: flex;
      justify-content: space-between;
      flex-direction: column; }
    #main .hero .hero1 {
      max-width: 676px;
      width: 100%;
      margin: 0 auto 1rem;
      padding: 0;
      position: relative;
      margin-top: 25px;
      font-size: 19px;
      text-align: center;
      font-family: 'Sawarabi Mincho', sans-serif; }
      @media screen and (min-width: 768px) {
        #main .hero .hero1 {
          font-size: 32px; } }
      #main .hero .hero1 span {
        padding: 0 12px; }
        #main .hero .hero1 span.marker {
          background: linear-gradient(transparent 70%, #23ac6a 0%);
          display: inline;
          padding: -8px 0 4px; }
    #main .hero .hero2 {
      max-width: 624px;
      width: 100%;
      margin: 0 auto 1rem; }
    #main .hero .hero3 {
      max-width: 312px;
      width: 100%;
      margin: 0 auto 1rem; }
    #main .hero .hero_text {
      text-align: center;
      font-size: 14px;
      font-weight: 400;
      font-family: 'Noto Sans JP', sans-serif;
      line-height: 2;
      letter-spacing: -1px; }
      @media screen and (min-width: 768px) {
        #main .hero .hero_text {
          font-size: 18px;
          font-weight: 500; } }
    #main .hero .hero-img1 {
      max-width: 228px;
      width: 100%;
      z-index: 1;
      margin-left: auto; }
    #main .hero .hero-img2 {
      max-width: 168px;
      width: 100%;
      margin-right: auto; }
    #main .hero .hero-img3 {
      max-width: 193px;
      width: 100%;
      margin-right: auto; }
    #main .hero .hero-img4 {
      max-width: 202px;
      width: 100%;
      margin-left: auto; }
  #main .localNav {
    background-color: #27a55a;
    padding: 40px 16px 40px;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center; }
    #main .localNav_lead {
      margin: 0 auto 1rem;
      color: #fff;
      font-weight: bold;
      font-size: 19px;
      letter-spacing: .4rem; }
    #main .localNav_title {
      max-width: 396px;
      margin: 0 auto 2rem; }
    #main .localNav_inner {
      border: 1px solid #fff;
      border-radius: 18px;
      padding: 0;
      max-width: 1000px;
      width: 100%;
      margin: 0 auto;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box; }
      #main .localNav_inner ul {
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem 2rem;
        padding: 16px 24px; }
        #main .localNav_inner ul li {
          font-size: 16px;
          font-weight: 500;
          font-family: 'Noto Sans JP', sans-serif;
          color: #fff;
          position: relative;
          display: block;
          margin-bottom: 12px; }
          #main .localNav_inner ul li::after {
            content: '';
            width: 8px;
            height: 8px;
            border-top: solid 1px #fff;
            border-right: solid 1px #fff;
            position: absolute;
            left: 0;
            right: 0;
            bottom: -10px;
            margin: 0 auto;
            transform: rotate(135deg); }
          #main .localNav_inner ul li a {
            color: #fff;
            transition: all .2s; }
            #main .localNav_inner ul li a:hover {
              opacity: .8; }
  #main .ideas {
    padding: 3% 16px;
    background: url(../images/items_bgr.png);
    background-position: top center; }
    #main .ideas .refined {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      max-width: 1000px;
      width: 100%;
      margin: 0 auto;
      gap: 0 3.85%; }
      @media screen and (min-width: 768px) {
        #main .ideas .refined {
          flex-direction: row;
          flex-wrap: wrap;
          gap: 0 3.85%; } }
      #main .ideas .refined li {
        position: relative;
        max-width: 347px;
        width: 100%;
        height: 146px;
        margin-bottom: 2rem;
        background: url(../images/item_bgr_sp.png) no-repeat;
        background-position: top center;
        background-size: contain;
        display: flex;
        align-items: center;
        flex-direction: column; }
        @media screen and (min-width: 375px) {
          #main .ideas .refined li {
            max-width: 347px;
            width: 100%;
            height: 180px; } }
        @media screen and (min-width: 768px) {
          #main .ideas .refined li {
            width: 307px;
            height: 350px;
            margin-bottom: 2rem;
            background: url(../images/item_bgr.png) no-repeat;
            background-position: top center;
            background-size: cover; } }
        #main .ideas .refined li > a {
          display: block;
          width: 100%;
          height: 100%;
          transition: all 0.2s; }
          #main .ideas .refined li > a:hover {
            opacity: 0.8; }
        #main .ideas .refined li .number {
          font-size: 24px;
          font-weight: 500;
          text-align: center;
          margin: 10px auto 10px;
          font-family: 'Noto Sans JP', sans-serif;
          display: block; }
          @media screen and (min-width: 375px) {
            #main .ideas .refined li .number {
              font-size: 33px;
              font-weight: 500;
              text-align: center;
              margin: 20px auto 10px; } }
          #main .ideas .refined li .number:before {
            content: "NO.";
            display: inline-block;
            margin-left: -12px;
            padding-right: 5px;
            font-size: 14px;
            color: #27a55a; }
        #main .ideas .refined li figure {
          display: flex;
          justify-content: space-between;
          flex-direction: column;
          margin: 0 auto; }
          #main .ideas .refined li figure > figcaption {
            font-size: 16px;
            font-weight: 500;
            text-align: center;
            margin: 0 auto;
            height: 48px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: 'Noto Sans JP', sans-serif; }
            @media screen and (min-width: 375px) {
              #main .ideas .refined li figure > figcaption {
                font-size: 18px;
                height: 56px; } }
            @media screen and (min-width: 768px) {
              #main .ideas .refined li figure > figcaption {
                margin: 5px auto 10px; } }
          #main .ideas .refined li figure img {
            display: none; }
            @media screen and (min-width: 768px) {
              #main .ideas .refined li figure img {
                display: block;
                width: 80%;
                margin: 0 auto; } }
        #main .ideas .refined li .icon {
          width: 14px;
          height: 14px;
          border-top: solid 2px #27a55a;
          border-right: solid 2px #27a55a;
          margin: 0 auto;
          transform: rotate(135deg); }
          @media screen and (min-width: 375px) {
            #main .ideas .refined li .icon {
              width: 16px;
              height: 16px; } }
          @media screen and (min-width: 768px) {
            #main .ideas .refined li .icon {
              margin: 25px auto; } }
  #main .section-inner {
    position: relative;
    margin: 0 30px;
    z-index: 30; }
  #main .section-inner + .section-inner {
    margin-top: 40px; }
  #main .section-header {
    position: relative;
    padding: 0 0 30px; }
  #main .section-header h2 i {
    position: relative;
    z-index: 50; }
  #main .section-header h2 i > i {
    letter-spacing: -2px;
    margin: 0 4px 0 0; }
  #main .section-header > strong {
    position: relative;
    display: inline-block;
    padding: 0 25px 0 0;
    font-size: 12px; }
  #main .section-header > strong:after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -0.5px;
    display: block;
    height: 1px;
    width: 15px;
    background: #000; }
  #main .section-header h2 {
    position: relative;
    margin-top: 20px;
    font-size: 19px; }
  #main .section-header h2 span {
    position: relative;
    display: block; }
  #main .section-header h2 em {
    position: relative; }
  #main .section-header h2 em:after {
    left: 0;
    bottom: 1px;
    height: 7px; }
  #main .section-header p i {
    position: relative;
    z-index: 50; }
  #main .section-inner .lead p {
    font-size: 20px; }
  #main .section-header h2 span {
    padding: 0 12px; }
    #main .section-header h2 span.marker {
      background: linear-gradient(transparent 70%, #23ac6a 0%);
      display: inline;
      padding: -8px 0 4px; }
  @media screen and (min-width: 768px) {
    #main .section-inner {
      position: relative;
      margin: auto;
      max-width: 1040px;
      padding: 0 20px;
      box-sizing: border-box;
      z-index: 30; }
    #main .section-header {
      position: relative;
      padding: 0 0 60px; }
    #main #pickup .section-header {
      padding: 0 0 30px; }
    #main .section-header h2 i {
      position: relative;
      z-index: 50; }
    #main .section-header h2 i > i {
      letter-spacing: -4px;
      margin: 0 9px 0 0; }
    #main .section-inner + .section-inner {
      margin-top: 100px; }
    #main .section-header > strong {
      position: relative;
      display: inline-block;
      padding: 0 40px 0 0;
      font-size: 20px; }
    #main .section-header > strong:after {
      content: "";
      position: absolute;
      right: 0;
      top: 50%;
      margin-top: -0.5px;
      display: block;
      height: 1px;
      width: 28px;
      background: #000; }
    #main .section-header h2 {
      position: relative;
      margin-top: 25px;
      font-size: 46px; }
    #main .section-header h2 span {
      position: relative;
      display: block; }
    #main .section-header h2 em {
      position: relative; }
    #main .section-header h2 em:after {
      left: 0;
      bottom: 6px;
      height: 16px; }
    #main .section-header p i {
      position: relative;
      z-index: 50; }
    #main .section-inner .lead p {
      font-size: 20px; } }
  #main #human-first-lab {
    padding: 30px 0; }
  #main #human-first-lab figure img {
    width: 100%;
    height: auto; }
  #main #human-first-lab .col-hfl .col-txt {
    padding: 30px 0 0; }
  #main #human-first-lab .col-txt p {
    line-height: 1.8; }
  #main #human-first-lab .col-txt p + p {
    margin-top: 20px; }
  #main #human-first-lab .col-hf .col-txt {
    padding: 0 0 50px; }
  @media screen and (min-width: 768px) {
    #main #human-first-lab {
      padding: 100px 0; }
    #main #human-first-lab .col-hfl {
      display: flex;
      align-items: center; }
    #main #human-first-lab .col-hfl figure {
      width: 381px; }
    #main #human-first-lab figure img {
      width: 100%;
      height: auto; }
    #main #human-first-lab .col-hfl .col-txt {
      padding: 0 0 0 60px; }
    #main #human-first-lab .col-txt p {
      font-size: 18px;
      line-height: 1.8; }
    #main #human-first-lab .col-txt p + p {
      margin-top: 50px; }
    #main #human-first-lab .col-hf .col-txt {
      padding: 0 0 70px; } }

.conversion {
  background-color: #27a55a;
  padding: 40px 16px;
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }
  .conversion-inner {
    max-width: 1000px;
    width: 100%;
    margin: 0 auto 30px;
    display: flex;
    justify-content: center; }
  .conversion-btn {
    width: 100%;
    border-radius: 10px;
    border: 1px solid #fff;
    margin: 0 auto;
    max-width: 460px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; }
    .conversion-btn a {
      padding: 16px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      transition: all 0.2s; }
      .conversion-btn a:hover {
        opacity: 0.8; }
      .conversion-btn a span {
        color: #fff;
        font-size: 16px;
        position: relative;
        display: block;
        padding: 5px 0;
        margin-bottom: 12px; }
        .conversion-btn a span::after {
          content: '';
          width: 12px;
          height: 12px;
          border-top: solid 2px #fff;
          border-right: solid 2px #fff;
          position: absolute;
          left: 0;
          right: 0;
          bottom: -10px;
          margin: 0 auto;
          transform: rotate(135deg); }
      .conversion-btn a > img {
        width: 45px; }
  .conversion .col-1 {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-direction: column;
    width: 75%;
    font-size: 14px;
    color: #fff;
    text-align: left;
    line-height: 2; }
    @media screen and (min-width: 768px) {
      .conversion .col-1 {
        font-size: 16px; } }
  .conversion .col-2 {
    flex-basis: 25%; }
    .conversion .col-2 img {
      margin-right: auto;
      width: 190px; }

.footer_logo {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 40px auto;
  padding: 0 16px; }
  .footer_logo img {
    max-width: 480px;
    width: 100%; }

#gfooter {
  position: relative;
  padding: 35px 30px; }

#gfooter .foot-logo img {
  width: 210px;
  height: auto; }

#gfooter p {
  margin-top: 30px;
  font-size: 9px; }

@media screen and (min-width: 768px) {
  #gfooter {
    position: relative;
    padding: 50px; }

  #gfooter .foot-logo img {
    width: 232px;
    height: auto; }

  #gfooter p {
    margin-top: 50px;
    font-size: 12px; } }
#detail .localNav {
  background-color: #27a55a;
  padding: 40px 16px 40px;
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center; }
  #detail .localNav_inner {
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; }
    #detail .localNav_inner ul {
      list-style: none;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      gap: 1rem 2rem;
      padding: 16px 24px; }
      #detail .localNav_inner ul li {
        font-size: 16px;
        font-weight: 500;
        font-family: 'Noto Sans JP', sans-serif;
        color: #fff; }
#detail .content {
  margin: 0 auto;
  background-color: #ecf7ea;
  padding: 30px 16px;
  text-align: center; }
  #detail .content img {
    max-width: 1200px;
    width: 100%;
    margin-bottom: 30px; }
    @media screen and (min-width: 768px) {
      #detail .content img {
        margin-bottom: 60px; } }
  @media screen and (min-width: 768px) {
    #detail .content {
      padding: 60px; } }

.pageBack_btn {
  margin: auto; }
  .pageBack_btn a {
    max-width: 280px;
    width: 100%;
    margin: 0 auto;
    border: 1px solid #27a55a;
    border-radius: 50px;
    padding: 10px 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #fff;
    color: #27a55a;
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    transition: all 0.2s; }
    .pageBack_btn a:before {
      position: absolute;
      content: "";
      width: 13px;
      height: 13px;
      border-top: solid 1px #27a55a;
      border-right: solid 1px #27a55a;
      left: 16px;
      right: 0;
      transform: rotate(-135deg); }
    .pageBack_btn a:hover {
      opacity: 0.8; }

.contentBack_btn {
  margin: auto; }
  .contentBack_btn a {
    width: 50px;
    height: 50px;
    margin: 0 auto;
    border: 1px solid #27a55a;
    border-radius: 50px;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #27a55a;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    transition: all 0.2s; }
    .contentBack_btn a:before {
      position: absolute;
      content: "";
      width: 12px;
      height: 12px;
      border-top: solid 2px #fff;
      border-right: solid 2px #fff;
      left: 0;
      right: 0;
      top: 5px;
      bottom: 0;
      margin: auto;
      transform: rotate(-45deg); }
    .contentBack_btn a:hover {
      opacity: 0.8;
      background-color: #fff;
      color: #27a55a; }
      .contentBack_btn a:hover:before {
        border-top: solid 2px #27a55a;
        border-right: solid 2px #27a55a; }

#pageTop {
  position: fixed;
  width: 50px;
  height: 50px;
  right: 16px;
  bottom: 16px;
  z-index: 1;
  cursor: pointer; }
  #pageTop a {
    width: 50px;
    height: 50px;
    margin: 0 0 0 auto;
    border: 1px solid #27a55a;
    border-radius: 50px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #27a55a;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    transition: all 0.2s; }
    #pageTop a:before {
      position: absolute;
      content: "";
      width: 12px;
      height: 12px;
      border-top: solid 2px #fff;
      border-right: solid 2px #fff;
      left: 0;
      right: 0;
      top: 5px;
      bottom: 0;
      margin: auto;
      transform: rotate(-45deg); }
    #pageTop a:hover {
      opacity: 0.8;
      background-color: #fff;
      color: #27a55a; }
      #pageTop a:hover:before {
        border-top: solid 2px #27a55a;
        border-right: solid 2px #27a55a; }

/*# sourceMappingURL=style.css.map */