/*
Theme Name: EBIM RECRUIT theme
Theme URI: 
Author: DAVINCI inc.
Author URI: https://davinciinc.co.jp
Version: 1.0
*/

/* --------------------------------------------------
 common
--------------------------------------------------- */

@charset "UTF-8";


/* reset
--------------------------------------------------- */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}:where([hidden]:not([hidden='until-found'])){display:none!important}:where(html){-webkit-text-size-adjust:none;color-scheme:dark light}@media (prefers-reduced-motion:no-preference){:where(html:focus-within){scroll-behavior:smooth}}:where(body){line-height:1.5;font-family:system-ui,sans-serif;-webkit-font-smoothing:antialiased}:where(input,button,textarea,select){font:inherit;color:inherit}:where(textarea){resize:vertical;resize:block}:where(button,label,select,summary,[role='button'],[role='option']){cursor:pointer}:where(:disabled){cursor:not-allowed}:where(label:has(>input:disabled),label:has(+input:disabled)){cursor:not-allowed}:where(button){border-style:solid}:where(a){color:inherit;text-underline-offset:.2ex}:where(ul,ol){list-style:none}:where(img,svg,video,canvas,audio,iframe,embed,object){display:block}:where(img,picture,svg){max-inline-size:100%;block-size:auto}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(h1,h2,h3){line-height:calc(1em + 0.5rem)}:where(hr){border:none;border-block-start:1px solid;color:inherit;block-size:0;overflow:visible}:where(:focus-visible){outline:3px solid Highlight;outline-offset:2px;scroll-margin-block:10vh}:where(.visually-hidden:not(:focus-within,:active)){clip-path:inset(50%)!important;height:1px!important;width:1px!important;overflow:hidden!important;position:absolute!important;white-space:nowrap!important;border:0!important}

/* input, textarea などの focus や outline 無効化 */
:where(input, textarea, select):focus,
:where(input, textarea, select):focus-visible,
:where(input, textarea, select):focus-within {
    outline: none !important;
    box-shadow: none !important;
    border-color: inherit !important;
}

/* iOSでのタップズーム対策：font-size 16px未満でズームされるのを防ぐ */
:where(input, textarea, select, button) {
    font-size: 16px !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
}

/* root setting
--------------------------------------------------- */

:root {
    --color-wht: #ffffff;
    --color-blk: #262626;
    --color-crm: #f6f2eb;
    --color-beg: #ede8df;
    --color-gld: #b5904f;
    --color-lgd: #ad9f87;
    --color-khk: #8a8278;
    --color-dbe: #ddd8ce;
    --color-dgy: #303030;
    
    --font-jp-01: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
    --font-jp-02: 'Hiragino Mincho ProN','Noto Serif JP', serif;
    --font-en-01: 'Montserrat', sans-serif;
    --font-en-02: 'Cormorant Garamond', serif;
}

/* layout
--------------------------------------------------- */

html {
    height: 100%;
    font-size: 100%;
    scroll-behavior: smooth;
    background-color: var(--color-crm)!important;
    scroll-padding-top: 64px;
}
body {
    height: 100%;
    font-family: var(--font-jp-01);
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: .05em;
    line-height: 1.8;
    color: var(--color-blk);
    background-color: var(--color-crm)!important;
    overflow-y: scroll;
}
@media screen and (min-width: 768px) {
    body {
        font-size: 0.95rem;
        line-height: 2;
    }
}

img {
    display: block;
    max-width: 100%;
}

/* --------------------------------------------------
 header
--------------------------------------------------- */

