@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@100;300;400;500;700;800;900&display=swap');

/*　//////////////////////////////////////////////////
　ヘッダーナビ
//////////////////////////////////////////////////　*/
.header-in {
    background-color: #fff;
}

.dropdown__lists {
    transform: scaleY(0);
    transform-origin: center top;
    transition: all .3s;
    padding: 20px 0;
    width: 100%;
    position: absolute;
    top: 80px;
    left: 0;
    background-color: #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, .2);
    z-index: -1;
    cursor: auto;
}

.header_menu_dropdown:hover .dropdown__lists {
    transform: scaleY(1);
}

.dropdown__list {
    margin: 0 auto;
    display: flex;
    justify-content: left;
    width: 1200px;
    height: auto;
}

.header_menu_nav_title {
    display: grid;
    margin-right: 40px;
    padding-right: 20px;
    border-right: 2px solid #02ac2a;
    text-align: left;
}

.header_menu_nav_title li {
    font-size: 2rem;
    font-weight: 500;
}

.header_menu_nav_title li:first-child {
    color: #DD4310;
    cursor: auto;
}

.header_menu_nav_title li:nth-child(2) {
    color: #2A5ADC;
    cursor: auto;
}

.header_menu_nav_title li:last-child {
    color: #8146d7;
    cursor: auto;
}

.header_menu_nav_links {
    text-align: left;
}

.header_menu_nav_links a {
    font-size: 2rem;
    color: #333;
}

.header_menu_nav_links a:hover {
    color: #02ac2a;
}

.hum_nav_link {
    margin: 0 20px;
    border-bottom: 1px solid #02ac2a;
    position: relative;
}

.hum_nav_link a,
.hum_nav_link_in li a {
    padding: 30px 0;
    position: relative;
    font-size: 1.6rem;
    font-weight: 600;
    color: #02ac2a;
}

.hum_nav_link a::before,
.hum_nav_link_in li a::before,
.news_btn a::before,
.news_link li a::before {
    position: absolute;
    top: 15px;
    left: 9px;
    margin: auto;
    width: 0;
    height: 0;
    content: '';
    border-style: solid;
    border-color: transparent;
    border-width: 6px 9px;
    border-left-color: currentColor;
    border-right: 0;
    color: #fff;
    transform: translateX(15%);
    z-index: 2;
}

.hum_nav_link a::after,
.hum_nav_link_in li a::after,
.news_btn a::after,
.news_link li a::after {
    position: absolute;
    top: 8px;
    left: 0;
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 25px;
    height: 25px;
    border: 0.075em solid currentColor;
    background: currentColor;
    border-radius: 99px;
    box-sizing: content-box;
    color: #02ac2a;
    line-height: 1;
    z-index: 1;
}

.hum_nav_link_in li:first-child a::after {
    color: #DD4310;
}

.hum_nav_link_in li:nth-child(2) a::after {
    color: #2A5ADC;
}

.hum_nav_link_in li:last-child a::after {
    color: #8146d7;
}

.hum_nav_link a p {
    margin-left: 40px;
    padding: 10px 0;
    font-size: 1.6rem;
    font-weight: 600;
    color: #02ac2a;
}

.hum_nav_link_in {
    margin: 10px 20px;
}

.hum_nav_link_in li a p {
    margin-left: 20px;
    font-size: 1.4rem;
    font-weight: 500;
    color: #333;
}

@media (max-width: 1200px) {
    .dropdown__list {
        width: 90%;
    }
}

/*　//////////////////////////////////////////////////
　slider
//////////////////////////////////////////////////　*/

.top_slider {
    position: relative;
    width: 100%;
}

.top_slider .slick-slide {
    width: 765px;
    height: 315px;
    position: relative;
    overflow: hidden;
}

.top_slider .slick-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.top_slider .slick-slide li::before {
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, .5);
}

.top_slider .slick-slide.slick-center li::before {
    display: none;
}

.prev-arrow,
.next-arrow {
    width: 860px;
    height: 40px;
    position: absolute;
    top: 37%;
    left: 50%;
    z-index: 2;
    pointer-events: none;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
}

.prev-arrow::before,
.next-arrow::before {
    position: absolute;
    top: 26%;
    margin: auto;
    width: 0;
    height: 0;
    content: '';
    border-style: solid;
    border-color: transparent;
    border-width: 10px 17px;
    border-left-color: currentColor;
    border-right: 0;
    color: #fff;
    z-index: 2;
    pointer-events: auto;
}

