@charset "UTF-8";

.wrapper {
    background: url("../img/top/bg.jpg") no-repeat top center / 100% auto;
}

@media screen and (max-width: 768px) {
    .wrapper {
        background: url("../img/top/bg_sp.jpg") no-repeat top center / 100% auto;
    }
}


/* ===============================================
   title
=============================================== */
.sec_title {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: clamp(0px, 2.5vw, 30px);
}

.sec_title span {
    font-size: clamp(17px, 1.7vw, 20px);
    font-weight: var(--font-w-b);
    color: var(--color-main);
    display: inline-block;
    margin-top: 0.3em;
}

#sns .sec_title span {
    font-size: clamp(12px, 1.2vw, 14px);
}

@media screen and (max-width: 768px) {
    .sec_title {
        margin-bottom: clamp(0px, 5.1dvw, 20px);
    }

    .sec_title span {
        font-size: clamp(11px, 4.1dvw, 16px);
        margin-top: 0.5em;
        line-height: 1;
    }

    #sns .sec_title span {
        font-size: clamp(11px, 3.1dvw, 12px);
    }
}


/* ===============================================
   mv
=============================================== */
#mv {
    width: 100%;
    overflow: hidden;
    padding-top: clamp(0px, 5.4vw, 65px);
    margin-bottom: clamp(0px, 9.2vw, 110px);
}

#mv .mv_title {
    width: 1040px;
    width: clamp(0px, 88vw, 1040px);
    margin: 0 auto 7px;
}

#mv .mv_title img {
    width: clamp(0px, 12.9vw, 155px);
}

#mv .sec_main {
    position: relative;
}

@media screen and (max-width: 768px) {
    #mv {
        padding-top: clamp(0px, 19.2dvw, 75px);
        margin-bottom: clamp(0px, 19.2dvw, 75px);
    }

    #mv .mv_title {
        width: 270px;
        width: clamp(0px, 69.2dvw, 270px);
        margin: 0 auto clamp(0px, 3.3dvw, 13px);
    }

    #mv .mv_title img {
        width: clamp(0px, 32.1dvw, 125px);
    }
}


/* ===============================================
   swiper
=============================================== */
.swiper-container {
    width: 1200px;
    max-width: 100%;
    position: relative;
    margin: 0 auto;
    padding-bottom: 5px;
}

.swiper-wrapper {
    width: 1040px;
    width: clamp(0px, 88vw, 1040px);
    height: 350px;
    height: clamp(0px, 29.2vw, 350px);
    margin: 0 auto;
}

.swiper-slide {
    width: 260px;
    width: clamp(0px, 21.7vw, 260px);
    aspect-ratio: 260 / 350;
    transition: all 0.3s;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin-right: 60px;
    margin-right: clamp(10px, 5vw, 60px);
    flex-shrink: 0;
}

.swiper-slide-active {
    width: 500px;
    width: clamp(0px, 41.7vw, 500px);
    aspect-ratio: 500 / 350;
}

.slide_cont_wrap {
    width: 100%;
    aspect-ratio: 260 / 200;
    line-height: 0;
    border: 1px solid #000;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    position: relative;
    z-index: 1;
}

.slide_cont_wrap:hover {
    border-color: var(--color-main);
}

.slide_cont_wrap::after {
    content: "";
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(100,230,200,0), rgba(100,230,200,0.6));
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: all 0.4s;
    z-index: -1;
}

.slide_cont_wrap:hover::after {
    top: 5px;
    left: 5px;
    opacity: 1;
}

.swiper-slide-active .slide_cont_wrap {
    width: 100%;
    aspect-ratio: 500 / 350;
}

.slide_cont_wrap .pickup_img {
    width: 100%;
    aspect-ratio: 260 / 140;
    overflow: hidden;
}

.swiper-slide-active .slide_cont_wrap .pickup_img {
    aspect-ratio: 500 / 260;
}

.slide_cont_wrap .pickup_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slide_cont_wrap .pickup_text {
    width: 100%;
    aspect-ratio: 260 / 60;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
}

.swiper-slide-active .slide_cont_wrap .pickup_text {
    aspect-ratio: 500 / 90;
}

