/* ------------------------------
    common
--------------------------------*/
html {
    --color-white01: #FFFFFF;
    --color-white01-06: rgba(255, 255, 255, 0.6);
    --color-white01-08: rgba(255, 255, 255, 0.8);
    --color-gray01: #EFEEEF;
    --color-gray02: #EAEAEA;
    --color-gray03: #E1E1E1;
    --color-gray04: #DCDDDD;
    --color-gray05: #D6D6D6;
    --color-black01: #727171;
    --color-black02: #44403f;
    --color-black03: #2F2725;
    --color-black04: rgba(52, 52, 52, 0.6);
    --color-black05: rgb(0, 0, 0, 0.7);
    --color-black06: #222222;
    --color-black07: rgb(0, 0, 0, 0.7);
    --color-red01: #E60012;
    --color-red02: #D51322;
    --color-red02-08: rgba(213, 19, 34, 0.8);
    --color-red03: #B2000D;
    --color-red04: #E40011;
    --color-black02-04: rgba(var(--color-black-rgb), 0.4);
    --color-black02-07: rgba(var(--color-black-rgb), 0.7);
    --color-black02-05: rgba(var(--color-black02), 0.5);
}

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

.l-header {
    z-index: 1000;
    top: 0;
}

.l-header .l-header__head:before {
    background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, var(--color-white01) 100%);
}

.l-header .mobile-btn__line {
    background-color: var(--color-black02);
}

.l-header .l-header__container.isMenuOpen .site-logo img:nth-child(1) {
    opacity: unset;
}

.l-header .navList__item .nav,
.l-header .navList__item--drawer .nav {
    color: var(--color-black02);
}

.l-header .l-header__nav .language-select:before {
    background-color: var(--color-black02);
    opacity: .3;
}

.l-header .l-header__nav .language-select__link,
.l-header .l-header__nav .language-select__slash {
    color: var(--color-black02-05);
}

.l-header .l-header__nav .language-select__link.isActive {
    color: var(--color-black02);
}

.l-header .l-header__nav .language-select__link.isActive:not(:hover) {
    opacity: 1;
}

.l-header .c-btn-contact {
    background-color: var(--color-white01);
    color: var(--color-red03);
}

.l-header .c-btn-contact__icon:before {
    background: var(--color-red03);
}

/* 採用レイアウト */
.l-header.l-recruit .l-header__head {
    justify-content: space-between;
    align-items: flex-start;
}

.l-header.l-recruit .l-header__head .l-header__nav {
    margin: 0 0 0 auto;
}

.l-header.l-recruit .mobile-btn {
    margin-left: -20px;
}

/* 採用レイアウト - ロゴ */
@media (min-width: 768px) {
    .l-header.l-recruit .l-header__head {
        align-items: center;
    }

    .l-header.l-recruit .l-header__logo {
        display: flex;
        align-items: center;
        gap: 20px;
    }

    .l-header.l-recruit .l-header__logo .group-logo {
        order: 2;
    }

    .l-header.l-recruit .l-header__logo .group-logo img {
        width: 172px;
    }

    .l-header.l-recruit .l-header__logo .site-logo {
        order: 1;
        margin-top: 0;
    }
}

.l-header.l-recruit .navList {
    gap: 0 28px;
}

/* 採用レイアウト - ENTRYボタン */
.l-header.l-recruit .drawer-container {
    position: relative;
    margin: 0 35px 0 0;
    pointer-events: auto;
}

.l-header.l-recruit .drawer-container .drawer-content {
    z-index: 1;
    overflow: hidden;
    position: absolute;
    top: 29px;
    left: 34px;
    width: 140px;
    height: 0;
    opacity: 0;
    transition: all 0.3s ease-out;
    pointer-events: auto;
}

.l-header.l-recruit .drawer-container .drawer-content .drawer__inner {
    padding: 20px 0 20px 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    background-color: var(--color-white01);
    pointer-events: auto;
}