.prev-arrow::after,
.next-arrow::after {
    position: absolute;
    content: '';
    top: 0;
    display: inline-block;
    vertical-align: middle;
    width: 40px;
    height: 40px;
    border: 0.075em solid currentColor;
    background: currentColor;
    border-radius: 99px;
    box-sizing: content-box;
    color: #02ac2a;
    line-height: 1;
    z-index: 1;
    pointer-events: auto;
}

.prev-arrow::before {
    left: 10px;
    transform: rotate(180deg);
}

.prev-arrow::after {
    left: 0;
}

.next-arrow::before {
    right: 10px;
}

.next-arrow::after {
    right: 0;
}

.prev-arrow:hover::after,
.next-arrow:hover::after {
    top: 0;
    color: #05d135;
    transition: .3s;
    transform: scale(1.1);
}

.slider_dots {
    display: flex;
    justify-content: center;
}

.slider_dots li button {
    display: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    padding: 0;
    border: none;
    background-color: transparent;
}

.slider_dots li {
    display: block;
    width: 10px;
    height: 10px;
    margin: 6px;
    margin-top: 20px;
    font-size: 0;
    padding: 0;
    border: 0;
    outline: none;
    cursor: pointer;
    background: #bcbcbc;
    border-radius: 50%;
}

.slider_dots li.slick-active {
    background: #02AC2A;
}

@media (max-width: 1200px) {
    .top_slider .slick-slide {
        width: 70vw;
        max-width: 900px;
        height: auto;
        max-height: 400px;
    }

    .prev-arrow,
    .next-arrow {
        top: 13vw;
        width: 90%;
    }
}

@media (max-width: 780px) {

    .prev-arrow,
    .next-arrow {
        top: 13vw;
    }

    .prev-arrow::before,
    .next-arrow::before {
        top: 18%;
        border-width: 6px 9px;
    }

    .prev-arrow::before {
        left: 7px;
    }

    .next-arrow::before {
        right: 7px;
    }

    .prev-arrow::after,
    .next-arrow::after {
        width: 25px;
        height: 25px;
    }
}

@media (max-width: 540px) {
    .top_slider .slick-slide {
        width: 90vw;
    }

    .prev-arrow,
    .next-arrow {
        top: 17vw;
    }
}

/*　//////////////////////////////////////////////////
　トップページ
//////////////////////////////////////////////////　*/
.slider_container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #F4FFF6;
    z-index: -2;
    background-image:
        repeating-linear-gradient(to bottom,
            transparent 25px,
            rgba(255, 255, 255, 1) 26px, rgba(255, 255, 255, 1) 26px,
            transparent 27px, transparent 51px,
            rgba(255, 255, 255, 1) 52px, rgba(255, 255, 255, 1) 52px,
            transparent 53px, transparent 77px,
            rgba(255, 255, 255, 1) 78px, rgba(255, 255, 255, 1) 78px,
            transparent 79px, transparent 103px,
            rgba(255, 255, 255, 1) 104px, rgba(255, 255, 255, 1) 104px,
            transparent 105px, transparent 129px,
            rgba(255, 255, 255, 1) 130px, rgba(255, 255, 255, 1) 130px),

        repeating-linear-gradient(to right,
            transparent 25px,
            rgba(255, 255, 255, 1) 26px, rgba(255, 255, 255, 1) 26px,
            transparent 27px, transparent 51px,
            rgba(255, 255, 255, 1) 52px, rgba(255, 255, 255, 1) 52px,
            transparent 53px, transparent 77px,
            rgba(255, 255, 255, 1) 78px, rgba(255, 255, 255, 1) 78px,
            transparent 79px, transparent 103px,
            rgba(255, 255, 255, 1) 104px, rgba(255, 255, 255, 1) 104px,
            transparent 105px, transparent 129px,
            rgba(255, 255, 255, 1) 130px, rgba(255, 255, 255, 1) 130px);
}

.top_container {
    padding: 10px 0 40px;
    background-color: #fff;
}

.midashi08 {
    position: relative;
    width: 100%;
    height: 44px;
    border-bottom: 3px solid #02AC2A;
}

.midashi08 h3 {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    padding: 10px;
    margin: 0;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 2rem;
    font-weight: 500;
    color: #fff;
    text-align: center;
    z-index: 1;
}

.midashi08::after {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    width: 200px;
    height: 44px;
    content: url('../images/tab.svg');
    z-index: 0;
}

.midashi09 h4 {
    font-family: "M PLUS Rounded 1c", serif;
    font-size: 2rem;
    font-weight: 400;
}

