@charset "utf-8";

/* Common CSS */

:root {
    --header-height: 0px;
    --ja-font: "Times New Roman", "A-OTF Ryumin Pr6N", "Hiragino Mincho ProN", "Yu Mincho", serif;
    --en-font: "Times New Roman", Times, serif;
    --ja-font-large: clamp(24px, calc((32 - 24) * ((100vw - 768px) / (1500 - 768)) + 24px), 32px);
    --ja-font-medium: clamp(18px, calc((24 - 18) * ((100vw - 768px) / (1500 - 768)) + 18px), 24px);
    --ja-font-small: clamp(16px, calc((22 - 16) * ((100vw - 768px) / (1500 - 768)) + 16px), 22px);
    --en-font-large: clamp(2.375rem, 1.719rem + 1.37vw, 3rem);
    --en-font-medium: clamp(1.125rem, 0.6rem + 1.09vw, 1.625rem);
    --en-font-small: clamp(0.75rem, 0.619rem + 0.27vw, 0.875rem);
}

html,
body {
    font-family: var(--ja-font);
    font-size: 16px;
    background-color: #fff;
}

button {
    font-family: var(--ja-font);
    color: currentColor;
}

a {
    transition: all 0.3s ease;
}

.l-wrapper {
    padding-left: 40px;
    padding-right: 40px;
}

.pc-only {
    display: block !important;
}

.sp-only {
    display: none !important;
}

.pc-only-flex {
    display: flex !important;
}

.sp-only-flex {
    display: none !important;
}

@media screen and (max-width: 768px) {
    .l-wrapper {
        padding-left: 20px;
        padding-right: 20px;
    }
    .pc-only {
        display: none !important;
    }
    .sp-only {
        display: block !important;
    }
    .pc-only-flex {
        display: none !important;
    }
    .sp-only-flex {
        display: flex !important;
    }
}

body {
    color: #333;
    background-color: #fff;
    font-feature-settings: "palt";
    -webkit-font-feature-settings: "palt";
    scroll-behavior: smooth;
    &.active {
        overflow: hidden !important;
    }
}

body.home main,
body.page-template-page-contact main,
body.privacy-policy main,
body.post-type-archive-news main,
body.page-id-1781 main,
body.single-news main {
    background: url("../img/backtexture.jpg") repeat top center / contain;
}

picture {
    display: block;
}

.img-cover-wrapper {
    overflow: hidden;
}

.img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s 0s cubic-bezier(0.44, 0.14, 0.09, 1.02);
}


/* header */

header.tmHeader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    padding: 40px;
    z-index: 9999;
    background: rgba(255, 255, 255, 0);
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1), transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0s;
}

header.tmHeader.tmHeader--hidden {
    opacity: 0;
    transform: translate3d(0, -10px, 0);
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1), transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.45s;
}

.tmHeader__inner {
    width: 100%;
    height: auto;
    display: flex;
    align-items: start;
    justify-content: space-between;
}

.tmHeader__logoImg {
    display: block;
    width: 320px;
    height: auto;
}

.tmHeader__nav {
    display: flex;
    align-items: center;
    gap: 22px;
    font-family: "Times New Roman", Times, serif;
    font-size: clamp(14px, 0.833vw + 12px, 22px);
    line-height: 1.4;
    color: #333;
}

.tmHeader__lang {
    color: #333;
    text-decoration: none;
}

.tmHeader__lang--active {
    color: #007448;
}

.tmHeader__menuBtn {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.tmMenu {
    position: fixed;
    top: 20px;
    right: 20px;
    left: auto;
    bottom: auto;
    width: min(calc(100vw - 40px), 860px);
    height: auto;
    max-height: 760px;
    z-index: 10050;
    background: #007448;
    color: #fff;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(56px, 0, 0);
    transition: opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1), transform 0.52s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.52s;
}

body.is-menuOpen .tmMenu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
    transition: opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1), transform 0.52s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0s;
}

.tmMenu__frame {
    position: absolute;
    inset: 20px;
    pointer-events: none;
}

.tmMenu__corner {
    position: absolute;
    width: 12px;
    height: 12px;
    border-color: rgba(255, 255, 255, 0.66);
    border-style: solid;
    border-width: 0;
}

.tmMenu__corner--tl {
    top: 0;
    left: 0;
    border-top-width: 1px;
    border-left-width: 1px;
}

.tmMenu__corner--tr {
    top: 0;
    right: 0;
    border-top-width: 1px;
    border-right-width: 1px;
}

.tmMenu__corner--bl {
    bottom: 0;
    left: 0;
    border-bottom-width: 1px;
    border-left-width: 1px;
}