.slide_cont_wrap .pickup_text p {
    font-size: clamp(11px, 1.3vw, 15px);
    font-weight: var(--font-w-sb);
    line-height: 1.4em;
    overflow: hidden;
    width: 90%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
     transition: opacity 0.4s, color 0.4s, background 0.4s;
}

.swiper-slide-active .slide_cont_wrap .pickup_text p {
    font-size: clamp(18px, 1.8vw, 22px);
    font-weight: var(--font-w-m);
}

.slide_cont_wrap:hover .pickup_text p {
    color: var(--color-main);
    transition: color 0.4s;
}

.swiper-button-next,
.swiper-button-prev {
    width: clamp(0px, 4.4vw, 53px);
    height: 100%;
    top: 0;
    margin: 0;
}

.swiper-button-next {
    right: 47%;
}

.swiper-button-prev {
    left: 1.9%;
}

.swiper-button-next:after,
.swiper-button-prev:after {
    content: "";
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    background: url("../img/top/slide_arrow.svg") no-repeat center center / contain;
    top: 0;
    bottom: 0;
    margin: auto;
    opacity: 1;
    transition: opacity 0.4s;
}

.swiper-button-prev:after {
    transform: rotate(180deg);
}

.swiper-button-next:hover:after,
.swiper-button-prev:hover:after {
    opacity: 0.6;
}

@media screen and (max-width: 1200px) {
    .swiper-button-next {
        right: 47.7%;
    }

    .swiper-button-prev {
        left: 1.3%;
    }
}

@media screen and (max-width: 768px) {
    .swiper-wrapper {
        width: 100%;
        height: clamp(0px, 74.4dvw, 290px);
    }
    
    .swiper-slide {
        width: 270px;
        aspect-ratio: 270 / 290;
        margin: 0;
    }
    
    .swiper-slide .slide_cont_wrap {
        width: 190px;
        aspect-ratio: 190 / 210;
        transition: all 0.2s;
    }

    .swiper-slide-active {
        width: 270px;
        aspect-ratio: 270 / 290;
    }
    
    .swiper-slide-active .slide_cont_wrap {
        width: 100%;
        aspect-ratio: 270 / 290;
        transition: all 0.2s;
    }
    
    .slide_cont_wrap .pickup_img {
        aspect-ratio: 190 / 140;
    }

    .swiper-slide-active .slide_cont_wrap .pickup_img {
        aspect-ratio: 270 / 210;
    }
    
    .slide_cont_wrap .pickup_text {
        aspect-ratio: 190 / 70;
    }

    .swiper-slide-active .slide_cont_wrap .pickup_text {
        aspect-ratio: 270 / 80;
    }

    .slide_cont_wrap .pickup_text p {
        font-size: clamp(12px, 3.1dvw, 12px);
    }

    .swiper-slide-active .slide_cont_wrap .pickup_text p {
        font-size: clamp(13px, 4.6dvw, 18px);
        font-weight: var(--font-w-sb);
    }
    
    .swiper-button-next {
        width: 35px;
        right: 50%;
        transform: translateX(173px);
    }

    .swiper-button-prev {
        width: 35px;
        left: 50%;
        transform: translateX(-173px);
    }
}

@media screen and (max-width: 389px) {
    .swiper-slide .slide_cont_wrap {
        width: 70.4%;
    }
    
    .swiper-slide-active .slide_cont_wrap {
        width: 100%;
    }
    
    .swiper-button-next {
        width: clamp(0px, 10.3dvw, 40px);
        right: 5%;
        transform: translateX(0);
    }

    .swiper-button-prev {
        width: clamp(0px, 10.3dvw, 40px);
        left: 5%;
        transform: translateX(0);
    }
}


/* ===============================================
   about us
=============================================== */
#about_us {
    width: 100%;
    position: relative;
    padding: clamp(0px, 1.3vw, 15px) 0 clamp(0px, 8.3vw, 100px);
}

#about_us::after {
    content: "";
    width: 100%;
    height: 100%;
	background: rgba(245,251,251,0.7);
	clip-path:polygon(0 85px, 100% 0, 100% calc(100% - 70px), 0 100%);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.about_us_inner {
    position: relative;
    z-index: 2;
}

