@charset "UTF-8";

.kv .heading {
    color: #1B5245;
}

.kv .heading .label {
    color: #fff;
    background: #1B5245;
}

@media screen and (min-width : 769px) {
    body[data-type="lab"] #contents {
        padding: 32px 0 98px 0;
    }

    .heading .sub {
        font-size: 18px;
        line-height: 1;
        letter-spacing: 0.06em;
        display: block;
        margin-bottom: 10px;
    }

    .heading .main {
        font-size: 60px;
        line-height: 1;
        letter-spacing: 0;
        margin-right: 17px;
    }

    .heading .label {
        font-size: 22px;
        line-height: 1;
        letter-spacing: 0.06em;
        text-align: center;
        vertical-align: middle;
        display: inline-block;
        padding: 10px 12px;
        vertical-align: top;
        margin: 10px 0;
    }

    .kv .inner {
        max-width: 1120px;
        margin: 0 auto;
        padding: 50px 0;
    }

    .kv .swiper-button-prev {
        width: 47px;
        height: 47px;
        background: url(/assets/img/facility/lab/prev.svg) no-repeat;
        left: 38px;
        margin-top: -43px;
    }

    .kv .swiper-button-next {
        width: 47px;
        height: 47px;
        background: url(/assets/img/facility/lab/next.svg) no-repeat;
        right: 38px;
        margin-top: -43px;
    }

    .kv .swiper-button-prev:after,
    .kv .swiper-button-next:after {
        content: none;
    }

    .kv .swiper-wrapper {
        padding-bottom: 43px;
    }

    .kv .swiper-pagination-bullet {
        width: 9px;
        height: 9px;
        background: rgba(29, 84, 70, 0.4);
        opacity: 1;
    }

    .kv .swiper-pagination-bullet-active {
        background: rgba(29, 84, 70, 1);
    }

    .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
        margin: 0 7px;
    }

    .anchor {
        display: flex;
        align-items: center;
        justify-content: center;
        column-gap: 20px;
        margin-inline: auto;
        width: 68%;
        margin-bottom: 100px;
    }

    .anchor .item {
        width: 100%;
    }

    .anchor .item a {
        display: grid;
        place-items: center;
        position: relative;
        height: 50px;
        border-radius: 60px;
        border: 1px solid #1D5446;
        background-color: #ffffff;
        font-weight: 700;
        font-size: 16px;
        letter-spacing: 0.06em;
        color: #1D5446;
        box-sizing: border-box;
    }

    .anchor .item a i.inline-arrow {
        position: absolute;
        top: 19px;
        right: 17px;
        transition: transform 0.25s ease-out;
        transform: translateY(0);
    }

    .anchor .item a:hover i.inline-arrow {
        transform: translateY(4px);
    }

    .anchor .item a i.inline-arrow::before {
        content: "";
        display: block;
        width: 12px;
        height: 12px;
        background: url(/assets/img/facility/lab/arrow.svg) no-repeat;
    }

    .about {
        display: flex;
        justify-content: space-between;
        margin-bottom: 100px;
    }

    .about .ttl {
        font-weight: 500;
        font-size: 20px;
        line-height: 1;
        letter-spacing: 0.06em;
        padding: 15px 13px;
        width: 180px;
        color: #1D5446;
        border: 1px solid #1B5245;
        margin-bottom: auto;
        box-sizing: border-box;
        flex-shrink: 0;
        margin-right: 70px;
    }

    .about .txt {
        font-size: 16px;
        line-height: 2;
        letter-spacing: 0;
        max-width: 871px;
        font-feature-settings: "plat";
    }

    .section-ttl {
        font-weight: 700;
        font-size: 22px;
        line-height: 1;
        letter-spacing: 0.1em;
        color: #1B5245;
        text-align: center;
        padding-bottom: 16px;
        display: inline-block;
        border-bottom: 2px solid #1B5245;
        margin-bottom: 40px;
    }

    .section-txt {
        color: #4A5054;
        font-weight: 700;
        font-size: 18px;
        line-height: 1;
        letter-spacing: 0.12em;
        text-align: center;
        margin-bottom: 28px;
    }

    .share-lab {
        text-align: center;
        margin-bottom: 80px;

    }

    .share-lab__list {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
        margin-bottom: 40px;
    }

    .share-lab__item {
        max-width: 268px;
        padding: 26px;
        border-radius: 24px;
        box-sizing: border-box;
    }

    .lab-card__title {
        font-weight: 500;
        font-size: 20px;
        line-height: 1;
        letter-spacing: 0.06em;
        text-align: center;
        margin-top: 13px;
        padding-bottom: 16px;
    }

    .lab-card__subtitle {
        display: block;
        font-weight: 700;
        font-size: 16px;
        line-height: 1;
        letter-spacing: 0.12em;
        text-align: center;
        margin-top: 8px;
    }

    .lab-card__text {
        font-weight: 400;
        font-size: 16px;
        line-height: 1.6;
        letter-spacing: 0.06em;
        text-align: center;
        padding-top: 16px;

    }

    .lab-life .article-ttl,
    #lab-life {
        background: #E0E9E7;
        color: #1D5446;
    }

    #lab-life .lab-card__title {
        border-bottom: 1px solid rgba(29, 84, 70, 0.5);
    }

    .lab-aqua .article-ttl,
    #lab-aqua {
        background: #E3F0FF;
        color: #3D73AD;
    }

    #lab-aqua .lab-card__title {
        border-bottom: 1px solid rgba(61, 115, 173, 0.5);

    }

    .lab-plant .article-ttl,
    #lab-plant {
        background: #E6F1DB;
        color: #357F28;
    }

    #lab-plant .lab-card__title {
        border-bottom: 1px solid rgba(53, 127, 40, 0.5);

    }

    .lab-micro .article-ttl,
    #lab-micro {

        background: #E2D9C9;
        color: #927133;

    }

    #lab-micro .lab-card__title {
        border-bottom: 1px solid rgba(146, 113, 51, 0.5);

    }

    .info-box {
        border: 1px solid rgba(74, 80, 84, 0.2);
        font-weight: 400;
        font-size: 14px;
        line-height: 1.8;
        letter-spacing: 0.06em;
        padding: 16px 16px 10px;
        border-radius: 14px;
        text-align: left;
        margin-bottom: 40px;
    }

    .info-box .ttl {
        font-weight: 700;
        font-size: 14px;
        line-height: 1;
        letter-spacing: 0.12em;
        text-align: left;
        margin-bottom: 6px;
    }

    .info-box .list {
        margin-top: 11px;
    }

    .info-box .list .item {
        display: inline-block;
        letter-spacing: 0.08em;
        margin-right: 8px;
        margin-bottom: 11px;
    }

    .info-box .list .item::before {
        content: "○";
    }

    .article .article-ttl {
        height: 50px;
        font-weight: 500;
        font-size: 20px;
        line-height: 1;
        letter-spacing: 00.06em;
        text-align: left;
        display: flex;
        align-items: center;
        padding-left: 16px;
        margin-bottom: 24px;
    }

    .article .article-ttl .subtitle {
        font-size: 16px;
        margin-left: 10px;
    }

    .article .article-ttl .lab-icon {
        height: 22px;
        margin-right: 10px;
    }

    .article .article-body {
        display: flex;
        justify-content: space-between;
    }

    .article .article-body .image {
        width: 310px;
        margin-right: 22px;
        /* width: 27.68%; */
    }

    .article .article-body .txt {
        max-width: 788px;
        width: 72%;
        line-height: 2;
        font-size: 16px;
        letter-spacing: 0.08em;
        text-align: left;
    }

    .article .article-body+.info-box {
        margin-top: 24px;
    }

    .article .info-box {
        margin-bottom: 60px;
    }

    .private-room {
        text-align: center;
        margin-bottom: 80px;
    }

    .spec-table {
        table-layout: fixed;
        width: 100%;
    }

    .spec-table thead {
        font-weight: 400;
        font-size: 14px;
        line-height: 1;
        letter-spacing: 0.13em;
        text-align: center;
        color: #fff;
        background: #1D5446;
        height: 38px;
        letter-spacing: 0.13em;
    }

    .spec-table thead tr th:first-of-type {
        border-top-left-radius: 14px;
    }

    .spec-table thead tr th:nth-of-type(2) {
        border-top-right-radius: 14px;
    }

    .spec-table tbody tr:last-child th {
        border-bottom-left-radius: 14px;
    }

    .spec-table tbody tr:last-child td {
        border-bottom-right-radius: 14px;
    }

    .spec-table thead tr th:first-of-type,
    .spec-table tbody tr th:first-of-type {
        width: 250px;
    }

    .spec-table thead tr th:nth-of-type(2),
    .spec-table tbody tr th:first-of-type {
        border-left: 1px solid #fff;
    }

    .spec-table tbody tr th.sub {
        background: #868F8C;
        border-left: 1px solid #fff;
    }

    .spec-table tbody th {
        font-weight: 400;
        font-size: 14px;
        line-height: 1;
        letter-spacing: 0.06em;
        text-align: center;
        color: #fff;
        background: #747B79;
        border-top: 1px solid #fff;
    }

    .spec-table tbody td {
        font-weight: 400;
        font-size: 14px;
        letter-spacing: 0.06em;
        text-align: center;
        padding: 6.8px 12px;
        line-height: 1.5;
        border-left: 1px solid #fff;
    }

    .spec-table tbody tr:nth-of-type(odd) td {
        color: #4D5357;
        background: #E1E1E1;
        text-align: center;
    }

    .spec-table tbody tr:nth-of-type(even) td {
        color: #4D5357;
        text-align: center;
        background: #eee;
    }
     .swiper-slide {
        max-width:1250px;
        width: 85%;
       box-sizing: border-box;
    }

    .qa {
        text-align: center;
    }

    .accordion {
        text-align: left;
    }

    .accordion .ttl {
        font-weight: 500;
        font-size: 23px;
        line-height: 1.3;
        letter-spacing: 0.06em;
        vertical-align: -2px;
        padding-right: 21px;
        color: #1D5446;
        border-right: 1px solid #E8E8E8;
        margin-right: 17px;
    }

    .accordion dt {
        background: #fff;
        border-radius: 12px;
        position: relative;
        color: #4D5357;
    }

    .accordion dt button {
        cursor: pointer;

        padding: 12px 45px 12px 16px;
        background: none;
        border: none;
        width: 100%;
        text-align: left;
        display: flex;
        align-items: center;
    }

    .accordion dt button p {
        font-weight: 600;
        font-size: 16px;
        line-height: 1.3;
        letter-spacing: 0.1em;
    }

    .accordion dt.is-open {
        background: #1D5446;
    }

    .accordion dt.is-open button {
        color: #fff;
    }

    .accordion dt.is-open .ttl {
        color: #fff;
    }

    .accordion dt.is-open i.arrow::before,
    .accordion dt.is-open i.arrow::after {
        background: #fff;

    }

    .accordion dt i.arrow {
        position: absolute;
        top: 19px;
        right: 16px;
        width: 15px;
        height: 15px;
    }

    .accordion dt i.arrow::before {
        content: "";
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        width: 15px;
        height: 1px;
        background-color: #000;
        translate: -50% -50%;
        rotate: 90deg;
        transition: rotate 0.3s;
    }

    .accordion dt.is-open i.arrow:before {
        rotate: 0deg;
    }

    .accordion dt i.arrow::after {
        content: "";
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        width: 15px;
        height: 1px;
        background-color: #000;
        translate: -50% -50%;
    }

    .accordion dd {
        height: 0;
        overflow: hidden;
        transition: height 0.3s;
        padding-top: 10px;
    }

    .accordion dd .accordion-inner {
        padding: 10px 45px 20px 16px;

        display: flex;
        align-items: center;
    }