.tmMenu__corner--br {
    bottom: 0;
    right: 0;
    border-bottom-width: 1px;
    border-right-width: 1px;
}

.tmMenu__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0 auto;
    padding: 60px;
    display: grid;
    grid-template-columns: 390px 1fr;
    grid-template-rows: auto 1fr;
    column-gap: 0px;
    row-gap: 60px;
}

.tmMenu__logo {
    margin-top: 20px;
    width: 274px;
    grid-column: 1;
    grid-row: 1;
}

.tmMenu__logoImg {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.tmMenu__close {
    justify-self: end;
    align-self: start;
    grid-column: 2;
    grid-row: 1;
    appearance: none;
    border: 0;
    color: #fff;
    background-color: transparent;
    font-size: 1.25rem;
    line-height: 1;
    letter-spacing: 0.01em;
    cursor: pointer;
}

.tmMenu__content {
    grid-column: 1 / 3;
    grid-row: 2;
    display: grid;
    grid-template-columns: 390px 1fr;
    align-items: end;
    gap: 60px 50px;
}

.tmMenu__featured {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tmMenuCard {
    width: 100%;
    display: grid;
    grid-template-columns: 104px 1fr;
    gap: 12px;
    align-items: center;
    color: #fff;
    text-decoration: none;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.78);
}

.tmMenuCard__thumb {
    width: 100%;
    object-fit: cover;
    aspect-ratio: 4/3;
}

.tmMenuCard__text {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tmMenuCard__eyebrow {
    font-size: 13px;
    line-height: 1.2;
}

.tmMenuCard__title {
    font-size: 16px;
    line-height: 1.45;
}

.tmMenuBanner {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 300 / 66;
    overflow: hidden;
    color: #fff;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url("../img/news-list/cta-online-shop.png") no-repeat center center / cover;
}

.tmMenuBanner::before {
    content: "";
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(9, 38, 31, 0.34);
}

.tmMenuBanner__label {
    z-index: 1;
    font-size: 1.25rem;
    line-height: 1;
}

.tmMenuNav {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.tmMenuNav__link {
    display: block;
    padding: 12px 0 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.78);
    color: #fff;
    font-size: 1.25rem;
    line-height: 1.2;
}

@media screen and (max-width: 768px) {
    header.tmHeader {
        padding: 20px;
        overflow: hidden;
    }
    .tmHeader__inner {
        padding: 0;
    }
    .tmHeader__logoImg {
        width: 140px;
    }
    .tmHeader__nav {
        gap: 10px;
    }
    .tmMenu {
        top: 10px;
        right: 10px;
        max-width: 340px;
        width: calc(100% - 20px);
        max-height: calc(100vh - 20px);
        height: 540px;
        padding: 15px;
    }
    .tmMenu__frame {
        inset: 14px;
    }
    .tmMenu__inner {
        padding: 15px;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto 1fr;
        row-gap: 10px;
    }
    .tmMenu__logo {
        width: 170px;
        margin-top: 0;
        grid-column: 1;
        grid-row: 1;
    }
    .tmMenu__close {
        grid-column: 1;
        grid-row: 1;
        font-size: 18px;
        padding: 0;
    }
    .tmMenu__content {
        grid-column: 1;
        grid-row: 3;
        grid-template-columns: 1fr;
        row-gap: 0;
    }
    .tmMenuCard {
        min-height: 94px;
        grid-template-columns: 94px 1fr;
        gap: 10px;
    }
    .tmMenuCard__thumb {
        width: 94px;
        height: 94px;
    }
    .tmMenuCard__eyebrow {
        font-size: 12px;
    }
    .tmMenuCard__title {
        font-size: 18px;
    }
    .tmMenuBanner {
        aspect-ratio: 300 / 100;
    }
    .tmMenuBanner__label {
        font-size: 20px;
    }
    .tmMenuNav__link {
        padding: 14px 0 13px;
        font-size: 20px;
    }
    .tmMenuNav__link:nth-last-child(1) {
        border-bottom: 0;
    }
}


/* footer */


/* Footer */

footer.tmFooter {
    width: 100%;
    height: 100vh;
    position: relative;
    color: #fff;
    padding: 70px 40px 40px 40px;
    overflow: hidden;
    background: url(../img/news-list/footer-bg.png) no-repeat center center / cover;
}

.tmFooter__inner {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.tmFooterJournal {
    position: absolute;
    top: 40px;
    right: 40px;
    max-width: 520px;
    width: 40%;
    height: auto;
    background-color: #007448;
    padding: 20px 18px;
}

.tmFooterJournal__content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tmFooterJournal::before,
.tmFooterJournal::after,
.tmFooterJournal__content::before,
.tmFooterJournal__content::after {
    z-index: 2;
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    pointer-events: none;
}

.tmFooterJournal::before {
    top: 10px;
    left: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.65);
    border-left: 1px solid rgba(255, 255, 255, 0.65);
}

.tmFooterJournal::after {
    top: 10px;
    right: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.65);
    border-right: 1px solid rgba(255, 255, 255, 0.65);
}

.tmFooterJournal__content::before {
    bottom: 10px;
    left: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.65);
    border-left: 1px solid rgba(255, 255, 255, 0.65);
}