.midashi09 h4:first-letter {
    font-size: 2.5rem;
    font-weight: 500;
}

.midashi09.products_title h4:first-letter {
    color: #DD4310;
}

.midashi09.project_title h4:first-letter {
    color: #2A5ADC;
}

.midashi09.information_title h4:first-letter {
    color: #8146d7;
}

.midashi09_u {
    width: 100%;
    border-bottom: 1px solid #02ac2a;
}

.news_area {
    display: flex;
    justify-content: left;
    flex-wrap: wrap;
    gap: 2rem;
}

.news_area .news_area_in {
    width: calc(95% / 3);
}

.news-in li {
    display: flex;
    position: relative;
    padding: 5px 0;
}

.news-in li span {
    width: 100px;
    font-size: 1.4rem;
}

.news-in li p {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
    width: calc(100% - 100px);
    font-size: 1.4rem;
}

.news-in li.new p {
    width: calc(100% - 130px);
}
/*
.news-in li.new::before {
    position: absolute;
    top: 18px;
    right: 0;
    width: 60px;
    height: 22px;
    padding-top: 1px;
    content: 'NEW';
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.3rem;
    font-weight: 500;
    color: #fff;
    background-color: #F6C000;
    border-radius: 99px;
    text-align: center;
}
*/
.news-in li.new::before {
    position: absolute;
    top: 18px;
    right: 0;
    width: 30px;
    height: 22px;
    padding-top: 1px;
    content: 'NEW';
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.3rem;
    font-weight: 500;
    color: #F33;
    text-align: center;
}
.news-in li:not(:first-child).new::before {
    top: 8px;
}


.news_btn {
    display: flex;
    justify-content: end;
}

.news_btn a {
    position: relative;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.6rem;
    font-weight: 500;
    color: #02AC2A;
}

.news_btn a::before,
.news_link li a::before {
    top: 6px;
}

.news_btn a::after,
.news_link li a::after {
    top: -1px;
}

.news_btn a p,
.news_link li a p {
    margin-left: 40px;
}

.news_btn a:hover {
    color: #05d135;
    transition: .3s;
}

.news_btn a:hover:after,
.news_link li a:hover,
.news_link li a:hover:after {
    color: #05d135;
    transition: .3s;
    transform: scale(1.1);
}

.news_link li {
    margin-bottom: 10px;
    list-style: none;
}

.news_link li a {
    position: relative;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.6rem;
    font-weight: 400;
    color: #333;
}

.link_area {
    width: 100%;
}

.link_table {
    max-width: 1200px;
}

.link_table th {
    padding-bottom: 10px;
    padding-right: 20px;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.6rem;
    font-weight: 500;
    white-space: nowrap;
}

.link_table td {
    padding-bottom: 10px;
    width: auto;
}

.link_table td a {
    font-size: 1.6rem;
    font-weight: 400;
    color: #02AC2A;
    text-decoration: underline;
    word-break: break-all;
}

.link_table td a:hover {
    color: #05d135;
    text-decoration: none;
}

/* ツールチップ */

.news-in li .tooltip {
    opacity: 0;
    position: absolute;
    visibility: hidden;
    left: 80px;
    bottom: 40px;
    display: inline-block;
    width: fit-content;
    transition: 0.3s ease-in;
}
.news-in li:last-child .tooltip {
    bottom: 55px;
}
.news-in li p:hover+.tooltip {
    opacity: 1;
    visibility: visible;
    pointer-events: none;
}

.tooltip_text {
    position: relative;
    display: inline-block;
    padding: 7px 15px;
    font-size: 16px;
    background: #E1FFE8;
    border-radius: 99px;
}

.tooltip_text:before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -15px;
    border: 15px solid transparent;
    border-top: 15px solid #E1FFE8;
}

.news-in li .tooltip .tooltip_text p {
    text-overflow: clip;
    white-space: wrap;
    display: inline-block;
    width: fit-content;
    color: #333;
    pointer-events: none;
}

@media (max-width: 980px) {
    .news_area .news_area_in {
        width: calc(95% / 2);
    }

    .link_table {
        max-width: 90%;
    }

    .link_table th,
    .link_table td {
        display: inline-block;
        width: 100%;
    }

    .link_table th {
        padding-bottom: 0;
    }

    .link_table td {
        padding-bottom: 20px;
    }
}

@media (max-width: 780px) {
    .news_area .news_area_in {
        width: 100%;
    }

    .link_area {
        display: flex;
        justify-content: left;
    }
}

