:root {
    --color-bg: #000;
    --color-text: #fff;
    --color-accent: #FFE600;
    --font-main: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
    --font-mono: "Courier New", Courier, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

.u-mono { font-family: var(--font-mono); }

body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-main);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

body.is-loading { overflow: hidden; }

/* Loader */
.loader {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: #000; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    transition: opacity 0.8s ease;
}
.loader__line {
    width: 0; height: 1px; background: var(--color-accent);
}

/* Header */
.header {
    position: fixed; top: 0; left: 0; width: 100%; z-index: 1000;
    padding: 40px 5%;
}
.header__inner {
    display: flex; justify-content: space-between; align-items: center;
}
.logo {
    font-size: 1.5rem; font-weight: 900; letter-spacing: 0.1em;
    text-decoration: none; color: #fff;
}
.logo span { color: var(--color-accent); }

.nav__list { display: flex; list-style: none; gap: 40px; }
.nav__list a {
    color: #fff; text-decoration: none; font-size: 0.7rem; font-weight: 900;
    letter-spacing: 0.2em; opacity: 0.7; transition: opacity 0.3s; /* Increased opacity */
}
.nav__list a:hover, .nav__list a.is-active { opacity: 1; color: var(--color-accent); }

/* Hero */
.hero {
    height: 100vh; position: relative; display: flex; align-items: center;
    padding: 100px 10% 0; /* ヘッダー分の上パディングを追加 */
}
.hero__image-container {
    position: absolute; top: 0; right: 0; width: 60%; height: 100%; overflow: hidden;
}
.hero__image { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.6); }
.hero__overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(90deg, #000 0%, transparent 100%);
}

.hero__content { position: relative; z-index: 2; max-width: 800px; }
.hero__label { font-size: 0.8rem; color: var(--color-accent); letter-spacing: 0.4em; margin-bottom: 30px; font-weight: 700; }
.hero__title { font-size: clamp(3rem, 10vw, 6rem); font-weight: 900; line-height: 1; margin-bottom: 40px; }
.hero__title span { color: var(--color-accent); }
.hero__text { font-size: 1.1rem; opacity: 0.9; line-height: 2.2; max-width: 500px; } /* Increased opacity */

.hero__scroll {
    position: absolute; bottom: 50px; left: 10%; font-size: 0.7rem; letter-spacing: 0.3em; opacity: 0.6;
}
.hero__scroll span {
    display: block; width: 1px; height: 60px; background: rgba(255,255,255,0.2);
    margin-top: 15px; position: relative;
}
.hero__scroll span::after {
    content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 30%;
    background: var(--color-accent); animation: scroll-line 2s infinite;
}

@keyframes scroll-line {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(300%); }
}

/* Sections */
.section { padding: 200px 0; }
.container { max-width: 1400px; margin: 0 auto; padding: 0 5%; }

.concept__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 100px; align-items: center; }
.concept__visual { position: relative; }
.concept__image-wrap { aspect-ratio: 4 / 5; overflow: hidden; }
.concept__image-wrap img { width: 100%; height: 120%; object-fit: cover; }

.concept__num { font-size: 0.8rem; opacity: 0.5; display: block; margin-bottom: 30px; } /* Increased opacity */
.concept__title { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 900; margin-bottom: 40px; line-height: 1.2; }
.concept__text { font-size: 1.1rem; opacity: 0.8; line-height: 2.2; margin-bottom: 60px; } /* Increased opacity */