.header {
    z-index: 900;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 64px;
    background: rgba(246,242,235,.96);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--color-dbe);
}
.header__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    padding: 0 20px;
}
.header__inner .logo a {
    text-transform: uppercase;
    text-decoration: none;
}
.header__inner .logo a .logo__type {
    font-family: var(--font-en-02);
    font-size: 1.2rem;
    color: var(--color-blk);
}
.header__inner .nav {
    display: none;
}
.header__inner .cta {
    display: none;
}
@media screen and (min-width: 1024px) {
    .header__inner .nav {
        display: block;
        height: 100%;
    }
    .header__inner .nav .nav-links {
        display: flex;
        align-items: center;
        gap: 1em;
        height: 100%;
        margin-right: auto;
        list-style: none;
    }
    .header__inner .nav .nav-links a {
        font-family: var(--font-jp-01);
        font-size: 0.85rem;
        color: var(--color-blk);
        text-decoration: none;
        transition: color .25s;
    }
    .header__inner .nav .nav-links a:hover {
        color: var(--color-gld);
    }
    .header__inner .cta {
        display: block;
        font-family: var(--font-en-01);
        background: var(--color-blk);
        color: var(--color-crm);
        border: none;
        padding: 8px 15px;
        font-size: 0.85rem;
        cursor: pointer;
        transition: background .25s;
    }
    .header__inner .cta:hover {
        background: var(--color-gld);
    }
}
@media screen and (min-width: 1280px) {
    .header__inner .nav .nav-links {
        gap: 2rem;
    }
    .header__inner .nav .nav-links a {
        font-size: 0.9rem;
    }
    .header__inner .cta {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
}

.header__inner .hamburger {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-left: auto;
    padding: 4px;
    cursor: pointer;
    background: none;
    border: none;
}
@media screen and (min-width: 1024px) {
    .header__inner .hamburger {
        display: none;
    }
}
.header__inner .hamburger span {
    display: block;
    width: 24px;
    height: 1px;
    background: var(--color-blk);
    transition: all .3s;
}

.mobile-menu {
    z-index: 890;
    display: none;
    flex-direction: column;
    gap: 25px;
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 40px 20px;
    background: var(--color-crm);
    overflow-y: auto;
}
@media screen and (min-width: 768px) {
    .mobile-menu {
        padding: 60px;
    }
}
@media screen and (min-width: 1024px) {
    .mobile-menu {
        display: none;
    }
}
.mobile-menu.open {
    display: flex;
}
.mobile-menu a {
    font-family: var(--font-en-02);
    font-size: 1.3rem;
    letter-spacing: .05em;
    color: var(--color-blk);
    text-decoration: none;
    border-bottom: 1px solid var(--color-dbe);
}
.mobile-menu-cta {
    margin-top: 24px;
    padding: 18px;
    font-family: var(--font-en-01);
    background: var(--color-blk);
    color: var(--color-crm);
    border: none;
    cursor: pointer;
    text-align: center;
}

/* --------------------------------------------------
 MV
--------------------------------------------------- */

.mv {
    width: 100%;
}
.mv__inner {
    display: flex;
    flex-direction: column-reverse;
    width: 100%;
    height: 100%;
}
.mv-right {
    width: 100%;
    height: 500px;
}
.mv-right .visual {
    width: 100%;
    height: 100%;
}
.mv-right .visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mv-left {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    padding: 40px 20px;
}
.mv-left .mv-eyebrow {
    font-family: var(--font-en-01);
    font-size: 0.65rem;
    color: var(--color-gld);
    text-transform: uppercase;
}

.mv-left .mv-title {
    font-family: var(--font-jp-02);
    font-size: 2.4rem;
    letter-spacing: .05em;
    line-height: 1.5;
}
.mv-left .mv-title span {
    color: var(--color-gld);
}

.mv-left .mv-btns {
    display: flex;
    gap: 15px;
}
.mv-left .mv-btns button {
    padding: 8px 15px;
    font-size: 0.8rem!important;
    line-height: 1;
    outline: 0;
    border: 1px solid var(--color-blk);
    background: none;
    transition: .3s;
}
.mv-left .mv-btns button:hover {
    background: var(--color-blk);
    color: var(--color-wht);
}
@media screen and (min-width: 768px) {
    .mv {
        height: auto;
        max-height: 100svh;
    }
    .mv__inner {
        flex-direction: row;
    }
    .mv-left {
        width: 55%;
        padding: 100px 40px;
    }
    .mv-left .mv-title {
        font-size: 2.7rem;
        letter-spacing: .1em;
    }
    .mv-right {
        width: 45%;
        height: auto;
        max-height: 100%;
    }
}
@media screen and (min-width: 1024px) {
    .mv-left {
        gap: 30px;
        width: 500px;
        padding: 120px 60px;
    }
    .mv-left .mv-title {
        font-size: 3rem;
    }
    .mv-left .mv-sub {
        font-size: 0.85rem;
    }
    .mv-left .mv-btns button {
        padding: 10px 18px;
        font-size: 0.95rem!important;
    }
    .mv-right {
        width: calc(100% - 500px);
    }
}
@media screen and (min-width: 1280px) {
    .mv-left {
        gap: 30px;
        width: 620px;
        padding: 160px 100px;
    }
    .mv-left .mv-title {
        font-size: 3.3rem;
    }
    .mv-left .mv-sub {
        font-size: 0.9rem;
    }
    .mv-left .mv-btns button {
        font-size: 1rem!important;
    }
    .mv-right {
        width: calc(100% - 620px);
    }
}
@media screen and (min-width: 1601px) {
    .mv-left {
        gap: 40px;
        width: 46vw;
        padding: 180px 120px 180px max(120px, calc((100vw - 1500px) / 2));
    }
    .mv-left .mv-title {
        font-size: 3.6rem;
    }
    .mv-left .mv-sub {
        font-size: 0.9rem;
    }
    .mv-left .mv-btns button {
        padding: 10px 25px;
    }
    .mv-right {
        width: 54vw;
    }
}

/* --------------------------------------------------
 SECTION COMMON
--------------------------------------------------- */

.sec {
    width: 100%;
}
.sec__inner {
    padding: 40px 20px;
}
@media screen and (min-width: 768px) {
    .sec__inner {
        padding: 60px 40px;
    }
}
@media screen and (min-width: 1024px) {
    .sec__inner {
        padding: 80px 60px;
    }
}
@media screen and (min-width: 1280px) {
    .sec__inner {
        max-width: 1600px;
        margin: auto;
        padding: 90px 100px;
    }
}
.sec-alt {
    background: var(--color-beg);
}
.sec-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 25px;
    padding: 0 0 15px;
}
.sec-alt .sec-head {
    margin-bottom: 30px;
    border-bottom: 1px solid var(--color-dbe);
}
.career .sec-head {
    border-bottom: 1px solid var(--color-dbe);
}
@media screen and (min-width: 768px) {
    .sec-head {
        padding-bottom: 30px;
    }
    .sec-alt .sec-head {
        margin-bottom: 50px;
    }
}