@media (max-width: 768px) {

    .news-in li.new:not(:first-child):before {
        top: 8px;
    }
}

/*　//////////////////////////////////////////////////
　下層_共通
//////////////////////////////////////////////////　*/
.page_top {
    padding: 65px 0 10px 0;
    color: #02AC2A;
}

.midashi07 {
    position: relative;
    width: 100%;
    height: 68px;
}

.midashi07 h2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 68px;
    padding: 20px;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 2rem;
    color: #02AC2A;
    z-index: 1;
}

.midashi07 h2::before {
    position: absolute;
    top: 6px;
    left: -2px;
    content: '';
    display: block;
    width: 100%;
    height: 50px;
    padding: 20px;
    border: 2px solid #02AC2A;
    z-index: 1;
}

.midashi07 h2::after {
    position: absolute;
    display: inline-block;
    content: '';
    top: 12px;
    left: 4px;
    width: 100%;
    height: 50px;
    border: 2px solid #E1FFE8;
    background-color: #E1FFE8;
    z-index: -1;
}

.category_list_btn {
    height: 3em;
}

@media (max-width: 980px) {
    .page_top {
        padding: 50px 0 10px 0;
    }
}

/*　//////////////////////////////////////////////////
　商品情報
//////////////////////////////////////////////////　*/

.products_area .page_top {
    color: #DD4310;
    border-bottom: solid 2px #DD4310;
}

.products_area .midashi02::after {
    color: #DD4310;
}

.products_area .midashi07 h2::before {
    border: 2px solid #DD4310;
}

.products_area .midashi07 h2 {
    color: #DD4310;
}

.products_area .midashi07 h2::after {
    border: 2px solid #ffdfd4;
    background-color: #ffdfd4;
}

.products_area .category_list2 li a {
    color: #DD4310;
    border: 2px solid #DD4310;
}

.products_area .category_list2 li a:hover {
    color: #fff;
    background-color: #DD4310;
}

.products_area .category_list2 li a:after {
    color: #DD4310;
}

.products_area .category_list2 li a:hover::after {
    color: #fff;
}

.products_area .midashi01 h3,
.products_title h3 {
    background-color: #DD4310;
}

.products_area .midashi01 h3::before,
.products_title h3::before {
    border-top-color: #DD4310;
}

/*　//////////////////////////////////////////////////
　企画提案資料
//////////////////////////////////////////////////　*/

.project_area .page_top {
    color: #2A5ADC;
    border-bottom: solid 2px #2A5ADC;
}

.project_area .midashi02::after {
    color: #2A5ADC;
}

.project_area .midashi07 h2::before {
    border: 2px solid #2A5ADC;
}

.project_area .midashi07 h2 {
    color: #2A5ADC;
}

.project_area .midashi07 h2::after {
    border: 2px solid #DBE4FD;
    background-color: #DBE4FD;
}

.project_area .category_list2 li a {
    color: #2A5ADC;
    border: 2px solid #2A5ADC;
}

.project_area .category_list2 li a:hover {
    color: #fff;
    background-color: #2A5ADC;
}

.project_area .category_list2 li a:after {
    color: #2A5ADC;
}

.project_area .category_list2 li a:hover::after {
    color: #fff;
}

.project_area .midashi01 h3,
.project_title h3 {
    background-color: #2A5ADC;
}

.project_area .midashi01 h3::before,
.project_title h3::before {
    border-top-color: #2A5ADC;
}

/*　//////////////////////////////////////////////////
　企画提案資料
//////////////////////////////////////////////////　*/

.information_area .page_top {
    color: #8146d7;
    border-bottom: solid 2px #8146d7;
}

.information_area .midashi02::after {
    color: #8146d7;
}

.information_area .midashi07 h2::before {
    border: 2px solid #8146d7;
}

.information_area .midashi07 h2 {
    color: #8146d7;
}

.information_area .midashi07 h2::after {
    border: 2px solid #EDE3FD;
    background-color: #EDE3FD;
}

.information_area .category_list2 li a {
    color: #8146d7;
    border: 2px solid #8146d7;
}

.information_area .category_list2 li a:hover {
    color: #fff;
    background-color: #8146d7;
}

.information_area .category_list2 li a:after {
    color: #8146d7;
}

.information_area .category_list2 li a:hover::after {
    color: #fff;
}

.information_area .midashi01 h3,
.information_title h3 {
    background-color: #8146d7;
}

.information_area .midashi01 h3::before,
.information_title h3::before {
    border-top-color: #8146d7;
}