.about_us_inner .sec_title img {
    max-width: 13.8vw;
}

.about_us_inner .sec_cont {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.about_us_inner .sec_cont .about_us_img {
    width: 410px;
    max-width: 40%;
    border-radius: 5px;
    overflow: hidden;
}

.about_us_inner .sec_cont .about_us_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about_us_inner .sec_cont .about_us_link {
    width: 605px;
    max-width: 58.5%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(10px, 2.1vw, 25px) 0;
}

.about_us_inner .sec_cont .about_us_link a {
    width: 290px;
    max-width: 48%;
    aspect-ratio: 290 / 50;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 clamp(4px, 0.7vw, 8px);
    padding-right: 3%;
}

.about_us_inner .sec_cont .about_us_link a p {
    font-size: clamp(14px, 1.5vw, 18px);
    font-weight: var(--font-w-sb);
    line-height: 1;
}

@media screen and (max-width: 768px) {
    #about_us {
        padding: clamp(0px, 4.4dvw, 17px) 0 clamp(0px, 14.1dvw, 55px);
    }

    #about_us::after {
        clip-path: polygon(0 clamp(0px, 17.9dvw, 70px), 100% 0, 100% calc(100% - clamp(0px, 15.4dvw, 60px)), 0 100%);
    }

    .about_us_inner .sec_title img {
        width: 150px;
        max-width: 38.5dvw;
    }

    .about_us_inner .sec_cont {
        display: block;
    }

    .about_us_inner .sec_cont .about_us_img {
        display: none;
    }

    .about_us_inner .sec_cont .about_us_link {
        width: 100%;
        max-width: 100%;
        gap: clamp(0px, 2.6dvw, 10px) 0;
    }

    .about_us_inner .sec_cont .about_us_link a {
        width: 175px;
        max-width: 49%;
        aspect-ratio: 175 / 90;
        gap: 0 clamp(0px, 2.6dvw, 10px);
        padding-right: 0;
        flex-direction: column;
        align-items: center;
    }
    
    .about_us_inner .sec_cont .about_us_link a .link_icon {
        height: auto;
        line-height: 0;
    }

    .about_us_inner .sec_cont .about_us_link a p {
        font-size: clamp(0px, 4.6dvw, 18px);
        margin-bottom: 0.2em;
    }
}


/* ===============================================
   certification mark
=============================================== */
#certification {
    width: 100%;
    padding: clamp(0px, 1.7vw, 20px) 0 clamp(0px, 7.5vw, 90px);
}

.certification_inner .sec_title img {
    max-width: 29.2vw;
}

.certification_link {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
}

.certification_link a {
    width: 500px;
    max-width: 49%;
    aspect-ratio: 500 / 150;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 clamp(4px, 0.7vw, 8px);
}

.certification_link a::before {
    width: clamp(10px, 2.1vw, 25px);
    right: clamp(6px, 1.1vw, 13px);
}
.certification_link a:hover::before {
    right: clamp(0px, 0.3vw, 3px);
}

.certification_link a > div {
    width: 20%;
    height: 100%;
}

.link_icon2 {
    overflow: hidden;
}

.link_icon2 img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.certification_link a p {
    width: 60%;
    font-size: clamp(14px, 1.5vw, 18px);
    font-weight: var(--font-w-sb);
    line-height: 1.3em;
    display: flex;
    justify-content: center;
}

@media screen and (max-width: 768px) {
    #certification {
        padding: clamp(0px, 10.3dvw, 40px) 0 clamp(0px, 25.6dvw, 100px);
    }

    .certification_inner .sec_title img {
        width: 325px;
        max-width: 83.3dvw;
    }

    .certification_link {
        flex-direction: column;
        gap: clamp(0px, 4.6dvw, 18px) 0;
    }

    .certification_link a {
        width: 100%;
        max-width: 100%;
        aspect-ratio: 360 / 120;
        gap: 0 clamp(0px, 2.6dvw, 10px);
    }

    .certification_link a::before {
        width: clamp(0px, 5.1dvw, 20px);
        right: clamp(0px, 3.8dvw, 15px);
    }
    .certification_link a:hover::before {
        right: clamp(0px, 2.6dvw, 10px);
    }

    .certification_link a > div {
        width: 18%;
        display: flex;
        align-items: center;
    }
    
    .certification_link a p {
        width: 63%;
        font-size: clamp(0px, 4.6dvw, 18px);
        line-height: 1.4em;
        margin-right: 6%;
    }
}