.sec-head .label {
    font-family: var(--font-en-01);
    font-size: 0.75rem;
    line-height: 1;
    text-transform: uppercase;
    padding: 10px 12px;
    color: var(--color-gld);
    border: 1px solid var(--color-gld);
}
.sec-head .sec-title {
    font-family: var(--font-jp-02);
    font-size: 1.8rem;
    letter-spacing: .05em;
    line-height: 1.5;
}
@media screen and (min-width: 768px) {
    .sec-head .sec-title {
        font-size: 2rem;
        font-weight: 400;
        letter-spacing: .1em;
    }
}
@media screen and (min-width: 1024px) {
    .sec-head .sec-title {
        font-size: 2.3rem;
    }
}


/* --------------------------------------------------
 message
--------------------------------------------------- */

.message {
    padding: 70px 20px;
    background: var(--color-blk);
    color: var(--color-wht);
}
.message__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}
.message-en {
    font-family: var(--font-en-02);
    font-size: 1.8rem;
    font-weight: 700;
    font-style: italic;
}
.message__inner .text {
    display: flex;
    flex-direction: column;
    gap: 15px;
    position: relative;
    padding: 40px 0;
}
.message__inner .text::before,
.message__inner .text::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 45%;
    height: 1px;
    background: var(--color-gld);
    transform: translate(-50%, 0);
}
.message__inner .text::before {
    top: 0;
}
.message__inner .text::after {
    bottom: 0;
}
.message__inner .text p {
    font-family: var(--font-jp-02);
    font-size: 0.95rem;
    text-align: justify;
}
@media screen and (min-width: 768px) {
    .message {
        padding: 100px 40px;
    }
    .message-en {
        font-size: 2.2rem;
    }
    .message__inner .text {
        padding: 60px 0;
    }
    .message__inner .text::before,
    .message__inner .text::after {
        width: 40%;
    }
    .message__inner .text p {
        text-align: center;
        line-height: 2;
    }
}
@media screen and (min-width: 1024px) {
    .message {
        padding: 130px 60px;
    }
    .message-en {
        font-size: 2.5rem;
    }
}
@media screen and (min-width: 1280px) {
    .message {
        padding: 180px 100px;
    }
    .message__inner {
        gap: 100px;
    }
    .message-en {
        font-size: 3rem;
    }
}

/* --------------------------------------------------
 restaurants
--------------------------------------------------- */