.tmFooterJournal__content::after {
    bottom: 10px;
    right: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.65);
    border-right: 1px solid rgba(255, 255, 255, 0.65);
}

.tmFooterJournal__thumb {
    width: 40%;
    height: auto;
    aspect-ratio: 2/1.4;
    object-fit: cover;
}

.tmFooterJournal__link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.tmFooterJournal__text {
    width: 55%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tmFooterJournal__eyebrow {
    color: #FFF;
    font-family: "A-OTF Ryumin Pr6N";
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 300;
    line-height: 100%;
}

.tmFooterJournal__title {
    color: #FFF;
    font-family: "A-OTF Ryumin Pr6N";
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 300;
    line-height: 210%;
    /* 2.3625rem */
}

.tmFooterBrand {
    max-width: 320px;
    width: 70%;
    height: auto;
}

.tmFooterBrand__logo {
    width: 100%;
    height: auto;
}

.tmFooterBottom {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 40px;
}

.tmFooter__nav {
    display: flex;
    gap: 25px;
    font-size: clamp(14px, 0.833vw + 12px, 16px);
    flex-wrap: wrap;
}

.tmFooter__navLink {
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
}

.tmFooter__meta {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: clamp(14px, 0.833vw + 12px, 16px);
}

.tmFooter__privacy {
    color: #fff;
    text-decoration: none;
}

.tmFooter__igIcon {
    width: 24px;
    height: 24px;
    display: block;
}

@media screen and (max-width: 1024px) {
    .tmFooterJournal {
        max-width: 300px;
    }
    .tmFooterJournal__content {
        flex-direction: column;
        gap: 20px;
    }
    .tmFooterJournal__thumb {
        width: 100%;
    }
    .tmFooterJournal__text {
        width: 100%;
    }
}

@media screen and (max-width: 768px) {
    footer.tmFooter {
        z-index: 6;
        height: 100vh;
        padding: 40px 20px 20px;
        overflow: visible;
        background: url(../img/news-list/footer-bg.png) no-repeat 22% center / cover;
    }
    .tmFooter__inner {
        justify-content: start;
        gap: 40px;
    }
    .tmFooterJournal {
        max-width: 300px;
        width: 80%;
        right: auto;
        top: auto;
        padding: 20px;
        top: 0;
        right: 10px;
        transform: translateY(-50%);
    }
    .tmFooterJournal__content {
        flex-direction: row;
        align-items: stretch;
        padding: 0;
        gap: 12px;
    }
    .tmFooterJournal__thumb {
        width: 40%;
        aspect-ratio: unset;
    }
    .tmFooterJournal__text {
        width: 58%;
    }
    .tmFooterJournal__eyebrow {
        font-size: 10px;
    }
    .tmFooterJournal__title {
        font-size: 16px;
        line-height: 1.6;
    }
    .tmFooterBrand {
        order: 1;
    }
    .tmFooterBottom {
        flex-direction: column;
        align-items: start;
        gap: 30px;
        margin-top: auto;
        order: 3;
    }
    .tmFooter__nav {
        flex-direction: column;
        gap: 20px;
        flex-wrap: wrap;
        right: auto;
    }
    .tmFooter__meta {
        width: 100%;
        justify-content: space-between;
        font-size: 13px;
    }
}


/* cta-parts */

.tmNl__cta {
    padding-top: 70px;
    padding-bottom: 70px;
    max-width: 1500px;
    width: 100%;
    height: auto;
    margin: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.tmNlCta {
    position: relative;
    display: block;
    width: 49%;
    height: auto;
    aspect-ratio: 7 / 3.5;
    overflow: hidden;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.tmNlCta__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tmNlCta__overlay {
    background: rgba(0, 0, 0, 0.3);
    position: absolute;
    inset: 0;
}

.tmNlCta__label {
    z-index: 10;
    color: #FFF;
    font-family: "Times New Roman";
    font-size: 1.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

@media screen and (max-width: 768px) {
    .tmNl__cta {
        padding-top: 30px;
        padding-bottom: 30px;
        flex-direction: column;
        gap: 25px;
    }
    .tmNlCta {
        width: 100%;
        aspect-ratio: 7 / 3.5;
    }
    .tmNlCta__label {
        font-size: 18px;
    }
}