/* ===============================================
   info board
=============================================== */
#info_board {
    width: 100%;
    position: relative;
    padding: clamp(0px, 2.5vw, 30px) 0 clamp(0px, 8.3vw, 100px);
}

#info_board::after {
    content: "";
    width: 100%;
    height: 100%;
	background: rgba(245,251,251,0.7);
	clip-path:polygon(0 0, 100% 15px, 100% calc(100% - 100px), 0 100%);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.info_board_inner {
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 2;
}

.info_board_inner > div {
    width: 495px;
    max-width: 48%;
}

.info_board_inner .sec_title img {
    max-width: 24.2vw;
}

.info_board_inner .sec_cont {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.archive_list li {
    width: 100%;
    border-bottom: 1px solid var(--color-main);
}

.archive_list li:first-child {
    border-top: 1px solid var(--color-main);
}

.archive_list li a {
    width: 100%;
    aspect-ratio: 495 / 48;
    display: flex;
    align-items: center;
    padding-right: 3%;
    position: relative;
}

.archive_list li a:hover {
    color: var(--color-main);
    background-color: rgba(255,255,255,0.6);
}

.archive_list li a::after {
    content: "";
    width: 0.7em;
    height: 0.7em;
    background: url(../img/arrow_blue.svg) no-repeat center center / contain;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

.archive_list li a .date {
    font-size: clamp(11px, 1.3vw, 15px);
    font-weight: var(--font-w-r);
    letter-spacing: 0.005em;
    width: 7em;
}

.archive_list li a .title {
    width: 100%;
    font-size: clamp(13px, 1.3vw, 16px);
    flex: 1;
    font-weight: var(--font-w-sb);
    letter-spacing: 0.005em;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.archive_more {
    width: 290px;
    max-width: 70%;
    aspect-ratio: 290 / 40;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    margin-top: clamp(0px, 2.5vw, 30px);
    padding-right: 4%;
}

#marketing .archive_more {
    width: 370px;
    max-width: 90%;
    aspect-ratio: 370 / 40;
}

.archive_more p {
    font-size: clamp(14px, 1.5vw, 18px);
    font-weight: var(--font-w-sb);
}

@media screen and (max-width: 768px) {
    #info_board {
        padding: 0 0 clamp(0px, 13.9dvw, 50px);
    }

    #info_board::after {
        clip-path:polygon(0 clamp(0px, 2.6dvw, 10px), 100% clamp(0px, 13.9dvw, 50px), 100% 100%, 0 calc(100% - clamp(0px, 13.9dvw, 50px)));
    }

    .info_board_inner {
        flex-direction: column;
        align-items: center;
        gap: clamp(0px, 14.1dvw, 55px) 0;
    }

    .info_board_inner > div {
        width: 100%;
        max-width: 100%;
    }

    .info_board_inner .sec_title img {
        width: 265px;
        max-width: 67.9dvw;
    }
    
    #news .sec_title span {
        margin-top: 0;
    }

    .archive_list li a {
        aspect-ratio: 360 / 60;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        padding-right: 5%;
    }

    .archive_list li a .date {
        width: 100%;
        font-size: clamp(0px, 3.6dvw, 14px);
        margin-bottom: 0.6em;
    }

    .archive_list li a .title {
        font-size: clamp(0px, 3.8dvw, 15px);
        font-weight: var(--font-w-r);
        flex: initial;
    }

    .archive_more,
    #marketing .archive_more {
        width: 100%;
        max-width: 100%;
        aspect-ratio: 360 / 40;
        margin-top: clamp(0px, 7.7dvw, 30px);
        padding-right: 6%;
    }
    
    .archive_more p {
        font-size: clamp(0px, 4.6dvw, 18px);
        letter-spacing: 0;
    }
}