.rest-grid {
    display: flex;
    flex-direction: column;
    gap: 25px;
}
.rest-card {
    width: 100%;
}
.rest-img {
    width: 100%;
    aspect-ratio: 4 / 5;
}
.rest-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.rest-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 25px 20px;
    background: var(--color-wht);
}
.rest-body .rest-tag {
    color: var(--color-gld);
    font-family: var(--font-en-01);
    font-size: 0.7rem;
    text-transform: uppercase;
}
.rest-body .rest-name {
    display: flex;
    flex-direction: column;
    font-family: var(--font-jp-02);
    font-size: 1.2rem;
    font-weight: 600;
}
.rest-body .rest-area {
    font-size: 0.8rem;
}
.rest-body .rest-text p {
    font-size: 0.8rem;
    color: var(--color-khk);
    text-align: justify;
}
@media screen and (min-width: 768px) {
    .rest-card {
        display: flex;
        flex-direction: row;
    }
    .rest-img {
        width: 30%;
    }
    .rest-body {
        width: 70%;
    }
}
@media screen and (min-width: 1024px) {
    .rest-body {
        padding: 30px;
    }
}
@media screen and (min-width: 1280px) {
    .rest-grid {
        flex-direction: row;
        gap: 1px;
        align-items: stretch;
    }
    .rest-card {
        flex-direction: column;
    }
    .rest-img {
        width: 100%;
    }
    .rest-body {
        width: 100%;
        flex: 1;
    }
}

/* --------------------------------------------------
 career
--------------------------------------------------- */

.career-wrap {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: start;
}
.career-sticky {
    position: static;
}
@media screen and (min-width: 768px) {}
@media screen and (min-width: 1024px) {
    .career-wrap {
        grid-template-columns: 280px 1fr;
        gap: clamp(40px, 6vw, 100px);
        padding-top: 50px;
    }
    .career-sticky {
        position: sticky;
        top: 80px;
    }
}

.career-intro {
    margin-top: 30px;
    font-size: 0.9rem;
    font-weight: 300;
    color: var(--color-khk);
    line-height: 2.2;
    text-align: justify;
}
@media screen and (min-width: 1024px) {
    .career-intro {
        font-size: 0.85rem;
    }
}

.career-quote {
    padding: 24px;
    background: var(--color-beg);
    border-left: 2px solid var(--color-gld);
}
.career-quote p {
    font-family: var(--font-en-02);
    color: var(--color-blk);
    line-height: 1.8;
}
.career-steps {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.step {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 14px;
    padding: clamp(24px, 3vw, 40px) clamp(20px, 2.5vw, 32px);
    background: var(--color-wht);
    border-left: 3px solid var(--color-dbe);
    transition: border-color .3s;
}
.step:hover {
    border-left-color: var(--color-gld);
}
.step-num {
    font-family: var(--font-en-02);
    font-size: 28px;
    font-weight: 300;
    color: var(--color-gld);
    line-height: 1;
    padding-top: 4px;
}
@media screen and (min-width: 1024px) {
    .step {
        grid-template-columns: 56px 1fr;
        gap: 20px;
    }
    .step-num {
        font-size: 40px;
    }
}

.step-tag {
    display: block;
    margin-bottom: 6px;
    font-family: var(--font-en-01);
    font-size: 8px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--color-gld);
}
.step-title {
    font-family: var(--font-jp-02);
    font-size: 1rem;
    font-weight: 400;
    color: var(--color-blk);
    margin-bottom: 10px;
}
.step-body {
    font-size: 12px;
    font-weight: 300;
    color: var(--color-khk);
    line-height: 2;
}
@media screen and (min-width: 1024px) {
    .step-title {
        font-size: 1.2rem;
    }
}

/* --------------------------------------------------
 voice
--------------------------------------------------- */

.voice-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3px;
}
.voice-grid .voice-card:last-child {
    grid-column: auto;
}
@media screen and (min-width: 768px) {
    .voice-grid {
        grid-template-columns: 1fr 1fr;
    }
    .voice-grid .voice-card:last-child {
        grid-column: 1 / -1;
    }
}
@media screen and (min-width: 1024px) {
    .voice-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .voice-grid .voice-card:last-child {
        grid-column: auto;
    }
}

