/* ========================
    common
=========================== */
@font-face {
    font-family: 'Javacom';
    src: url('../font/Javacom.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}

body{
    font-size: 16px;
    font-weight: 300;
    line-height: 1.5;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    color: #333333;
    background-color: #f5f5e5;
    letter-spacing: 0.05em;
}

body.no-scroll{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

.wrap{
    max-width: 1600px !important;
    margin: auto;
}

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

.text{
    font-size: 1em;
    line-height: 2.5;
}

.c-container{
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}

.parallax-img-wrap{
    position: relative;
    overflow: hidden;  
}

.parallax-img-wrap.parallax-move{
    transform: translateY(80px);
}

.parallax-img-wrap img{
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
}

.parallax-img-wrap.width--lg img{
    width: auto;
    height: 100%;
}

.parallax-img-wrap.move-to-right img{
    left: auto;
    right: 0;
}

.parallax-img-wrap.move-to-bottom img{
    top: auto;
    bottom: 0;
}

.parallax-img-wrap.add--scale img{
    transform: scale(1.2);
    transform-origin: top left;
}

.section-title{
    font-family: 'Javacom';
    font-size: min(134px, calc((134 / 1600) * 100vw));
    font-weight: 400;
    letter-spacing: 0;
}

.add-padding-inline{
    padding-left: 20px !important;
    padding-right: 20px !important;
}

.animation-target-wrap{
    overflow: hidden;
}

.animation-target{
    transform: translateY(100%);
    transition: 1s cubic-bezier(0.25, 1, 0.5, 1) transform;
}

span.animation-target{
    display: inline-block;
}

.animation-target.js-animation{
    transform: translateY(0%);
}

.more-btn,
.smf-button-control{
    font-size: 16px;
    line-height: 2.5;
    font-weight: 500;
    width: fit-content;
}

.more-btn a{
    padding: 0;
}

.more-btn span,
.smf-action .smf-button-control__control{
    display: inline-block;
    padding: 0 calc((15 / 16) * 1em);
    border-bottom: 1px solid #9c9d00 !important;
    letter-spacing: 0.05em;
}

.smf-action .smf-button-control__control{
    background: none;
    border: none;
}

.page__body{
    padding-top: 135px;
}

.section-lead__inner{
    width: 90%;
    margin: auto;
}

.section-lead__wrap{
    font-size: 38px;
    text-align: center;
}

.section-lead__text{
    font-size: 1em;
    font-weight: 400;
    letter-spacing: 0.05em;
}

.section-lead__sub-text{
    font-size: max(12px, calc((16 / 38) * 1em));
}

.section-lead__text + .section-lead__sub-text{
    margin-top: calc((3 / 16) * 1em);
}

.page-img__container{
    padding: min(187px, calc((187 / 1024) * 100vw)) 0 min(199px, calc((199 / 1024) * 100vw));
    background-color: #ffffff;
}

.page-img__wrap{
    width: 90%;
    max-width: 1360px !important;
    margin: auto;
    aspect-ratio: 1360 / 830.5;
}

.text-img__group{
    max-width: 1600px !important;
    margin: 130px auto 0;
    gap: 0;
}

.text-img__group:first-child{
    margin-top: 0;
}

.text-img__group-img-outer{
    max-width: calc((800 / 1600) * 100%);
}

.text-img__group-text-outer + .text-img__group-img-outer{
    margin-left: auto;
}

.text-img__group-img-wrap{
    aspect-ratio: 800 / 532.9;
}

.text-img__group-text-outer{
    max-width: calc((677.5 / 1600) * 100%);
    margin-left: calc((54 / 1600) * 100%) !important;
    transform: translateY(calc((-40 / 677.5) * 100%));
}

.text-img__group-lead{
    font-size: 38px;
    line-height: 1.61;   
    letter-spacing: 0.05em;
}

.text-img__group-lead::after{
    content: "";
    display: block;
    width: calc((629.7 / 677.5) * 100%);
    height: 1px;
    background-color: #333333;
    margin-top: calc((33 / 677.5) * 100%);
    transform: translateX(calc((-3 / 629.7) * 100%));
}

.text-img__group-text-wrap{
    margin-top: calc((41 / 677.5) * 100%);
}

.text-img__group-text{
    margin-top: calc((40 / 677.5) * 100%);
}

.text-img__group-text:first-child{
    margin-top: 0;
}

.paginate_links{
    display: flex;
    justify-content: center;
    margin-top: 123px;
}

.page-numbers{
    font-size: 18px;
    width: calc((66 / 18) * 1em);
    height: calc((66 / 18) * 1em);
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    border-left: 1px solid #dddddd;
    transition: 0.4s ease;
}

.page-numbers:hover,
.page-numbers.current{
    color: #ffffff;
    background-color: #9c9d00;
    border: none;
}

.page-numbers svg{
    width: calc((21.2 / 18) * 1em);
}

.page-numbers.prev svg{
    transform: scale(-1);
}

.page-numbers path{
    transition: 0.4s ease;
}

.page-numbers:hover path{
    fill: #ffffff;
}

.not-found__body{
    padding-bottom: 135px;
}

.not-found-text{
    width: 90%;
    max-width: 1000px;
    margin: auto;
    font-size: 28px;
    font-weight: 500;
}

@media screen and (max-width: 1024px){
    body{
        font-size: 15px;
    }

    .more-btn,
    .smf-button-control{
        font-size: 15px;
        line-height: 2.2;
    }

    .section-lead__wrap{
        font-size: 30px;
    }

    .text{
        line-height: 2.3;
    }

    .parallax-img-wrap.parallax-move{
        transform: translateY(40px);
    }

    .text-img__group-lead{
        font-size: 30px;
        line-height: 1.1;   
    }

    .page-numbers{
        font-size: 16px;
    }

    .not-found-text{
        font-size: 23px;
    }
}

@media screen and (max-width: 767px){
    body{
        font-size: 14px;
    }

    .more-btn,
    .smf-button-control{
        font-size: 14px;
        line-height: 1.9;
    }

    .parallax-img-wrap.parallax-move{
        transform: translateY(0);
    }

    .section-title{
        font-size: 35px;
    }

    .section-lead__wrap{
        font-size: 22px;
    }

    .text{
        line-height: 1.9;
    }

    .page__body{
        padding-top: 65px;
    }

    .text-img__group{
        flex-direction: column;
    }

    .text-img__group-img-outer{
        order: 1;
        max-width: none;
    }

    .text-img__group-text-outer{
        order: 2;
        max-width: 677.5px;
        margin: 20px 0 0 auto !important;
    }

    .text-img__group-lead{
        font-size: 22px;
        line-height: 1.41;  
        padding: 0 15px; 
    }

    .text-img__group-lead::after{
        width: 100%;
        left: 0;
    }

    .text-img__group-text{
        padding: 0 15px;
    }

    .paginate_links {
        margin-top: 90px;
    }

    .page-numbers{
        font-size: 14px;
    }

    .not-found__body{
        padding-bottom: 65px;
    }

    .not-found-text{
        font-size: 18px;
    }
}

/* ========================
    header
=========================== */
.header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    pointer-events: none;
}

.header__inner{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: min(45px, calc((45 / 1600) * 100vw)) min(40px, calc((40 / 1600) * 100vw)) min(45px, calc((45 / 1600) * 100vw)) min(60px, calc((60 / 1600) * 100vw));
    position: relative;
    z-index: 100;
}

.header-logo{
    padding-top: calc((5 / 1600) * 100%);
    overflow: hidden;
}

.header-logo.js-active{
    pointer-events: auto;
}

.header-logo__link{
    color: #ffffff;
    font-family: 'Javacom';
    display: inline-block;
    font-size: 30px;
    line-height: 1.2;
    letter-spacing: 0.05em;
    transform: translateY(-120%);
    transition: 0.4s ease;
    text-shadow: calc((-5 / 30) * 1em) calc((5 / 30) * 1em) calc((5 / 30) * 1em) #333333;
}

.header-logo.js-active .header-logo__link{
    transform: translateY(0);
}

.hamburger{
    position: relative;
    z-index: 100;
    width: 55px;
    height: 55px;
    background-color: #9c9d00;
    transition: 0.4s ease;
    pointer-events: auto;
}

.hamburger:hover{
    border-radius: 50%;
}

.hamburger__line{
    width: calc((27.3 / 55) * 100%);
    height: 1px;
    background-color: #333333;
    transition: 0.4s ease;
    position: absolute;
    display: inline-block;
}

.hamburger__line--top {
    top: calc(50% - 5px);
    left: 50%;
    transform: translate(-50%, -50%);
    transition: 
    transform 0.2s ease,
    top 0.2s 0.3s ease; 
}

.hamburger__line--bottom {
    top: calc(50% + 5px);
    left: 50%;
    transform: translate(-50%, -50%);
    transition: 
    transform 0.2s ease,
    top 0.2s 0.3s ease;
}

.js-close .hamburger__line--top {
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    transition: 
    top 0.2s ease,
    transform 0.2s 0.3s ease;
}

.js-close .hamburger__line--bottom {
    top: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    transition: 
    top 0.2s ease,
    transform 0.2s 0.3s ease;
}

.drawer__bg{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 90;
    background-color: #333333;
    transition: 1.6s cubic-bezier(0.86, 0, 0.07, 1);
    clip-path: circle(calc(50px / 2) at top min(calc(45px + (50px / 2)),calc(((45 / 1600) * 100vw) + (50px / 2))) right  min(calc(40px + (50px / 2)),calc(((40 / 1600) * 100vw) + (50px / 2))));
    pointer-events: auto;
}

.drawer__bg.js-active{
    clip-path: circle(100% at top 50vh right 50vh);
}

.drawer__bg > .wrap{
    position: relative;
    z-index: 0;
    height: 100%;
}

.drawer__bg > .wrap::before{
    content: "";
    display: block;
    width: min(791.7px, calc((791.7 / 1600) * 100vw));
    height: min(1216.1px, calc((1216.1 / 1600) * 100vw));
    background: url('../img/common/menu_bg.png') no-repeat;
    background-size: 100%;
    position: absolute;
    top: calc((123.8 / 1600) * 100%);
    right: 0;
}

.drawer__inner{
    width: 90%;
    max-width: 1210px;
    padding-top: min(262px, calc((262 / 1600) * 100vw));
    margin: auto;
}

.drawer-menu {
    transform: translateX(min(34px, calc((34 / 1210) * 100vw)));
}

.drawer-menu__list{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.drawer-menu__list li{
    width: calc((100% - ((20 / 542) * 100%)) / 2);
    max-width: 542px;
    margin: 0 0 calc((25 / 50) * 1em) calc((20 / 542) * 100%);
    font-size: 50px;
}

.drawer-menu__list li:nth-child(odd){
    margin-left: 0;
}

.drawer-menu__list a{
    color: #ffffff;
    font-family: 'Javacom';
    letter-spacing: 0;
    display: flex;
    align-items: flex-start;
    width: fit-content;
}

.drawer-menu__list a::before{
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #9c9d00;
    margin: calc((17 / 50) * 1em) min(57px, calc((57 / 1600) * 100vw)) 0 0;
}

@media screen and (max-width: 1024px){
    .header-logo__link{
        font-size: 25px;
    }

    .hamburger{
        width: 50px;
        height: 50px;
    }

    .drawer__bg{
        clip-path: circle(calc(45px / 2) at top calc(((29 / 1024) * 100vw) + (45px / 2)) right  calc(((25.8 / 1024) * 100vw) + (45px / 2)));
    }

    .drawer-menu__list li{
        font-size: 35px;
    }
}

@media screen and (max-width: 767px){
    .header-logo__link{
        font-size: 20px;
    }

    .hamburger{
        width: 45px;
        height: 45px;
    }

    .drawer__bg{
        clip-path: circle(calc(40px / 2) at top calc(((23 / 767) * 100vw) + (40px / 2)) right  calc(((20 / 767) * 100vw) + (40px / 2)));
    }

    .drawer-menu__list li{
        font-size: 20px;
        width: 100%;
        margin: 20px 0 0;
    }

    .drawer-menu__list li:first-child{
        margin-top: 0;
    }

    .drawer-menu__list li.drawer-menu__item-contact{
        order: 5;
    }

    .drawer__inner{
        padding-top: 100px;
    }

    .drawer-menu__list{
        flex-direction: column;
    }
}

/* ========================
    mainvisual
=========================== */
.top-mainvisual{
    position: relative;
    z-index: 0;
    height: calc((972 / 1600) * 100vw);
    display: flex;
    align-items: center;
}

.top-mainvisual > .smb-container__body{
    width: 100%;
}

.top-mainvisual__bg{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-color: #333333;
}

.top-mainvisual__inner{
    padding-top: calc((752.8 / 1520) * 100vw);
    position: relative;
    width: 100%;
    height: 0;
    overflow: hidden;
}

.top-mainvisual__inner > .wp-block-group__inner-container{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.top-mainvisual__text-wrap{
    margin-top: calc((12 / 1600) * 100vw);
}

.top-mainvisual__text-wrap .smb-container__body{
    overflow: hidden;
}

.top-mainvisual__text{
    font-family: 'Cormorant', serif;
    font-weight: 300;
    font-size: min(80px, calc((80 / 1600) * 100vw));
    color: #ffffff;
    width: 100%;
    max-width: 1600px;
    margin: auto;
    padding-left: min(40px, calc((40 / 1600) * 100vw));
    letter-spacing: 0;
    transform: translateY(100%);
}

.top-mainvisual__slider-wrap{
    margin-top: 10px;
    width: 100%;
    flex-grow: 1;
    position: relative;
    z-index: 0;
}

.top-mainvisual__slider-wrap *{
    height: 100%;
}

.top-mainvisual__slider{
    overflow: hidden;
}

.slick-zoom{
    animation: zoom 12s linear normal both;
    -webkit-animation: zoom 12s linear normal both;
}

.stop-zoom{
    animation-play-state: paused;
    -webkit-animation-play-state: paused;
}

.top-mainvisual__slide-text{
    font-family: 'Javacom';
    color: rgba(245, 245, 229, 0.61);
    position: absolute;
    bottom: calc((-9 / 1600) * 100vw);
    right: calc((30 / 1600) * 100vw);
    z-index: 1;
    height: auto;
    font-size: calc((166.6 / 1600) * 100vw);
    font-weight: 400;
    line-height: 1.2;
}

@keyframes zoom{
    0%{
        transform: scale(1);
    }
    100%{
        transform: scale(1.4);
    }
}

@media screen and (max-width: 767px){
    .top-mainvisual__slide-text{
        bottom: 0;
    }
}

/* ========================
    top news
=========================== */
.top-news__container{
    min-height: 156.6px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #333333;
}

.top-news__container .smb-container__body{
    width: 100%;
    padding: 20px calc((43 / 1600) * 100vw);
}

.top-news__container .wp-block-post,
.top-news__container .wp-block-query-no-results p{
    display: flex;
    color: #ffffff;
    font-size: 16px;
    line-height: 1.2;
    max-width: 645.5px;
    margin: calc((7 / 16) * 1em) 0 0 auto;
}

.top-news__container .wp-block-post:first-child{
    margin-top: 0;
}

.top-news__cat{
    margin-right: max(10px, calc((23 / 1600) * 100vw));
}

.top-news__date{
    margin-right: max(10px, calc((31 / 1600) * 100vw));
}

.top-news__title a{
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

@media screen and (max-width: 1024px){
    .top-news__container{
        min-height: 136.6px;
    }

    .top-news__container .wp-block-post,
    .top-news__container .wp-block-query-no-results p{
        font-size: 15px;
    }
}

@media screen and (max-width: 767px){
    .top-news__container{
        min-height: 116.6px;
    }

    .top-news__container .wp-block-post,
    .top-news__container .wp-block-query-no-results p{
        font-size: 14px;
    }

    .top-news__container .wp-block-post{
        flex-wrap: wrap;
    }

    .top-news__title{
        width: 100%;
        margin-top: 3px;
    }
}

/* ========================
    top story
=========================== */
.top-story__container{
    padding: 105px 0 min(262px, calc((262 / 1600) * 100vw));
    background-color: #f5f5e5;
}
.top-story__inner{
    max-width: 1462.7px !important;
}

.top-story__img-group{
    justify-content: space-between;
    flex-wrap: wrap !important;
}

.top-story__img-wrap01{
    width: calc((704 / 1462.7) * 100%);
    aspect-ratio: 704 / 469;
}

.top-story__img-wrap02{
    width: calc((625 / 1462.7) * 100%);
    margin-top: min(105px, calc((105 / 1600) * 100vw)) !important;
    aspect-ratio: 625 / 833.5;
}

.top-story__container .section-title__wrap{
    margin: max(-170px, calc((-170 / 1600) * 100vw)) 0 0 max(-30px, calc((-30 / 1600) * 100vw));
}

.top-story__container .section-title{
    width: 100%;
}

.top-story__content{
    max-width: 1099.4px !important;
    margin-top: min(172px, calc((172 / 1600) * 100vw));
    margin-bottom: 0;
}

.top-story__content-img-wrap{
    aspect-ratio: 389.9 / 519.4;
}

.top-story__content-body{
    max-width: 624.9px;
    margin-left: auto;
}

.top-story__content-body .text{
    max-width: 494.5px;
}

.top-story__content-body .text:nth-child(2){
    margin-top: min(40px, calc((40 / 624.9) * 100%));
}

.top-story__content-body .text:nth-child(3){
    margin-top: min(80px, calc((80 / 624.9) * 100%));
}

.top-story__content-body .more-btn__wrap{
    margin-top: min(72px, calc((72 / 624.9) * 100%));
}

.top-story__content-body .more-btn{
    margin-left: auto;
}

@media screen and (max-width: 767px){
    .top-story__img-group{
        flex-direction: column;
    }

    .top-story__img-wrap01{
        width: 100%;
        order: 1;
        transform: translateY(50%);
    }

    .top-story__img-wrap02{
        width: 100%;
        order: 3;
        margin-top: 40px !important;
    }

    .top-story__container .section-title__wrap{
        order: 2;
        margin-top: 20px;
    }

    .top-story__content{
        flex-direction: column-reverse;
        margin-top: 40px;
    }

    .top-story__content-img-wrap{
        width: 100%;
        margin-top: 40px;
    }
}

/* ========================
    top works
=========================== */
.top-works__container{
    padding: 135px 0 99px;
    background-color: #ffffff;
}

.top-works__container .section-title{
    font-size: min(100px, calc((100 / 1600) * 100vw));
    padding-left: min(110px, calc(110 / 1600) * 100vw);
}

.top-works__content{
    margin-top: 123px;
}

.top-works__wrap{
    max-width: 1499.9px !important;
    margin: 73px 0 0;
}

.top-works__wrap:first-child{
    margin-top: 0;
}

.top-works__wrap:nth-child(odd){
    margin-left: 0 !important;
}

.top-works__wrap:nth-child(even){
    margin-left: auto !important;
    margin-right: 0 !important;
}

.top-works__wrap-img-wrap{
    aspect-ratio: 730 / 626;
}

.top-works__wrap-body{
    max-width: 625.7px;
}

.top-works__wrap:nth-child(odd) .top-works__wrap-body{
    margin-left: auto;
}

.top-works__wrap-text{
    font-size: 38px;
    letter-spacing: 0.05em;
    line-height: 1.612;
    transform: translateY(calc((12 / 38) * 1em));
}

.top-works__wrap:nth-child(odd) .top-works__wrap-text,
.top-works__wrap:nth-child(odd) .more-btn__wrap{
    padding-right: 15px;
}

.top-works__wrap:nth-child(even) .top-works__wrap-text,
.top-works__wrap:nth-child(even) .more-btn__wrap{
    padding-left: 15px;
}

.top-works__wrap-text::after{
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background-color: #333333;
    margin-top: calc((30 / 38) * 1em);
}

.top-works__wrap .more-btn__wrap{
    margin-top: calc((100 / 625.7) * 100%);
}

.top-works__wrap .more-btn{
    margin-left: auto;
}

@media screen and (max-width: 1024px){
    .top-works__wrap-text{
        font-size: 30px;
    }
}

@media screen and (max-width: 767px){
    .top-works__container{
        padding: 105px 0 69px;
    }

    .top-works__container .section-title{
        font-size: 35px;
        padding-left: 15px;
    }

    .top-works__content{
        margin-top: 90px;
    }

    .top-works__wrap-text{
        font-size: 22px;
        line-height: 1.412;
    }

    .top-works__wrap{
        flex-direction: column;
    }

    .top-works__wrap-img-outer{
        order: 1;
    }

    .top-works__wrap-body-outer{
        order: 2;
    }

    .top-works__wrap:nth-child(odd) .top-works__wrap-text, 
    .top-works__wrap:nth-child(odd) .more-btn__wrap {
        padding-left: 15px;
    }

    .top-works__wrap:nth-child(even) .top-works__wrap-text, 
    .top-works__wrap:nth-child(even) .more-btn__wrap{
        padding-right: 15px;
    }
}

/* ========================
    top products
=========================== */
.top-products__container{
    padding: 150px 0 153px;
    overflow: hidden;
    background-color: #333333;
    min-height: 100vh;
}

.top-products__container .section-title{
    color: #ffffff;
    font-size: min(100px, calc((100 / 1600) * 100vw));
    padding-left: min(111px, calc((111 / 1600) * 100vw));
}

.top-products__group{
    margin: 117px auto 0;
    width: 90%;
    max-width: 1100px !important;
}

.top-products__group > .smb-container__body > .wp-block-query{
    max-width: none;
    display: inline-block;
}

.products__group-list{
    display: flex;
}

.products__group-list li{
    margin-left: 20px;
    flex-shrink: 0;
    width: calc((550 / 1600) * 100vw);
}

.products__group-list li:first-child{
    margin-left: 0;
}

.products__post-thumb a{
    display: block;
    aspect-ratio: 550 / 368;
}

.products__post-body{
    position: relative;
    font-size: 38px;
    color: #ffffff;
}

.products__post-title{
    line-height: 1.31;
    font-size: 1em;
}

.products__post-title::first-letter{
    color: #9c9d00;
}

.products__post-title a{
    display: block;
    padding: calc((31 / 38) * 1em) calc((5 / 38) * 1em) calc((34 / 38) * 1em);
    letter-spacing: 0.05em;
}

.products__post-subtitle{
    font-size: calc((16 / 38) * 1em);
    position: absolute;
    bottom: 0;
    left: calc((5 / 38) * 1em);
    pointer-events: none;
}

.top-products__group .wp-block-query-no-results p{
    color: #ffffff;
    width: 90%;
    max-width: 1489px;
    margin: auto;
}

.top-products__group .more-btn__wrap{
    margin-top: 122px;
}

.top-products__group .more-btn{
    color: #ffffff;
    margin: auto;
}

@media screen and (max-width: 1024px){
    .products__post-body{
        font-size: 30px;
    }
}

@media screen and (max-width: 767px){
    .top-products__container{
        padding: 60px 0 63px;
    }

    .top-products__container .section-title{
        font-size: 35px;
        padding-left: 15px;
    }

    .top-products__group{
        margin-top: 45px;
    }

    .products__group-list li{
        width: 263.6px;
    }

    .products__post-body{
        font-size: 22px;
    }

    .top-products__group .more-btn__wrap {
        margin-top: 70px;
    }
}

/* ========================
    top artist
=========================== */
.top-artist__container{
    padding: 198px 0;
    background-color: #f5f5e5;
}

.top-artist__inner{
    padding: 0 max(20px, calc((79 / 1600) * 100vw)) 0 max(20px, calc((68 / 1600) * 100vw)) !important;
}

.top-artist__container .section-title{
    font-size: min(152.1px, calc((152.1 / 1600) * 100vw));
    padding-left: min(20px, calc((20 / 1600) * 100vw));
}

.top-artist__content{
    max-width: 1452px !important;
    margin: auto;
    justify-content: space-between;
}

.top-artist__content-img-wrap{
    aspect-ratio: 652.3 / 869.2;
}

.top-artist__content-body{
    margin-top: calc((10 / 676.4) * 100%) !important;
}

.top-artist__content-body-text{
    font-size: 16px;
    line-height: 1.75;
    margin-top: calc((125 / 676.4) * 100%);
    margin-top: min(125px, calc((125 / 1600) * 100vw));
    padding-left: calc((31 / 676.4) * 100%);
}

.top-artist__content-body .more-btn__wrap{
    margin-top: calc((40 / 676.4) * 100%);
}

.top-artist__content-body .more-btn{
    margin-left: auto;
}

.top-artist__content-img-caption{
    font-size: 16px;
    margin: calc((9 / 16) * 1em) 0 0 calc((5 / 16) * 1em);
}

.top-artist__img-group{
    justify-content: space-between;
    margin-top: max(-307px, calc((-307 / 1600) * 100vw));
}

.top-artist__img01{
    width: calc((650.6 / 676.4) * 100%);
    max-width: 650.6px;
    aspect-ratio: 650.6 / 437.9;
    margin: auto;
}

.top-artist__img02{
    width: calc((321.8 / 676.4) * 100%);
    max-width: 321.8px;
    aspect-ratio: 321.8 / 432;
    margin: max(75px, calc((87 / 676.4) * 100%)) calc((20 / 676.4) * 100%) 0 auto;
}

.top-artist__img03{
    width: calc((454 / 652.3) * 100%);
    max-width: 454px;
    aspect-ratio: 454 / 254.8;
    margin: calc((238 / 652.3) * 100%) 0 0 calc((5 / 652.3) * 100%);
}

@media screen and (max-width: 1200px){
    .top-artist__img-group {
        margin-top: calc((-200 / 1200) * 100vw);
    }
}

@media screen and (max-width: 1024px){
    .top-artist__img-group {
        margin-top: calc((-140 / 1024) * 100vw);
    }

    .top-artist__content-body-text,
    .top-artist__content-img-caption{
        font-size: 15px;
    }
}

@media screen and (max-width: 767px){
    .top-artist__container{
        padding: 100px 0 40px;
    }

    .top-artist__container .section-title{
        font-size: 35px;
    }

    .top-artist__content-body-text,
    .top-artist__content-img-caption{
        font-size: 14px;
    }

    .top-artist__content{
        display: block !important;
    }

    .top-artist__content-body{
        margin: 0;
    }
    
    .top-artist__content-img-outer{
        margin-top: 30px !important;
    }

    .top-artist__img-group{
        margin: 40px 0 0;
        display: block !important;
    }

    .top-artist__img01{
        width: 90%;
    }

    .top-artist__img02{
        width: 50%;
        margin-right: 0;
    }

    .top-artist__img03{
        width: 80%;
        margin: 20px auto 0;
    }

    .top-gallery__text{
        font-size: 30px;
    }
}

/* ========================
    top gallery
=========================== */
.top-gallery__container{
    overflow: hidden;
    padding: 25px 0 195px;
    background-color: #f5f5e5;
}

.top-gallery__text{
    font-family: 'Cormorant', serif;
    font-weight: 300;
    font-size: calc((102.7 / 1600) * 100vw);
    letter-spacing: 0;
    white-space: nowrap;
    color: #959595;
    line-height: 1;
}

.top-gallery__text:last-child{
    margin-top: calc((-6 / 102.7) * 1em);
}

.top-gallery__img-group-wrap{
    margin: 8px 0 0;
}

.top-gallery__img-group-wrap:nth-child(2){
    margin-top: calc((30 / 1600) * 100vw);
}

.top-gallery__img-group{
    gap: 0 8px;
    margin: 0;
}

.top-gallery__img-wrap{
    width: calc((612.6 / 1600) * 100vw);
    flex-shrink: 0;
    flex-basis: auto !important;
}

@media screen and (max-width: 767px){
    .top-gallery__container{
        padding: 0 0 95px;
    }

    .top-gallery__text{
        font-size: 30px;
    }

    .top-gallery__img-wrap{
        width: 200px;
    }
}

/* ========================
    common contact
=========================== */
.common-contact__container{
    overflow: hidden;
    background-color: #9c9d00;
    position: relative;
}

.common-contact__link{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.common-contact__container .wrap{
    padding: min(230px, calc((230 / 1100) * 100vw)) 0px min(201px, calc((201 / 1100) * 100vw));
    position: relative;
    z-index: 0;
}

.common-contact__img{
    position: absolute;
    top: 0;
    z-index: -1;
    height: 100%;
}

.common-contact__layer-img{
    left: max(-182px, calc((-182 / 1600) * 100vw));
    width: min(745.4px, calc((745.4 / 1600) * 100vw));
}

.common-contact__layer-img img{
    transform: translateY(max(-681px, calc((-681 / 1600) * 100vw)));
}

.common-contact__normal-img{
    right: 0;
    width: min(520.2px, calc((520.2 / 1600) * 100vw));
}

.common-contact__normal-img img{
    transform: translateY(min(100px, calc((100 / 1600) * 100vw)));
}

.common-contact__inner{
    width: 90%;
    margin: auto;
}

.common-contact__container .section-title{
    text-align: center;
    font-size: min(152.1px, calc((152.1 / 1600) * 100vw));
}

.common-contact__text{
    max-width: 630px !important;
    font-size: 16px;
    line-height: 1.75;
    letter-spacing: 0.05em;
    text-align: center;
    text-shadow: 3px 3px 5px #9c9d00;
}

@media screen and (max-width: 1024px){
    .common-contact__text{
        font-size: 15px;
    }
}

@media screen and (max-width: 767px){
    .common-contact__container .wrap {
        padding: 95px 0px 85px;
    }

    .common-contact__container .section-title{
        font-size: 35px;
    }

    .common-contact__text{
        font-size: 14px;
    }

    .common-contact__layer-img{
        width: 220px;
    }

    .common-contact__normal-img {
        width: 150px;
        height: 70%;
        top: auto;
        bottom: 0;
    }

    .common-contact__normal-img img {
        transform: translateY(30px);
    }
}

/* ========================
    footer
=========================== */
.footer{
    color: #ffffff;
    background-color: #333333;
    text-align: center;
    padding: 196px 5px 207px;
}

.footer__text{
    font-family: 'Javacom';
    font-size: 40.4px;
    letter-spacing: 0.05em;
    line-height: 1.199;
}

.copyright{
    font-size: 16px;
    letter-spacing: 0.05em;
    line-height: 1.75;
    margin-top: calc((10 / 16) * 1em);
}

@media screen and (max-width: 1024px){
    .footer {
        padding: 116px 5px 127px;
    }

    .footer__text{
        font-size: 35px;
    }

    .copyright{
        font-size: 13px;
    }
}

@media screen and (max-width: 767px){
    .footer {
        padding: 46px 5px 57px;
    }

    .footer__text{
        font-size: 30px;
    }

    .copyright{
        font-size: 11px;
        line-height: 1.55
    }
}

/* ========================
    下層　mainvisual
=========================== */
.under-mainvisual{
    padding: min(145px, calc((145 / 1615) * 100vw)) 0 131px;
    background-color: #333333;
}

.under-mainvisual__title{
    color: #ffffff;
    font-family: 'Javacom';
    font-size: min(134px, calc((134 / 1600) * 100vw));
    line-height: 1.2;
    letter-spacing: 0;
    padding: 0 max(15px, min(74px, calc((74 / 1600) * 100vw)));
}

.under-mainvisual__title span{
    padding: min(95px, calc((95 / 1600) * 100vw)) 0;
}

@media screen and (max-width: 767px){
    .under-mainvisual{
        padding: max(65.4px, calc((88.1 / 767) * 100vw) ) 0 calc((131 / 767) * 100vw);
    }

    .under-mainvisual__title{
        font-size: 35px;
        padding: 0 max(15px, min(74px, calc((74 / 1600) * 100vw)));
    }
}

/* ========================
    breadcrumb
=========================== */
.breadcrumb-list{
    max-width: 1492px;
    margin: auto;
    display: flex;
    margin-top: 22px;
    padding: 0 15px;
}

.breadcrumb-list *{
    font-size: 16px;
}

.breadcrumb__item{
    color: #9c9d00;
    margin-right: calc((48 / 16) * 1em);
    position: relative;
}

.breadcrumb__item::after{
    content: "";
    display: block;
    width: calc((12 / 16) * 1em);
    height: calc((12 / 16) * 1em);
    border-right: 1px solid #ffffff;
    border-bottom: 1px solid #ffffff;
    position: absolute;
    top: calc((9 / 16) * 1em);
    left: 100%;
    transform: translateX(calc((11 / 16) * 1em)) rotate(-45deg) skew(calc((90deg - 60deg) / 2), calc((90deg - 60deg) / 2));
}

.breadcrumb__item:not(:last-child){
    flex-shrink: 0;
}

.breadcrumb__item:last-child{
    flex-grow: 1;
    margin-right: 0;
}

.breadcrumb__item:last-child::after{
    display: none;
}

.breadcrumb__link{
    color: #ffffff;
}

@media screen and (max-width: 1024px){
    .breadcrumb-list *{
        font-size: 15px;
    }
}

@media screen and (max-width: 767px){
    .breadcrumb-list *{
        font-size: 14px;
    }

    .breadcrumb__item{
        margin-right: 20px;
    }

    .breadcrumb__item:last-child .text-wrap{
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .breadcrumb__item::after {
        width: 8px;
        height: 8px;
        transform: translateX(3px) rotate(-45deg) skew(calc((90deg - 60deg) / 2), calc((90deg - 60deg) / 2));
    }
}

/* ========================
    message
=========================== */
.message__container{
    padding-bottom: 147px;
    background-color: #333333;
}

.message__inner{
    width: 90%;
    margin: auto;
}

.message__lead-wrap{
    font-size: 38px;
    color: #ffffff;
}

.message__lead{
    font-size: 1em;
    letter-spacing: 0.05em;
    line-height: 1;
    margin-top: calc((-7 / 38) * 1em) !important;
    font-weight: 400;
}

.message__sub-lead{
    font-size: max(12px, calc((16 / 38) * 1em));
    margin-top: calc((12 / 16) * 1em);
}

.message__text{
    color: #ffffff;
}

.message__text::before{
    content: "";
    display: block;
    width: 1px;
    height: calc((48 / 16) * 1em);
    background-color: #ffffff;
    margin: calc((43 / 16) * 1em) auto calc((30 / 16) * 1em);
}

@media screen and (max-width: 1024px){
    .message__lead-wrap{
        font-size: 30px;
    }
}

@media screen and (max-width: 767px){
    .message__container{
        padding-bottom: calc((147 / 767) * 100vw);
    }

    .message__lead-wrap{
        font-size: 22px;
    }

    .message__text{
        font-size: 14px;
        line-height: 1.9;
    }
}

/* ========================
    story
=========================== */
.story__content{
    margin-top: 124px;
    padding-bottom: 191px;
}

@media screen and (max-width: 767px){
    .story__content{
        margin-top: 70px;
        padding-bottom: 90px;
    }
}

/* ========================
    works
=========================== */
.works__content{
    margin-top: 124px;
    padding-bottom: 191px;
}

.works__desc-area{
    max-width: 1520.8px !important;
    margin: 111px auto 0;
    padding: 0 15px !important;
}

.works__desc-wrap{
    margin-top: 55px;
}

.works__desc-wrap:first-child{
    margin-top: 0;
}

.works__desc-title{
    font-weight: 500;
    font-size: 20px;
}

.works__desc-text{
    margin-top: calc((12 / 16) * 1em);
    padding-right: calc((25 / 1520.8) * 100%);
}

@media screen and (max-width: 1024px){
    .works__desc-title{
        font-size: 18px;
    }
}

@media screen and (max-width: 767px){
    .works__content{
        margin-top: 70px;
        padding-bottom: 90px;
    }

    .works__desc-area{
        margin-top: 60px;
    }

    .works__desc-wrap{
        margin-top: 30px;
    }

    .works__desc-title{
        font-size: 16px;
    }
}

/* ========================
    artist
=========================== */
.page-artist__body{
    padding: 99.3px 0 181px;
    background-color: #ffffff;
}

.artist-profile__group{
    width: 90%;
    max-width: 1420.4px !important;
    margin: auto;
}

.artist-profile__group-img-outer{
    max-width: calc((649.6 / 1420.4) * 100%);
}

.artist-profile__group-img-wrap{
    aspect-ratio: 649.6 / 865.6;
}

.artist-profile__group-body{
    transform: translateY(max(-50px, calc((-50 / 1600) * 100vw)));
}

.artist-profile__name{
    font-size: 38px;
    letter-spacing: 0.05em;
}

.artist-profile__role{
    font-size: calc((16 / 38) * 1em);
    margin-left: calc((13 / 16) * 1em);
    letter-spacing: 0.05em;
}

.artist-profile__text{
    font-size: 16px;
    line-height: 1.75;
    margin-top: calc((13 / 16) * 1em);
}

.artist-exhibitions__wrap{
    width: 90%;
    max-width: 1000px !important;
    margin: 103px auto 0;
}

.artist-exhibitions__img-wrap{
    aspect-ratio: 1000 / 666.4;
}

.artist-exhibitions__img-wrap img{
    transform: translateY(-25%);
}

.artist-exhibitions__body{
    margin-top: 25px;
}

.artist-exhibitions__title{
    font-weight: 500;
    font-size: 20px;
    letter-spacing: 0.05em;
}

.artist-exhibitions__table{
    margin-top: 10px;
    font-size: 16px;
}

.artist-exhibitions__table-row{
    display: flex;
    margin-top: calc((16 / 16) * 1em);
}

.artist-exhibitions__table-row:first-child{
    margin-top: 0;
}

.artist-exhibitions__table-date{
    width: calc((72 / 16) * 1em);
    flex-shrink: 0;
}

@media screen and (max-width: 1024px){
    .artist-profile__name{
        font-size: 30px;
    }

    .artist-profile__text,
    .artist-exhibitions__table{
        font-size: 15px;
    }

    .artist-exhibitions__title{
        font-size: 18px;
    }
}

@media screen and (max-width: 767px){
    .page-artist__body {
        padding: 60px 0 calc((181 / 767) * 100vw);
    }

    .artist-profile__name{
        font-size: 22px;
    }

    .artist-profile__text,
    .artist-exhibitions__table{
        font-size: 14px;
    }

    .artist-exhibitions__title{
        font-size: 16px;
    }

    .artist-profile__group{
        display: block !important;
    }

    .artist-profile__group-body{
        width: 100%;
        transform: translateY(0);
    }

    .artist-profile__group-img-outer{
        width: 90% !important;
        max-width: 649.6px;
        margin: 40px auto 0 !important;
    }

    .artist-exhibitions__wrap{
        margin: 63px auto 0;
    }

    .artist-exhibitions__table-date{
        width: 55px;
    }
}

/* ========================
    contact
=========================== */
.page-contact__body{
    padding: 120px 0 186.6px;
    background-color: #ffffff;
}

.contact-form__box{
    width: 90%;
    max-width: 1100px !important;
    margin: auto;
    background-color: #f5f5e5;
    padding: 51px calc((80 / 1100) * 100%) 110px !important;
}

.contact-form{
    max-width: 940px;
    margin: auto;
}

.contact-form .wp-block-snow-monkey-forms-item{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 28px calc((22 / 940) * 100%);
    border-bottom: 1px solid #d8d8d8;
}

.contact-form .smf-item__col--label{
    min-width: 181px;
    flex-shrink: 0;
    padding-top: calc((10 / 896) * 100%);
}

.contact-form .smf-item__label__text{
    font-size: 16px;
    line-height: 1.75;
    display: flex;
    align-items: center;
}

.contact-form .smf-item__label__text::after{
    content: "";
    display: block;
    width: calc((10 / 16) * 1em);
    height: calc((10 / 16) * 1em);
    border-radius: 50%;
    background-color: #9c9d00;
    margin-left: calc((10 / 16) * 1em);
}

.contact-form .smf-item__col--controls{
    flex-grow: 1;
    max-width: 559.5px;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea{
    width: 100%;
    font-size: 16px;
    padding: calc((15 / 16) * 1em) !important;
    border-radius: 10px !important;
    border: none !important;
}

.contact-form textarea{
    min-height: 186px;
    resize: vertical;
}

.contact-form__box .smf-action{
    display: flex;
    justify-content: center;
    margin-top: 77px;
}

.snow-monkey-form[data-screen="systemerror"] .smf-action,
.snow-monkey-form[data-screen="completeProducts."] .smf-action{
    margin-top: 0;
}

.smf-placeholder{
    word-break: break-word;
}

@media screen and (max-width: 1024px){
    .contact-form .smf-item__label__text,
    .contact-form input[type="text"],
    .contact-form input[type="email"],
    .contact-form textarea{
        font-size: 15px;
    }
}

@media screen and (max-width: 767px){
    .page-contact__body {
        padding: 60px 0 120px;
    }

    .contact-form .smf-item__label__text,
    .contact-form input[type="text"],
    .contact-form input[type="email"],
    .contact-form textarea{
        font-size: 14px;
    }

    .contact-form__box {
        padding: 30px 15px 70px !important;
    }

    .contact-form .wp-block-snow-monkey-forms-item{
        display: block;
        padding: 18px calc((22 / 940) * 100%);
    }

    .contact-form .smf-item__col--controls{
        margin-top: 10px;
    }

    .contact-form__box .smf-action{
        margin-top: 40px;
    }
}

/* ========================
    archive products
=========================== */
.archive__body{
    background-color: #ffffff;
    padding-bottom: 185px;
}

.archive-products__content{
    width: 90%;
    max-width: 1224.6px;
    margin: 124px auto 0;
}

.archive-products__group{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.archive-products__card{
    width: calc((100% - ((120 / 1224.6) * 100%)) / 2);
    max-width: 550px;
}

.archive-products__card:nth-child(even){
    margin-top: calc((90 / 1224.6) * 100%);
}

.archive-products__card-img-wrap{
    aspect-ratio: 550 / 368;
}

.archive-products__card-body{
    font-size: 38px;
    padding: calc((31 / 38) * 1em) calc((5 / 38) * 1em) 0;
}

.archive-products__card-body .products__post-title{
    letter-spacing: 0.05em;
}

.archive-products__card-body .products__post-subtitle{
    position: static;
    margin-top: calc((12 / 16) * 1em);
}

.archive-products__card-body .more-btn__wrap{
    margin-top: 12px;
}

.archive-products__card-body .more-btn{
    margin: auto;
}

.no-post-text{
    width: 100%;
    font-size: 25px;
}

@media screen and (max-width: 1024px){
    .no-post-text{
        font-size: 22px;
    }

    .archive-products__card-body{
        font-size: 30px;
    }
}

@media screen and (max-width: 767px){
    .archive__body{
        padding-bottom: 95px;
    }

    .no-post-text{
        font-size: 19px;
    }

    .archive-products__content{
        margin-top: 60px;
    }

    .archive-products__group{
        display: block;
    }

    .archive-products__card{
        width: 100%;
        margin: 40px auto 0;
    }

    .archive-products__card:nth-child(even){
        margin-top: 40px;
    }

    .archive-products__card-body{
        font-size: 22px;
    }
}

/* ========================
    single
=========================== */
.single__body{
    background-color: #ffffff;
    padding-bottom: 187px;
}

.single-article__area{
    width: 90%;
    max-width: 1000px;
    margin: auto;
}

.single-article__thumb{
    aspect-ratio: 1000 / 669;
    margin-top: 123px;
}

.section-lead__wrap + .single-article__body{
    margin-top: 70px;
}

.product__information{
    padding: 50px 0 62px;
}

.product__information > .smb-information__body{
    width: calc((955 / 1000) * 100%);
    margin: auto;
}

.product__information-row{
    margin-top: 10px;
}

.product__information-row:first-child{
    margin-top: 0;
}

.product__information-row .c-row{
    margin: 0;
    flex-wrap: nowrap;
}

.product__information-row .c-row__col{
    padding: 0;
    margin: 0;
}

.product__information-row .c-row__col:first-child{
    flex-shrink: 0;
    max-width: 47px;
}

.product__information-row .c-row__col:last-child{
    flex-grow: 1;
    margin-left: calc((23 / 955) * 100%) !important;
}

.product__information-row .smb-information__item__label{
    font-size: 13px;
    line-height: 1.3;
    letter-spacing: 0;
}

.product__information-text{
    font-size: 16px;
    line-height: 1.3;
}

.single__text-area{
    padding: 80px 0 97px;
    border-top: 1px solid #a6a6a6;
    border-bottom: 1px solid #a6a6a6;
}

.single__lead{
    font-size: 20px;
    line-height: 2;
    font-weight: 500;
    letter-spacing: 0.05em;
}

.single__text{
    margin-top: calc((7 / 16) * 1em);
}

.single__text + .single__text{
    margin-top: 20px;
}

.single__text-area .more-btn__wrap{
    margin-top: 89px;
}

.single__text-area .more-btn{
    margin: auto;
}

.products-more__container{
    padding-top: 88px;
}

.products-more__text{
    width: fit-content;
    font-weight: 500;
    font-size: 20px;
    line-height: 2;
    letter-spacing: 0.05em;
    padding-left: calc((22 / 20) * 1em);
    position: relative;
}

.products-more__text::before{
    content: "";
    display: block;
    width: calc((10 / 20) * 1em);
    height: calc((20 / 20) * 1em);
    background: url('../img/products/icon_more.svg') no-repeat;
    background-position: center;
    background-size: 100%;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(calc((7 / 20) * 1em),-50%);
}

.products-more__group{
    margin-top: 24px;
}

.products-more__img-wrap{
    margin-bottom: 0 !important;
    position: relative;
    z-index: 0;
}

.products-more__img-wrap::before{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.products-more__img-wrap .smb-items__banner__figure{
    aspect-ratio: 250 / 400;
    overflow: hidden;
}

.products-more__img-wrap .smb-items__banner__figure img{
    transform: scale(1.8);
    transition: 0.4s ease;
}

.products-more__img-wrap:hover img{
    transform: scale(2);
}

.products-more__img-wrap .smb-items__banner__action{
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.products-more__img-wrap .smb-items__banner__action a{
    display: block;
    height: 100%;
}

.products-more__img-wrap .smb-items__banner:hover .smb-items__banner__figure{
    filter: none !important;
}

@media screen and (max-width: 1024px){
    .product__information-text{
        font-size: 15px;
    }

    .single__lead,
    .products-more__text{
        font-size: 18px;
    }
}

@media screen and (max-width: 767px){
    .single__body {
        padding-bottom: 120px;
    }

    .single-article__thumb{
        margin-top: 60px;
    }

    .product__information {
        padding: 30px 0 42px;
    }

    .product__information-row .smb-information__item__label{
        font-size: 12px;
    }

    .product__information-text{
        font-size: 14px;
    }

    .single__text-area {
        padding: 40px 0 57px;
    }

    .single__lead,
    .products-more__text{
        font-size: 16px;
    }

    .products-more__container{
        padding-top: 58px;
    }

    .single__text-area .more-btn__wrap{
        margin-top: 60px;
    }    
}

/* ========================
    archive news
=========================== */
.archive-news__list{
    width: 90%;
    max-width: 1000px;
    margin: auto;
}

.archive-news__item{
    border-bottom: 1px solid #a6a6a6;
}

.archive-news__item:first-child{
    border-top: 1px solid #a6a6a6;
}

.archive-news__item-link{
    display: flex;
    padding: 15px;
}

.archive-news__item-date,
.archive-news__item-title{
    font-size: 17px;
    font-weight: 300;
}

.archive-news__item-date,
.archive-news__item-cat{
    margin-right: 15px;
    flex-shrink: 0;
}

.archive-news__item-cat{
    background-color: #9c9d00;
    color: #ffffff;
    width: calc((60 / 15) * 1em);
    text-align: center;
    padding: 0 5px;
    min-width: fit-content;
    font-size: 16px;
}

.archive-news__item-title{
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    flex-grow: 1;
}

@media screen and (max-width: 1024px){
    .archive-news__item-date,
    .archive-news__item-title{
        font-size: 16px;
    }

    .archive-news__item-cat{
        font-size: 15px;
    }
}

@media screen and (max-width: 767px){
    .archive-news__item-link{
        flex-wrap: wrap;
    }

    .archive-news__item-date,
    .archive-news__item-title{
        font-size: 15px;
    }

    .archive-news__item-cat{
        font-size: 14px;
    }

    .archive-news__item-title{
        width: 100%;
        -webkit-line-clamp: 2;
        margin-top: 5px;
    }
}