/* ===============================================
   about glass
=============================================== */
#about_glass {
    width: 100%;
    padding: clamp(0px, 1.7vw, 20px) 0 clamp(0px, 7.5vw, 90px);
}

.about_glass_inner .sec_title img {
    max-width: 28.8vw;
}

.about_glass_link {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 0 clamp(0px, 2.9vw, 35px);
}

.about_glass_link a {
    width: 180px;
    max-width: 18%;
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.about_glass_link a .link_icon {
    width: 100%;
    height: auto;
    line-height: 0;
}

.about_glass_link a p {
    font-size: clamp(14px, 1.5vw, 18px);
    font-weight: var(--font-w-sb);
    line-height: 1.5em;
    text-align: center;
}

@media screen and (max-width: 768px) {
    #about_glass {
        padding: clamp(0px, 11.5dvw, 45px) 0 clamp(0px, 29.5dvw, 115px);
    }

    .about_glass_inner .sec_title img {
        width: 315px;
        max-width: 80.8dvw;
    }

    .about_glass_link {
        flex-wrap: wrap;
        gap: clamp(0px, 4.1dvw, 16px);
    }

    .about_glass_link a {
        width: 165px;
        max-width: 46.5%;
    }

    .about_glass_link a .link_icon {
        width: 100%;
        height: auto;
        line-height: 0;
    }

    .about_glass_link a p {
        font-size: clamp(0px, 4.6dvw, 18px);
        line-height: 1.4em;
        margin-top: 0.2em;
    }
}


/* ===============================================
   environment
=============================================== */
#environment {
    width: 100%;
    position: relative;
    padding: clamp(0px, 2.5vw, 30px) 0 clamp(0px, 6.7vw, 80px);
}

#environment::after {
    content: "";
    width: 100%;
    height: 100%;
	background: rgba(245,251,251,0.7);
	clip-path:polygon(0 0, 100% 100px, 100% 100%, 0 calc(100% - 80px));
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.environment_inner {
    position: relative;
    z-index: 2;
}

.environment_inner .sec_title img {
    max-width: 20.4vw;
}

.environment_inner .sec_cont {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.environment_inner .sec_cont .environment_img {
    width: 410px;
    max-width: 40%;
    border-radius: 5px;
    overflow: hidden;
}

.environment_inner .sec_cont .environment_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.environment_inner .sec_cont .environment_link {
    width: 605px;
    max-width: 58.5%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(10px, 2.1vw, 25px) 0;
}

.environment_inner .sec_cont .environment_link a {
    width: 290px;
    max-width: 48%;
    aspect-ratio: 290 / 50;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-right: 3%;
}

.environment_inner .sec_cont .environment_link a p {
    font-size: clamp(11px, 1.5vw, 18px);
    font-weight: var(--font-w-sb);
    line-height: 1.2em;
    text-align: center;
}

@media screen and (max-width: 768px) {
    #environment {
        padding: clamp(0px, 0.8dvw, 3px) 0 clamp(0px, 13.9dvw, 50px);
    }

    #environment::after {
        clip-path:polygon(0 clamp(0px, 7.7dvw, 30px), 100% 0, 100% calc(100% - clamp(0px, 10.3dvw, 40px)), 0 100%);
    }

    .environment_inner .sec_title img {
        width: 225px;
        max-width: 57.7dvw;
    }

    .environment_inner .sec_cont .environment_img {
        display: none;
    }

    .environment_inner .sec_cont .environment_link {
        width: 100%;
        max-width: 100%;
        flex-direction: column;
        gap: clamp(0px, 4.1dvw, 16px) 0;
    }

    .environment_inner .sec_cont .environment_link a {
        width: 100%;
        max-width: 100%;
        aspect-ratio: 360 / 60;
        padding-right: 0;
    }

    .environment_inner .sec_cont .environment_link a p {
        font-size: clamp(0px, 4.6dvw, 18px);
        line-height: 1.4em;
    }
}


/* ===============================================
   public relations
=============================================== */
#public {
    width: 100%;
    padding: clamp(0px, 4.2vw, 50px) 0 clamp(0px, 8.3vw, 100px);
}