.voice-card {
    padding: clamp(28px, 3.5vw, 48px) clamp(20px, 2.5vw, 36px);
    background: var(--color-wht);
}
.voice-shop {
    display: block;
    margin-bottom: 24px;
    font-family: var(--font-en-01);
    font-size: 8px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--color-gld);
}
.voice-head {
    display: flex;
    align-items: center;
    gap: 15px;
}
.voice-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    margin-bottom: 16px;
    overflow: hidden;
}
.voice-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.voice-name {
    font-family: var(--font-jp-02);
    font-size: 18px;
    font-weight: 400;
    color: var(--font-blk);
}
.voice-role {
    font-family: var(--font-en-01);
    font-size: 9px;
    color: var(--color-khk);
    letter-spacing: .08em;
    margin-bottom: 20px;
}
.voice-q {
    padding-left: 14px;
    font-size: 12px;
    font-weight: 300;
    color: var(--color-khk);
    line-height: 2.2;
    border-left: 2px solid var(--color-gld);
}

/* --------------------------------------------------
 conditions
--------------------------------------------------- */

.cond-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.cond-block {
    width: 100%;
    padding: 20px;
    background: var(--color-wht);
}
.cond-label {
    display: block;
    margin-bottom: 10px;
    font-size: 0.7rem;
    letter-spacing: .2em;
    color: var(--color-gld);
}
.cond-title {
    font-family: var(--font-jp-02);
    font-size: 1.1rem;
    font-weight: 400;
}
.cond-val {
    margin-top: 14px;
    font-size: 0.85rem;
    color: var(--color-khk);
}
@media screen and (min-width: 1024px) {
    .cond-block {
        width: calc(50% - 10px);
    }
    .cond-title {
        font-size: 1.15rem;
    }
    .cond-val {
        font-size: 0.8rem;
    }
}

/* --------------------------------------------------
 entry
--------------------------------------------------- */

.entry {
    background: var(--color-blk);
    color: var(--color-wht);
}
.entry__inner {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 60px 20px;
}
@media screen and (min-width: 768px) {
    .entry__inner {
        padding: 80px 40px;
    }
}
@media screen and (min-width: 1024px) {
    .entry__inner {
        gap: 60px;
        padding: 100px 60px;
    }
}
@media screen and (min-width: 1280px) {
    .entry__inner {
        max-width: 1600px;
        margin: auto;
        padding: 120px 100px;
    }
}


.entry-title {
    text-align: center;
    font-family: var(--font-jp-02);
    font-size: 1.8rem;
    letter-spacing: .05em;
    line-height: 1.6;
}
.entry-title span {
    color: var(--color-gld);
}
.entry-sub p {
    font-size: 0.85rem;
    color: var(--color-beg);
}
@media screen and (min-width: 768px) {
    .entry-title {
        font-size: 2.2rem;
    }
}
@media screen and (min-width: 1024px) {
    .entry-title {
        font-size: 2.4rem;
    }
    .entry-sub p {
        text-align: center;
    }
}


.entry-opts {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
@media screen and (min-width: 768px) {
    .entry-opts {
        flex-direction: row;
    }
    .entry-opt {
        width: calc(33.3333% - (8px / 3));
    }
}
.entry-opt a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 30px 20px;
    background: var(--color-dgy);
    border: 1px solid var(--color-lgd);
    text-decoration: none;
}
.entry-opt-icon {
    width: 60px;
}
.entry-opt-title {
    font-family: var(--font-jp-02);
    font-size: 1.1rem;
    margin-top: 15px;
}
.entry-opt-sub {
    font-size: 0.8rem;
    color: var(--color-beg);
}
.entry-conf {
    font-family: var(--font-en-02);
    font-size: 1rem;
    color: var(--color-gld);
    text-align: center;
}
@media screen and (min-width: 768px) {
    .entry-opt a {
        padding: 30px 10px;
    }
    .entry-opt-title {
        font-size: 0.95rem;
    }
}
@media screen and (min-width: 1024px) {
    .entry-opt-title {
        font-size: 1.05rem;
    }
}

/* --------------------------------------------------
 footer
--------------------------------------------------- */

.footer {
    padding: 60px 20px;
    background: var(--color-blk);
    color: var(--color-wht);
    border-top: 1px solid var(--color-khk);
}
.footer__inner .logo a {
    text-transform: uppercase;
    text-decoration: none;
}
.footer__inner .logo a .logo__type {
    font-family: var(--font-en-02);
    font-size: 1.2rem;
    color: var(--color-wht);
}