.btn-circle {
    display: inline-flex; width: 160px; height: 160px; border: 1px solid rgba(255,255,255,0.3);
    border-radius: 50%; align-items: center; justify-content: center;
    color: #fff; text-decoration: none; font-size: 0.65rem; font-weight: 900;
    transition: all 0.4s; position: relative;
    white-space: nowrap; flex-shrink: 0; padding: 0 20px; text-align: center;
}
.btn-circle:hover { background: var(--color-accent); border-color: var(--color-accent); color: #000; transform: scale(1.1); }

/* Showcase */
.showcase__full-image { height: 100vh; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.showcase__full-image img { position: absolute; top: -10%; left: 0; width: 100%; height: 120%; object-fit: cover; filter: brightness(0.5); }
.showcase__title { position: relative; z-index: 2; font-size: 15vw; line-height: 0.8; font-weight: 900; letter-spacing: -0.05em; text-align: center; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,0.4); }

/* Footer */
.footer { padding: 100px 0 50px; border-top: 1px solid rgba(255,255,255,0.1); }
.footer__inner { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 60px; }
.footer__brand p { margin-top: 20px; font-size: 0.7rem; opacity: 0.6; letter-spacing: 0.2em; } /* Increased opacity */
.footer__contact { font-size: 0.8rem; opacity: 0.8; letter-spacing: 0.1em; } /* Increased opacity */
.footer__bottom { padding-top: 40px; border-top: 1px solid rgba(255,255,255,0.1); font-size: 0.7rem; opacity: 0.4; display: flex; justify-content: center; }

@media (max-width: 1024px) {
    .concept__grid { grid-template-columns: 1fr; gap: 60px; }
    .hero__image-container { width: 100%; opacity: 0.5; }
    .hero__overlay { background: radial-gradient(circle at center, transparent, #000); }
    .hero__content { text-align: center; margin: 0 auto; }
}

/* Mobile: 768px and below */
@media (max-width: 768px) {
    .header {
        padding: 20px 5%;
    }
    .header__inner {
        flex-direction: column;
        gap: 16px;
        align-items: center;
    }
    .logo { font-size: 1.25rem; }
    .nav__list {
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px 24px;
    }
    .nav__list a {
        font-size: 0.65rem;
        padding: 8px 0;
    }
    .hero {
        height: 100vh;
        padding: 0 5%;
        min-height: 100svh;
    }
    .hero__title {
        font-size: clamp(2rem, 10vw, 4rem);
        margin-bottom: 24px;
    }
    .hero__label { margin-bottom: 20px; font-size: 0.7rem; letter-spacing: 0.25em; }
    .hero__text { font-size: 1rem; max-width: 100%; }
    .hero__scroll { left: 5%; bottom: 30px; font-size: 0.65rem; }
    .section { padding: 80px 0; }
    .container { padding: 0 5%; }
    .concept__grid { gap: 40px; }
    .concept__title { font-size: clamp(1.5rem, 6vw, 2.5rem); margin-bottom: 24px; }
    .concept__text { margin-bottom: 40px; font-size: 1rem; }
    .btn-circle {
        width: 140px;
        height: 140px;
        font-size: 0.6rem;
    }
    .showcase__full-image { height: 80vh; min-height: 400px; }
    .showcase__title { font-size: 12vw; }
    .footer { padding: 60px 0 40px; }
    .footer__inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 32px;
        margin-bottom: 40px;
    }
    .footer__brand p { margin-top: 12px; }
    .menu-header { padding: 100px 5% 60px; }
    .menu-header__title { font-size: clamp(2rem, 10vw, 4rem); }
    .menu__grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .menu-item {
        padding: 32px 24px;
    }
    .menu-item__name { font-size: 1.25rem; }
    .menu-item__desc { font-size: 0.85rem; }
    .contact-container { padding: 100px 5% 80px; }
    .contact-form { margin-top: 40px; }
    .form-group { margin-bottom: 28px; }
    .form-group input, .form-group textarea { font-size: 1rem; }
    .btn-submit { padding: 16px 40px; width: 100%; max-width: 320px; }
}

/* Page: Menu */
.menu-header { padding: 160px 0 100px; text-align: center; }
.menu-header__title { font-size: clamp(3rem, 10vw, 6rem); font-weight: 900; }

.menu__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; }
.menu-item {
    padding: 60px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1);
    transition: all 0.4s;
}
.menu-item:hover { border-color: var(--color-accent); transform: translateY(-10px); }
.menu-item__img { width: 100%; aspect-ratio: 16/9; object-fit: cover; margin-bottom: 30px; }
.menu-item__name { font-size: 1.5rem; font-weight: 900; margin-bottom: 10px; }
.menu-item__desc { font-size: 0.9rem; opacity: 0.7; margin-bottom: 20px; }
.menu-item__price { font-size: 1.25rem; font-weight: 900; color: var(--color-accent); }