.public_inner .sec_title img {
    max-width: 25.4vw;
}

.public_link {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(0px, 1.7vw, 20px) 0;
}

.public_link a {
    width: 500px;
    max-width: 49%;
    aspect-ratio: 500 / 100;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 clamp(4px, 0.7vw, 8px);
    padding-right: 3%;
}

.public_link a > div {
    height: 100%;
}

.public_link a:nth-child(2) .link_icon {
    margin-right: 3%;
}

.public_link a p {
    font-size: clamp(12px, 1.5vw, 18px);
    font-weight: var(--font-w-sb);
    text-align: center;
    line-height: 1.3em;
    display: flex;
    justify-content: center;
}

@media screen and (max-width: 768px) {
    #public {
        padding: clamp(0px, 11.5dvw, 45px) 0 clamp(0px, 21.8dvw, 85px);
    }

    .public_inner .sec_title img {
        width: 280px;
        max-width: 71.8dvw;
    }

    .public_link {
        flex-direction: column;
        gap: clamp(0px, 3.8dvw, 15px) 0;
    }

    .public_link a {
        width: 100%;
        max-width: 100%;
        aspect-ratio: 360 / 100;
        gap: 0;
        padding-right: 0;
        position: relative;
    }

    .public_link a > div {
        width: 25%;
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .public_link a > div img {
        width: auto;
        height: 84%;
    }

    .public_link a p {
        width: 100%;
        font-size: clamp(0px, 4.6dvw, 18px);
        line-height: 1.4em;
    }

    .public_link a:nth-child(2) .link_icon {
        width: 38%;
        margin-right: 0;
    }
}


/* ===============================================
   note
=============================================== */
#note {
    width: 100%;
    position: relative;
    padding: clamp(0px, 1.7vw, 20px) 0 clamp(0px, 6.3vw, 75px);
}

#note::after {
    content: "";
    width: 100%;
    height: 100%;
	background: rgba(245,251,251,0.7);
	clip-path:polygon(0 60px, 100% 0, 100% calc(100% - 50px), 0 100%);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.note_inner {
    position: relative;
    z-index: 2;
}

.note_inner .sec_title img {
    max-width: 7.5vw;
}

.note_list {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.note_list li {
    width: 320px;
    max-width: 31%;
}

.note_list li a {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.note_list li a:hover {
    color: var(--color-main);
}

.note_list li a .note_img {
    width: 100%;
    aspect-ratio: 320 / 165;
    border: 1px solid #000;
    line-height: 0;
    margin-bottom: clamp(0px, 0.7vw, 8px);
    overflow: hidden;
}

.note_list li a .note_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}

.note_list li a:hover .note_img {
    border: 1px solid var(--color-main);
}

.note_list li a:hover .note_img img {
    transform: scale(1.1);
}

.note_list li a .note_text_area {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: clamp(0px, 1.3vw, 15px);
}

.note_list li .note_title,
.note_list li .note_text {
    display: inline;
}

.note_list li .note_title {
    font-size: clamp(14px, 1.5vw, 18px);
    font-weight: var(--font-w-sb);
    line-height: 1.4em;
}

.note_list li .note_text {
    font-size: clamp(14px, 1.5vw, 18px);
    font-weight: var(--font-w-r);
    line-height: 1.4em;
}

.note_list li .note_text span {
    width: 100%;
    display: block;
    height: 0.6em;
}

.note_inner .note_date {
    width: 100%;
    font-size: clamp(10px, 1.2vw, 14px);
    font-weight: var(--font-w-r);
    text-align: right;
    margin-top: auto;
}

.note_inner .note_more {
    width: 290px;
    aspect-ratio: 290 / 40;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    margin-top: clamp(0px, 2.5vw, 30px);
}

.note_inner .note_more p {
    font-size: clamp(14px, 1.5vw, 18px);
    font-weight: var(--font-w-sb)
}

@media screen and (max-width: 768px) {
    #note {
        padding: clamp(0px, 1.3dvw, 5px) 0 clamp(0px, 21.8dvw, 85px);
    }

    #note::after {
        clip-path:polygon(0 0, 100% clamp(0px, 15.4dvw, 60px), 100% 100%, 0 calc(100% - clamp(0px, 19.2dvw, 75px)));
    }

    .note_inner .sec_title img {
        width: 80px;
        max-width: 20.5dvw;
    }

    .note_list {
        flex-direction: column;
        gap: clamp(0px, 7.7dvw, 30px) 0;
    }

    .note_list li {
        width: 100%;
        max-width: 100%;
    }

    .note_list li a .note_img {
        aspect-ratio: 360 / 185;
        margin-bottom: clamp(0px, 2.1dvw, 8px);
    }

    .note_list li a .note_text_area {
        margin-bottom: clamp(0px, 2.6dvw, 10px);
    }
    
    .note_list li .note_title {
        font-size: clamp(0px, 4.1dvw, 16px);
    }

    .note_list li .note_text {
        font-size: clamp(0px, 4.1dvw, 16px);
    }

    .note_list li .note_text span {
        height: 0.3em;
    }

    .note_inner .note_date {
        font-size: clamp(0px, 3.6dvw, 14px);
    }

    .note_inner .note_more {
        width: 100%;
        aspect-ratio: 360 / 40;
        margin-top: clamp(0px, 7.7dvw, 30px);
    }

    .note_inner .note_more p {
        font-size: clamp(0px, 4.6dvw, 18px);
    }
}