.l-header.l-recruit .drawer-container .drawer-content .drawer-navList {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.l-header.l-recruit .drawer-container .drawer-content .drawer-navList__item {
    color: var(--color-red02);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.l-header.l-recruit .drawer-container .drawer-content .drawer-navList__item a {
    display: flex;
    position: relative;
    width: 100%;
    pointer-events: auto;
}

.l-header.l-recruit .drawer-container .drawer-content .drawer-navList__item a .c-btn-contact__icon {
    right: 10px;
    width: 10px;
    height: 10px;
}

.l-header.l-recruit .drawer-toggle .c-btn-contact {
    z-index: 2;
    position: relative;
    width: 150px;
    /* margin: 0 0 0 29px; */
    margin: 0 0 0 10px;
    background-color: var(--color-red03);
    color: var(--color-white01);
    cursor: pointer;
    transition: all .4s var(--ease-out-sine);
}

.l-header.l-recruit .drawer-toggle .c-btn-contact__txt {
    width: 92px;
    text-align: center;
    transition: all .4s var(--ease-out-sine);
}

.l-header.l-recruit .drawer-toggle .c-btn-contact .c-btn-contact__icon {
    filter: brightness(0) invert(1);
}

/* is-open */
.l-header.l-recruit .drawer-container.is-open {
    /*height: 200px;*/
}

.l-header.l-recruit .drawer-container.is-open .drawer-toggle .c-btn-contact {
    background-color: var(--color-red02);
}

.l-header.l-recruit .drawer-container.is-open .c-btn-contact__txt {
    letter-spacing: .1em;
}

.l-header.l-recruit .drawer-container.is-open .drawer-content {
    height: 140px;
    opacity: 1;
}

@media (min-width: 768px) {
    .l-header.l-recruit .drawer-container {
        margin: unset;
    }

    .l-header.l-recruit .drawer-container .drawer-content {
        top: 29px;
        left: 39px;
        width: 180px;
        height: 0;
    }

    .l-header.l-recruit .drawer-container.is-open .drawer-content {
        height: 170px;
    }

    .l-header.l-recruit .drawer-container .drawer-content .drawer__inner {
        padding: 50px 8px 30px 30px;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
    }

    .l-header.l-recruit .drawer-toggle .c-btn-contact {
        width: 200px;
    }

    .l-header.l-recruit .drawer-toggle .c-btn-contact__txt {
        width: unset;
    }

    .l-header.l-recruit .drawer-container .drawer-content .drawer-navList {
        gap: 10px;
    }
    .l-header.l-recruit .drawer-container .drawer-content .drawer-navList__item {
        letter-spacing: 0.06em;
    }

    .l-header.l-recruit .drawer-container .drawer-content .drawer-navList__item a .c-btn-contact__icon {
        right: 15px;
        width: 20px;
        height: 20px;
    }
}

@media (hover: hover) and (pointer: fine) {
    .l-header.l-recruit .drawer-container .drawer-content .drawer-navList__item a:hover .c-btn-contact__icon {
        -webkit-mask-position: 0% 150%;
        mask-position: 0% 150%
    }
}

/* footer */
.l-footer {
    margin: 0;
}

.breadcrumb {
    padding-block: 70px 8px;
}

@media (min-width: 768px) {
    .breadcrumb {
        padding-block: 172px 20px;
    }
}

.breadcrumb .breadcrumbLists {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px 0;
}

.breadcrumb .breadcrumbList {
    font-size: 10px;
    line-height: 1.5;
    letter-spacing: 0;
}

@media (min-width: 768px) {
    .breadcrumb .breadcrumbList {
        font-size: 14px;
        line-height: 2;
        letter-spacing: .06em;
    }
}

.breadcrumb .breadcrumbList .link {
    text-decoration: underline;
    text-underline-offset: .2em;
}

.breadcrumb .breadcrumbList:not(:first-child)::before {
    content: ">";
    margin: 0 5px;
    color: var(--color-black01);
}

@media (min-width: 768px) {
    .breadcrumb .breadcrumbList:not(:first-child)::before {
        margin: 0 8px;
    }
}

.breadcrumb .breadcrumbList .txt {
    color: var(--color-black01);
}


/* 共通設定 */
.u-text-center {
    text-align: center;
}

.pcObj {
    display: none !important;
}

.spObj {
    display: block !important;
}

@media (min-width: 768px) {
    .pcObj {
        display: block !important;
    }

    .spObj {
        display: none !important;
    }
}

/* ------------------------------
    Sub Heading Section (.c-subhdg-section)
--------------------------------*/
.c-subhdg-section {
    display: flex;
    justify-content: center;
}

.c-subhdg-section .c-hdg-section__inner {
    align-items: center;
}

.c-subhdg-section .c-hdg-section__inner::after {
    content: "";
    display: block;
    width: 1px;
    height: 30px;
    margin-top: 17px;
    background-color: var(--color-black02);
}

@media screen and (min-width: 768px) {
    .c-subhdg-section .c-hdg-section__inner::after {
        height: 80px;
        margin-top: 19px;
    }
}

.c-subhdg-section .c-hdg-section__sub {
    font-size: 12px;
}

.c-subhdg-section .c-hdg-section__main {
    display: flex;
    font-size: 35px;
    font-weight: 500;
}

@media screen and (min-width: 768px) {
    .c-subhdg-section .c-hdg-section__sub {
        font-size: 20px;
        letter-spacing: 0.172em;
    }

    .c-subhdg-section .c-hdg-section__main {
        margin-top: 7px;
        font-size: 60px;
    }
}

.c-lead-section {
    margin-top: 44px;
    color: var(--color-black02);
    font-size: 18px;
    font-family: var(--font-serif);
    letter-spacing: 0.12em;
}

@media screen and (min-width: 768px) {
    .c-lead-section {
        margin-top: 30px;
        font-size: 32px;
        letter-spacing: 0.235em;
    }
}

@media (min-width: 768px) {
    .c-hdg-section--highlighted .c-hdg-section__sub {
        font-size: 20px;
        line-height: 1.25;
    }
}

/* ボタン拡張 */
/* PC 360x70 / SP 240x45 */
.c-btn-primary:not(.c-txt-uppercase):not(:hover) {
    letter-spacing: 0;
}

.c-btn-primary:not(.c-txt-uppercase):hover {
    letter-spacing: .09em;
}

/* PC 360x70 / SP 240x55 */
.c-btn-primary.size-m {
    width: 240px;
    height: 55px;
    font-size: 12px;
}

@media (min-width: 768px) {
    .c-btn-primary.size-m {
        width: 360px;
        height: 70px;
        font-size: 15px;
    }
}

/* PC 200x50 / SP 240x55 */
.c-btn-primary.size-s {
    width: 240px;
    height: 55px;
    font-size: 12px;
}

@media (min-width: 768px) {
    .c-btn-primary.size-s {
        width: 200px;
        height: 50px;
        font-size: 14px;
    }
}

/* icon */
.c-btn-primary[class*="ic-"] {
    position: relative;
}

.c-btn-primary[class*="ic-"]::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: 16.75px;
    transform: translateY(-50%);
    transition: background .2s var(--ease-out-sine);
}

@media (min-width: 768px) {
    .c-btn-primary[class*="ic-"]::after {
        right: 23.57px;
    }
}

.c-btn-primary[class*="ic-"]:hover::after {
    background: var(--color-white01);
}

.c-btn-primary.ic-rightarrow::after {
    width: 4.5px;
    height: 8px;
    background: var(--color-black02);
    mask: url(/wp-content/themes/mecdesign/assets/images/pages/icons/icon_arw-btn.svg) no-repeat center / contain;
}

@media (min-width: 768px) {
    .c-btn-primary.ic-rightarrow::after {
        width: 8.56px;
        height: 15.71px;
    }
}

.c-btn-primary.ic-downarrow::after {
    width: 4.5px;
    height: 8px;
    background: var(--color-black02);
    mask: url(/wp-content/themes/mecdesign/assets/images/pages/icons/icon_arw-btn.svg) no-repeat center / contain;
    transform: rotate(90deg) translateX(-56%);
}

@media (min-width: 768px) {
    .c-btn-primary.ic-downarrow::after {
        width: 8.56px;
        height: 15.71px;
    }
}

/* close button */
.c-btn-close,
.c-btn-close--theme-black {
    display: inline-flex;
    gap: 0 10px;
    align-items: center
}

.c-btn-close__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24.5px;
    height: 24.5px;
    background: rgba(var(--color-red-rgb), .8);
    border-radius: 50%
}