.accordion dd .accordion-inner p{
            font-weight: 400;
        font-size: 14px;
        line-height: 2;
        letter-spacing: 0.16em;
}
}

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

    .heading {
        font-weight: 500;
        font-size: 4.2667vw;
        line-height: 1;
        letter-spacing: 0.02em;
        padding: 11vw 0 9vw;

    }

    .heading .sub {
        margin-bottom: 4vw;
        display: block;
    }

    .heading .main {
        font-size: 10.7vw;
        line-height: 1;
        margin-right: 2.8vw;
    }

    .heading .label {
        font-size: 3.946vw;
        line-height: 1;
        letter-spacing: 0.06em;
        text-align: center;
        vertical-align: 3vw;
        display: inline-block;
        padding: 1.9vw 2.13vw;
    }

    .swiper-slide {
        width:85%;
        height: 46vw;
        overflow: hidden;
        box-sizing: border-box;
    }

    .swiper-slide img {
        width: auto;
        height: 100%;
  object-fit: cover; 
  object-position: center;
    }

    .kv .swiper-button-prev {
        width: 12.53vw;
        height: 12.53vw;
        background: url(/assets/img/facility/lab/prev.svg) no-repeat;
        left: 3.3vw;
        margin-top: -11vw;
    }

    .kv .swiper-button-next {
        width: 12.53vw;
        height: 12.53vw;
        background: url(/assets/img/facility/lab/next.svg) no-repeat;
        right: 3.3vw;
        margin-top: -11vw;
    }

    .kv .swiper-button-prev:after,
    .kv .swiper-button-next:after {
        content: none;
    }

    .kv .swiper-wrapper {
        padding-bottom: 11vw;
    }

    .kv .swiper-pagination-bullet {
        width: 2.4vw;
        height: 2.4vw;
        background: rgba(29, 84, 70, 0.4);
        opacity: 1;
    }

    .kv .swiper-pagination-bullet-active {
        background: rgba(29, 84, 70, 1);
    }

    .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
        margin: 0 1.86vw;
    }

    body[data-type="lab"] #contents {
        padding: 8.6vw 0 0;
    }

    body[data-type="lab"] #contents .inner {}

    .anchor {
        display: flex;
        align-items: center;
        justify-content: center;
        column-gap: 4px;
        margin-inline: auto;
        margin: 0 -4vw 16vw;
        height: 14.8vw;
    }

    .anchor .item {
        width: 29.86vw;
        font-weight: 500;
        font-size: 4.266vw;
        line-height: 1;
        letter-spacing: 0.1em;
        height: inherit;
        text-align: center;
        position: relative;
        color: #1D5446;
        border: 1px solid #1D5446;
        border-radius: 16vw;
        overflow: hidden;
    }

    .anchor .item a {
        display: block;
        width: 100%;
        height: 100%;
        padding: 4vw 0;
        color: #1D5446;
        background: #fff;
        box-sizing: border-box;
    }

    .anchor .item a i.inline-arrow {
        position: absolute;
        bottom: 2vw;
        margin: 0 auto;
        left: 0;
        right: 0;
        width: 3vw;
        height: 3vw;
        transition: transform 0.25s ease-out;
        transform: translateY(0);
    }

    .anchor .item a i.inline-arrow::before {
        content: "";
        display: block;
        width: 3vw;
        height: 3vw;
        background: url(/assets/img/facility/lab/arrow.svg) no-repeat;
    }

    .about .ttl {
        font-weight: 500;
        font-size: 5.333vw;
        letter-spacing: 0.08em;
        padding: 3.8vw 2.8vw 3.9vw 3.73vw;
        display: inline-block;
        color: #1D5446;
        border: 1px solid #1B5245;
        margin-bottom: 5.33vw;
    }

    .about .txt {
        font-size: 4.266vw;
        line-height: 2;
        letter-spacing: 0;
        font-feature-settings: "plat";
        margin-bottom: 17vw;
    }

    .section-ttl {
        font-weight: 700;
        font-size: 5.866vw;
        line-height: 1;
        letter-spacing: 0.12em;
        color: #1B5245;
        text-align: center;
        padding-bottom: 3.2vw;
        display: inline-block;
        border-bottom: 2px solid #1B5245;
        margin-bottom: 11.4vw;
    }

    .section-txt {
        color: #4A5054;
        font-weight: 700;
        font-size: 4.8vw;
        line-height: 1;
        letter-spacing: 0.12em;
        text-align: center;
        margin-bottom: 6.8vw;
    }

    .share-lab {
        text-align: center;
    }

    .share-lab__list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2.133vw;
        margin-bottom: 9vw;
    }

    .share-lab__item {
        max-width: 40.5333vw;
        border-radius: 3.2vw;
        box-sizing: border-box;
        padding: 5vw 3.2vw;
    }

    .lab-card__title {
        font-weight: 500;
        font-size: 4.5333vw;
        line-height: 1.3;
        letter-spacing: 0.06em;
        text-align: center;
        margin-top: 3vw;
        padding-bottom: 3.2vw;
    }

    .lab-card__subtitle {
        display: block;
        font-weight: 700;
        font-size: 3.7333vw;
        line-height: 1;
        letter-spacing: 0.1em;
        text-align: center;
        margin-top: 1vw;
    }

    .lab-card__text {
        font-weight: 400;
        font-size: 3.7333vw;
        line-height: 1.6;
        letter-spacing: 0.06em;
        text-align: left;
        padding-top: 3.5vw;

    }

    .lab-life .article-ttl,
    #lab-life {
        background: #E0E9E7;
        color: #1D5446;
    }

    #lab-life .lab-card__title {
        border-bottom: 1px solid rgba(29, 84, 70, 0.5);
    }

    .lab-aqua .article-ttl,
    #lab-aqua {
        background: #E3F0FF;
        color: #3D73AD;
    }

    #lab-aqua .lab-card__title {
        border-bottom: 1px solid rgba(61, 115, 173, 0.5);

    }

    .lab-plant .article-ttl,
    #lab-plant {
        background: #E6F1DB;
        color: #357F28;
    }

    #lab-plant .lab-card__title {
        border-bottom: 1px solid rgba(53, 127, 40, 0.5);

    }

    .lab-micro .article-ttl,
    #lab-micro {

        background: #E2D9C9;
        color: #927133;

    }

    #lab-micro .lab-card__title {
        border-bottom: 1px solid rgba(146, 113, 51, 0.5);

    }

    .info-box {
        border: 1px solid rgba(74, 80, 84, 0.2);
        font-weight: 400;
        font-size: 3.733vw;
        line-height: 1.8;
        letter-spacing: 0.18em;
        padding: 4.266vw 4.266vw 3.66vw;
        border-radius: 3.733vw;
        text-align: left;
        margin-bottom: 10.66vw;
    }

    .info-box .ttl {
        font-weight: 700;
        font-size: 3.733vw;
        line-height: 1;
        letter-spacing: 0.08em;
        text-align: left;
        margin-bottom: 3vw;
    }

    .info-box .list .item {
        font-size: 3.733vw;
        line-height: 1.34;
        display: inline-block;
        letter-spacing: 0;
        text-align: left;
        margin-right: 2vw;
        margin-bottom: 1.5vw;
    }

    .info-box .list .item::before {
        content: "○";
    }

    .article .article-ttl {
        height: 13.333vw;
        font-weight: 500;
        font-size: 4.8vw;
        line-height: 1;
        letter-spacing: 0.06em;
        text-align: left;
        display: flex;
        align-items: center;
        padding-left: 4.266vw;
        margin-bottom: 4vw;
    }

    .article .article-ttl img {
        height: 5.6vw;
        margin-right: 3vw;
    }

    .article .article-ttl .subtitle {
        font-size: 3.733vw;
        font-weight: 700;
        margin-left: 2vw;
    }

    .article .article-body .image {
        margin-bottom: 5.8vw;
    }

    .article .article-body .txt {
        font-weight: 400;
        font-size: 4.266vw;
        line-height: 1.7;
        letter-spacing: 0;
        font-feature-settings: "plat";
        text-align: left;
        margin-bottom: 5.5vw;
    }

    .private-room {
        text-align: center;
        margin: 16vw 0;
    }

    .spec-table thead {
        font-weight: 400;
        font-size: 3.733vw;
        line-height: 1;
        letter-spacing: 0.1em;
        text-align: center;
        color: #fff;
        background: #1D5446;
    }
    .spec-table thead th {
        padding:3.2vw 2.5vw;
    }

    .spec-table thead tr th:first-of-type {
        border-top-left-radius: 3.73vw;
    }

    .spec-table thead tr th:nth-of-type(2) {
        border-top-right-radius: 3.73vw;
    }

    .spec-table tbody tr:last-child th {
        border-bottom-left-radius: 3.73vw;
    }

    .spec-table tbody tr:last-child td {
        border-bottom-right-radius: 3.73vw;
    }

    /* .spec-table thead tr th:first-of-type,
    .spec-table tbody tr th:first-of-type {
        width: 34.6%;
    } */

    .spec-table thead tr th:nth-of-type(2),
    .spec-table tbody tr th:first-of-type {
        border-left: 1px solid #fff;
    }

    .spec-table tbody tr th.sub {
        background: #868F8C;
        border-left: 1px solid #fff;
    }

    .spec-table tbody th {
        font-weight: 400;
        font-size: 3.733vw;
        line-height: 1.3;
        letter-spacing: 0.03em;
        text-align: center;
        color: #fff;
        background: #747B79;
        border-top: 1px solid #fff;
        padding: 2.5vw;
    }

    .spec-table tbody td {
        font-weight: 400;
        font-size: 3.733vw;
        letter-spacing: 0.03em;
        text-align: center;
        padding: 2.2vw;
        line-height: 1.5;
        border-left: 1px solid #fff;
    }

    .spec-table tbody tr:nth-of-type(odd) td {
        color: #4D5357;
        background: #E1E1E1;
        text-align: center;
    }

    .spec-table tbody tr:nth-of-type(even) td {
        color: #4D5357;
        text-align: center;
        background: #eee;
    }

    .qa {
        text-align: center;
        margin-bottom: 13.33vw;
    }

    .accordion {
        text-align: left;
    }

    .accordion .ttl {
        font-weight: 500;
        font-size: 6.13vw;
        line-height: 1.3;
        letter-spacing: 0.06em;
        vertical-align: -2px;
        color: #1D5446;
        margin-right: 4.2vw;
                flex-shrink: 0;
    }

    .accordion dt {
        background: #fff;
        border-radius: 3.2vw;
        position: relative;
        color: #4D5357;
    }

    .accordion dt button {
        cursor: pointer;
        padding: 3.2vw 12vw 3.2vw 4.26vw;
        background: none;
        border: none;
        width: 100%;
        text-align: left;
        display: flex;
        align-items: center;
        color: #4D5357;
    }

    .accordion dt button p {
        font-weight: 500;
        font-size: 4.266vw;
        line-height: 1.3;
        letter-spacing: 0.1em;
        padding-left: 4.2vw;
        border-left: 1px solid #E8E8E8;
    }

    .accordion dt.is-open {
        background: #1D5446;
    }

    .accordion dt.is-open button {
        color: #fff;
    }

    .accordion dt.is-open .ttl {
        color: #fff;
    }

    .accordion dt.is-open i.arrow::before,
    .accordion dt.is-open i.arrow::after {
        background: #fff;

    }

    .accordion dt i.arrow {
        position: absolute;
        top: 50%;
        right: 4.266vw;
        width: 4vw;
        height: 4vw;
        transform: translateY(-2vw);
    }

    .accordion dt i.arrow::before {
        content: "";
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        width: 4vw;
        height: 1px;
        background-color: #000;
        translate: -50% -50%;
        rotate: 90deg;
        transition: rotate 0.3s;
    }

    .accordion dt.is-open i.arrow:before {
        rotate: 0deg;
    }

    .accordion dt i.arrow::after {
        content: "";
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        width: 4vw;
        height: 1px;
        background-color: #000;
        translate: -50% -50%;
    }

    .accordion dd {
        height: 0;
        overflow: hidden;
        transition: height 0.3s;
        padding-top: 2.666vw;
    }

    .accordion dd .accordion-inner {
        padding: 2.666vw 3.266vw 5.33vw 4.266vw;

        display: flex;
        align-items: center;
    }
    .accordion dd .accordion-inner p {
        font-weight: 400;
        font-size: 3.733vw;
        line-height: 1.6;
        letter-spacing: 0.1em;
                padding-left: 4.2vw;
        border-left: 1px solid #E8E8E8;
    }

}