/* ===============================================
   event
=============================================== */
#event {
    width: 100%;
    padding: clamp(0px, 3.3vw, 40px) 0 clamp(0px, 6.7vw, 80px);
}

.event_inner .sec_title img {
    max-width: 9.2vw;
}

.event_list {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.event_list li {
    width: 240px;
    max-width: 23.5%;
}

.event_list li a {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid #000;
    background-color: #fff;
    padding: clamp(0px, 1.3vw, 15px);
}

.event_list li a:hover {
    color: var(--color-main);
    border: 1px solid var(--color-main);
}

.event_list li a .event_img {
    width: 100%;
    aspect-ratio: 210 / 120;
    line-height: 0;
    overflow: hidden;
}

.event_list li a .event_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}

.event_list li a:hover .event_img img {
    transform: scale(1.1);
}

.event_list li .event_title p {
    font-size: clamp(14px, 1.5vw, 18px);
    font-weight: var(--font-w-sb);
    line-height: 1.4em;
    letter-spacing: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin-top: 0.5em;
    margin-bottom: 1em;
}

.event_inner .event_date {
    width: 100%;
    font-size: clamp(10px, 1.2vw, 14px);
    font-weight: var(--font-w-r);
    text-align: right;
    margin-top: auto;
}

.event_inner .event_more {
    width: 290px;
    aspect-ratio: 290 / 40;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    margin-top: clamp(0px, 2.5vw, 30px);
}

.event_inner .event_more p {
    font-size: clamp(14px, 1.5vw, 18px);
    font-weight: var(--font-w-sb)
}

@media screen and (max-width: 768px) {
    #event {
        padding: clamp(0px, 3.3dvw, 13px) 0 clamp(0px, 19.2dvw, 75px);
    }

    .event_inner .sec_title img {
        width: 100px;
        max-width: 25.6dvw;
    }

    .event_list {
        flex-direction: column;
        gap: clamp(0px, 4.1dvw, 16px) 0;
    }

    .event_list li {
        width: 100%;
        max-width: 100%;
    }

    .event_list li a {
        padding: clamp(0px, 3.8dvw, 15px) clamp(0px, 3.8dvw, 15px) clamp(0px, 2.6dvw, 10px);
    }

    .event_list li a .event_img {
        aspect-ratio: 330 / 130;
    }
    
    .event_list li .event_title p {
        font-size: clamp(0px, 4.1dvw, 16px);
        margin-bottom: 0.5em;
    }

    .event_inner .event_date {
        font-size: clamp(0px, 3.6dvw, 14px);
    }

    .event_inner .event_more {
        width: 100%;
        aspect-ratio: 360 / 40;
        margin-top: clamp(0px, 7.7dvw, 30px);
    }

    .event_inner .event_more p {
        font-size: clamp(0px, 4.6dvw, 18px);
    }
}