@media (min-width: 768px) {
    .c-btn-close__icon {
        width: 30px;
        height: 30px;
        background: var(--color-red02);
    }
}

.c-btn-close__icon:before {
    display: block;
    width: 10px;
    height: 10px;
    content: "";
    background-image: url(/wp-content/themes/mecdesign/assets/images/pages/icons/icon_btn-close.svg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

@media (min-width: 768px) {
    .c-btn-close__icon:before {
        width: 10px;
        height: 10px;
        transition: transform .4s var(--ease-out-sine)
    }
}

.c-btn-close__txt {
    font-family: var(--font-en);
    font-size: 13px;
    color: var(--color-white01);
    letter-spacing: .06em
}

@media (min-width: 768px) {
    .c-btn-close__txt {
        position: relative;
        font-size: 15px
    }
}

@media (min-width: 768px) {
    .c-btn-close__txt:before {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0;
        height: 1px;
        content: "";
        background: var(--color-red02);
        transition: width .4s var(--ease-out-sine)
    }
}

.c-btn-close--theme-black .c-btn-close__txt {
    color: var(--color-black02)
}

@media (hover: hover) and (pointer: fine) {

    .c-btn-close:hover .c-btn-close__txt:before,
    .c-btn-close--theme-black:hover .c-btn-close__txt:before {
        width: 100%
    }
}

/* 3カラム */
.l-3column {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 35px;
}

.l-3column .card {
    overflow: hidden;
    width: 100%;
    opacity: 0;
}

.l-3column .card.is-active {
    opacity: 1;
    transition: opacity .4s var(--ease-out-sine) .1s;
}

.l-3column .card.is-active:nth-child(2) {
    transition: opacity .4s var(--ease-out-sine) .2s;
}

.l-3column .card.is-active:nth-child(3) {
    transition: opacity .4s var(--ease-out-sine) .3s;
}

.l-3column .card a {
    position: relative;
    display: flex;
}

.l-3column .card .card__bg {
    z-index: 1;
    position: relative
}

@media (min-width: 768px) {
    .l-3column .card .card__bg {
        overflow: hidden;
        backface-visibility: hidden;
        width: 100%;
        height: 100%;
    }
}

.l-3column .card .card__ttl {
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    color: var(--color-white01);
}

.l-3column .card .card__ttl .jp {
    font-size: 12px;
    letter-spacing: 0.1em;
}

.l-3column .card .card__ttl .en {
    font-size: 30px;
    font-family: var(--font-en);
    letter-spacing: 0.002em;
}

.l-3column .card .card__bg img {
    transition: transform .4s var(--ease-out-sine), filter .4s var(--ease-out-sine);
}

.l-3column .card p.c-btn-more {
    z-index: 3;
    position: absolute;
    right: 12px;
    bottom: 12px;
}

.l-3column .card p.c-btn-more .c-btn-more__icon {
    width: 17px;
    height: 17px;
}

.l-3column .card p.c-btn-more .c-btn-more__icon:before {
    width: 4.535px;
    height: 4.535px;
}

.l-3column .card p.c-btn-more .c-btn-more__txt {
    font-size: 12px;
    letter-spacing: .005em;
}

@media screen and (min-width: 768px) {
    .l-3column {
        flex-direction: row;
        margin-top: 84px;
    }

    .l-3column .card {
        width: calc((100% - 20px) / 3);
    }

    .l-3column .card a {
        position: relative;
    }

    .l-3column .card .card__ttl .jp {
        font-size: 14px;
    }

    .l-3column .card .card__ttl .en {
        font-size: 40px;
    }

    .l-3column .card p.c-btn-more {
        right: 20px;
        bottom: 9px;
    }

    .l-3column .card p.c-btn-more .c-btn-more__icon {
        width: 30px;
        height: 30px;
        background: var(--color-red)
    }

    .l-3column .card p.c-btn-more .c-btn-more__icon:before {
        width: 8px;
        height: 8px;
        background: #fff;
        transition: transform .4s var(--ease-out-sine)
    }

    .l-3column .card p.c-btn-more .c-btn-more__txt {
        font-size: 15px;
    }
}

@media (hover: hover) and (pointer: fine) {
    .l-3column .card:hover .card__bg img {
        transform: scale(1.15);
        filter: brightness(120%);
    }

    .l-3column .card:hover .card__contents {
        visibility: visible;
        opacity: 1;
    }

    .l-3column .card:hover .c-btn-more__txt:before {
        width: 100%
    }
}

/* 2カラム */
.l-2column {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 50px;
    margin-top: 30px;
}

.l-2column .card .card__img {
    overflow: hidden;
    aspect-ratio: 340 / 218;
}

.l-2column .card .card__img img {
    transform: scale(1);
    transition: transform .6s var(--ease-out-sine), filter .6s var(--ease-out-sine);
}

.l-2column .card .card__ttl {
    margin-top: 12px;
    margin-bottom: 9px;
    font-size: 20px;
    font-family: var(--font-serif);
    letter-spacing: 0.115em;
}

.l-2column .card p.card__name,
.l-2column .card p.card__year {
    display: inline-block;
    font-size: 12px;
    letter-spacing: 0.06em;
}

.l-2column .card p.card__name {
	font-family: var(--font-serif);
}

.l-2column .card p.card__year {
    margin-left: 0.5em;
}

.l-2column .card .card__tags {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

.l-2column .card p.card__tags .job,
.l-2column .card p.card__tags .category {
    font-size: 9px;
    letter-spacing: 0.01em;
}

.l-2column .card p.card__tags .job {
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    height: fit-content;
    padding: 3px 8px;
    border: 1px solid var(--color-gray03);
    background-color: var(--color-gray03);
    color: var(--color-black002-07);
}

.l-2column .card p.card__tags .category {
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    height: fit-content;
    padding: 3px 6px;
    box-sizing: border-box;
    border: 1px solid var(--color-red02);
    color: var(--color-red02);
}

@media (min-width: 768px) {
    .l-2column {
        grid-template-columns: 1fr 1fr;
        gap: 60px 30px;
        margin-top: 40px;
    }

    .l-2column .card .card__img {
        aspect-ratio: 625 / 360;
    }

    .l-2column .card .card__ttl {
        margin-top: 24px;
        margin-bottom: 18px;
        font-size: 24px;
        letter-spacing: 0.12em;
    }

    .l-2column .card p.card__name,
    .l-2column .card p.card__year {
        display: block;
        margin-left: 0;
        font-size: 14px;
        letter-spacing: initial;
    }

    .l-2column .card p.card__year {
        margin-top: 6px;
    }

    .l-2column .card .card__tags {
        gap: 20px;
        margin-top: 22px;
    }

    .l-2column .card p.card__tags .job,
    .l-2column .card p.card__tags .category {
        font-size: 14px;
        letter-spacing: initial;
    }

    .l-2column .card p.card__tags .job {
        padding: 4px 8px;
    }

    .l-2column .card p.card__tags .category {
        padding: 4px 9px;
    }
}

@media (hover: hover) and (pointer: fine) {
    .l-2column .card:hover .card__img img {
        transform: scale(1.15);
        filter: brightness(110%);
    }

    .l-2column .card:hover .card__contents {
        visibility: visible;
        opacity: 1;
    }
}