/* Page: Contact */
.contact-container { max-width: 800px; margin: 0 auto; padding: 160px 5%; }
.contact-form { margin-top: 60px; }
.form-group { margin-bottom: 40px; }
.form-group label { display: block; font-size: 0.7rem; letter-spacing: 0.2em; margin-bottom: 15px; opacity: 0.6; }
.form-group input, .form-group textarea {
    width: 100%; background: transparent; border: none; border-bottom: 1px solid rgba(255,255,255,0.2);
    padding: 15px 0; color: #fff; font-size: 1.1rem; outline: none; transition: border-color 0.3s;
}
.form-group input:focus, .form-group textarea:focus { border-color: var(--color-accent); }
.btn-submit {
    background: var(--color-accent); color: #000; border: none; padding: 20px 60px;
    font-size: 0.8rem; font-weight: 900; letter-spacing: 0.2em; cursor: pointer; transition: transform 0.3s;
}
.btn-submit:hover { transform: scale(1.05); }

/* モーダル（iframe）内表示用 - 強制適用のため末尾に配置 */
body.is-embed { min-width: 0; }
body.is-embed .loader { display: none; }
body.is-embed .header { padding: 16px 5%; }
body.is-embed .header__inner { flex-wrap: wrap; gap: 12px; justify-content: center; }
body.is-embed .nav__list { flex-wrap: wrap; justify-content: center; gap: 8px 16px; }
body.is-embed .nav__list a { font-size: 0.65rem; }
body.is-embed .hero {
    height: auto !important;
    min-height: 60vh !important;
    padding: 180px 5% 40px !important; /* 強制的に 180px の余白を確保 */
}
body.is-embed .hero__title { font-size: clamp(1.75rem, 8vw, 3.5rem); margin-bottom: 20px; }
body.is-embed .hero__label { margin-bottom: 16px; font-size: 0.7rem; letter-spacing: 0.25em; }
body.is-embed .hero__text { font-size: 0.95rem; max-width: 100%; }
body.is-embed .hero__scroll { display: none; }
body.is-embed .section { padding: 48px 0; }
body.is-embed .container { padding: 0 4%; max-width: 100%; }
body.is-embed .concept__grid { grid-template-columns: 1fr; gap: 32px; }
body.is-embed .concept__title { font-size: clamp(1.35rem, 5vw, 2rem); margin-bottom: 20px; }
body.is-embed .concept__text { margin-bottom: 28px; font-size: 0.95rem; }
body.is-embed .btn-circle { width: 120px; height: 120px; font-size: 0.6rem; }
body.is-embed .showcase__full-image { height: 50vh; min-height: 280px; }
body.is-embed .showcase__title { font-size: 10vw; }
body.is-embed .footer { padding: 40px 0 28px; }
body.is-embed .footer__inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 24px;
    margin-bottom: 28px;
}
body.is-embed .menu-header { padding: 48px 5% 32px; }
body.is-embed .menu-header__title { font-size: clamp(1.5rem, 6vw, 2.5rem); }
body.is-embed .menu__grid { grid-template-columns: 1fr; gap: 20px; }
body.is-embed .menu-item { padding: 24px 20px; }
body.is-embed .menu-item__name { font-size: 1.15rem; }
body.is-embed .menu-item__desc { font-size: 0.85rem; }
body.is-embed .contact-container { padding: 48px 5% 40px; }
body.is-embed .contact-form { margin-top: 28px; }
body.is-embed .form-group { margin-bottom: 20px; }
body.is-embed .form-group input, body.is-embed .form-group textarea { font-size: 1rem; }
body.is-embed .btn-submit { padding: 14px 32px; font-size: 0.8rem; }