@charset "UTF-8";


/* Variables */
:root {
    --primary-color: #333;
    --secondary-color: #666;
    --accent-color: #8F7F37;
    /* Gold/Beige */
    --accent-light: #f5f3ed;
    /* Light Beige */
    --blue-color: #58a5c2;
    --blue-light-top: #3FB7D5;
    --blue-light-2: #2CABC3;
    /* Cyan Blue */
    --blue-light: #eef7f9;
    /* Light Blue */
    --bg-color: #fff;
    --font-serif: "Noto Serif JP", serif;
    --font-sans: "Noto Sans JP", sans-serif;
    --font-en: "Tenor Sans", sans-serif;
}

/* Base Styles */
body {
    font-family: var(--font-serif);
    color: var(--primary-color);
    background-color: var(--bg-color);
    line-height: 1.8;
    letter-spacing: 0.05em;
}

a {
    color: inherit;
    text-decoration: none;
    transition: opacity 0.3s;
}

a:hover {
    opacity: 0.7;
}

img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
}

/* Utility Classes */
.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

.section {
    padding: 80px 0;
}

.section-title-en {
    font-family: var(--font-en);
    font-size: 1.8rem;
    text-align: center;
    margin-bottom: 40px;
    color: var(--accent-color);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.link-arrow {
    display: inline-block;
    font-size: 0.8rem;
    color: var(--accent-color);
    border-bottom: 1px solid var(--accent-color);
    padding-bottom: 2px;
    position: relative;
}

.link-arrow::after {
    content: "→";
    margin-left: 5px;
    font-size: 0.8em;
}

/* Header */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    z-index: 100;
    height: 100px;
    /* Increased height for double line nav */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    max-width: 1200px;
    /* Wider container for header */
}

.logo img {
    height: 50px;
    width: auto;
}

.nav {
    margin-left: auto;
    margin-right: 30px;
}

.nav-list {
    display: flex;
    gap: 30px;
    align-items: center;
    list-style: none;
}

.nav-list a {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--accent-color);
    text-decoration: none;
    line-height: 1.2;
}

.nav-jp {
    font-size: 0.6rem;
    margin-bottom: 2px;
}

.nav-en {
    font-family: var(--font-en);
    font-size: 0.9rem;
    letter-spacing: 0.05em;
}

.nav-list a:hover {
    opacity: 0.7;
}

.header-right {
    display: flex;
    align-items: center;
    height: auto;
}

.btn-reserve {
    background-color: var(--blue-color);
    color: #fff !important;
    padding: 10px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    letter-spacing: 0.1em;
    font-weight: 500;
    transition: opacity 0.3s;
}

.btn-reserve:hover {
    opacity: 0.8;
}

.hamburger {
    display: none;
}

/* Hero Images */
.hero-images {
    display: block;
    margin-top: 0;
    /* Full screen, so maybe start from top? If header is fixed, it will overlap. Let's keep margin-top if we want it below, or 0 if behind. User said "Full screen", usually implies 100vh covering view. Let's try 0 and see if header overlaps nicely or needs adjustment. Current header is white opaque. Let's keep margin-top: 100px (header height) to avoid cutoff, OR make it 0 and header transparent? User didn't ask for transparent header. Let's stick to margin-top: 100px but make image calc(100vh - 100px)? Or just 100vh and scroll? User said "Full screen". Let's do 100vh. */
    margin-top: 100px;
    /* Offset for fixed header */
}

.hero-img {
    width: 100%;
    height: calc(100vh - 100px);
    /* Full screen minus header */
    overflow: hidden;
}

.hero-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Animation for the first image */
.hero-img:first-child img {
    opacity: 0;
    animation: heroFadeIn 2s ease-in-out forwards;
}

/* Hide other images for now as per user request */
.hero-img:not(:first-child) {
    display: none;
}

@keyframes heroFadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* Hero Text Section */
.hero-text-section {
    text-align: left;
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}

.hero-text-inner {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}

.main-copy {
    font-family: var(--font-serif);
    font-size: 2.2rem;
    line-height: 1.8;
    margin-bottom: 40px;
    font-weight: 500;
    color: var(--accent-color);
    position: relative;
    z-index: 2;
}

.highlight {
    color: var(--blue-color);
    position: relative;
    display: inline-block;
}

/* Placeholder for underline image */
.highlight::after {
    content: "";
    position: absolute;
    bottom: -13px;
    left: 0;
    width: 100%;
    height: 17px;
    background-image: url('../images/top/under-line.png');
    /* Placeholder path */
    background-size: contain;
    background-repeat: no-repeat;
    /* If no image yet, we can use a border or just leave empty */
    /* border-bottom: 2px solid var(--blue-color); */
}

.hero-bg-text {
    position: absolute;
    top: 50px;
    right: -100px;
    width: 500px;
    z-index: 1;
    opacity: 1;
    pointer-events: none;
}

.hero-description {
    font-size: 0.9rem;
    color: var(--secondary-color);
    line-height: 2;
    position: relative;
    z-index: 2;
}

/* Intro Section */
.intro-inner {
    display: flex;
    align-items: center;
    gap: 80px;
}

.intro-image {
    flex: 1;
    position: relative;
}

.intro-image::before {
    content: "";
    position: absolute;
    top: 20px;
    left: -20px;
    width: 100%;
    height: 100%;
    background-color: var(--accent-color);
    z-index: -1;
    opacity: 0.5;
    border: none;
}

.intro-text {
    flex: 1;
}

.intro-question {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    color: var(--blue-color);
    margin-bottom: 20px;
    font-weight: 500;
}

.intro-desc {
    font-size: 0.9rem;
    color: var(--secondary-color);
    margin-top: 40px;
    margin-bottom: 40px;
    line-height: 2;
}

/* News Section */
.news {
    background-color: var(--blue-light);
    padding: 60px 0;
}

.news-list {
    max-width: 800px;
    margin: 0 auto 40px;
}

.news-item {
    border-bottom: 1px solid #ddd;
}

.news-item:first-child {
    border-top: 1px solid #ddd;
}

.news-item a {
    display: flex;
    align-items: center;
    padding: 20px 0;
}

.news-date {
    font-family: var(--font-en);
    color: var(--secondary-color);
    margin-right: 40px;
    font-size: 0.85rem;
}

.news-title {
    font-size: 0.95rem;
}

.view-more-right {
    text-align: right;
    max-width: 800px;
    margin: 0 auto;
}

.btn-border {
    border: 1px solid var(--accent-color);
    color: var(--accent-color);
    padding: 10px 40px;
    font-size: 0.8rem;
    font-family: var(--font-en);
    display: inline-block;
    position: relative;
    transition: all 0.3s;
}

.btn-border::after {
    content: "→";
    margin-left: 10px;
    font-size: 0.9em;
}

.btn-border:hover {
    background-color: var(--accent-color);
    color: #fff;
    opacity: 1;
}

/* Owner Message */
.owner-message {
    padding: 100px 0;
}

.owner-inner {
    display: flex;
    align-items: center;
    gap: 80px;
}

.owner-image {
    flex: 1;
    position: relative;
}

/* Decoration for Owner Image (Blue background square) */
.owner-image::before {
    content: "";
    position: absolute;
    top: 20px;
    left: -20px;
    width: 100%;
    height: 100%;
    background-color: var(--blue-light-top);
    opacity: 0.5;
    z-index: -1;
}

.owner-text {
    flex: 1;
}

.owner-text h3 {
    font-family: var(--font-serif);
    font-size: 1.4rem;
    margin-bottom: 30px;
    font-weight: 500;
    color: var(--accent-color);
    line-height: 1.8;
}

.owner-text p {
    font-size: 0.9rem;
    color: var(--secondary-color);
    margin-bottom: 30px;
    line-height: 2.2;
    text-align: justify;
}

.owner-name {
    text-align: right;
    color: var(--blue-color);
    font-weight: 500;
    font-size: 1rem;
    margin-top: 20px;
}

/* Big Links Grid */
.big-links {
    padding-bottom: 0;
}

.big-link-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 30px;
    /* Vertical spacing */
}

.big-link-row:last-child {
    margin-bottom: 0;
}

.big-link-row.reverse {
    /* Trick to reverse grid items visually without changing source order? No, grid doesn't work like that easily with direction. Better to just swap columns or use order. */
    /* Actually for Grid, we can just not use .reverse on the container in the same way, or use order property on children. */
    /* Let's use order property on children if .reverse is present. */
}

/* Reset direction for content if we used rtl, but let's try a cleaner grid approach. */
/* Approach: 
   .big-link-row { display: grid; grid-template-columns: 1fr 1fr; }
   .big-link-row.reverse .big-link-box { order: 2; }
   .big-link-row.reverse .big-link-image { order: 1; }
*/

.big-link-row.reverse .big-link-box {
    order: 2;
}

.big-link-row.reverse .big-link-image {
    order: 1;
}

.big-link-box {
    /* flex: 1; removed */
    /* width: 50%; removed */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px;
    width: 100%;
    /* Fill grid cell */
    height: 100%;
    /* Fill grid cell height */
}

.gold-bg {
    background-color: var(--accent-color);
    color: #fff;
}

.big-link-image {
    /* flex: 1; removed */
    /* width: 50%; removed */
    width: 100%;
    /* Fill grid cell */
    height: 100%;
    /* Fill grid cell height */
    position: relative;
    /* For object-fit */
}

.big-link-image img {
    height: 100%;
    object-fit: cover;
    min-height: 350px;
    display: block;
}

.box-content h3 {
    font-family: var(--font-en);
    font-size: 2rem;
    margin-bottom: 10px;
    letter-spacing: 0.1em;
    font-weight: normal;
}

.box-content p {
    font-size: 0.9rem;
    margin-bottom: 40px;
    opacity: 0.9;
    font-family: var(--font-serif);
}

.btn-white-border {
    border: 1px solid #fff;
    padding: 10px 40px;
    font-size: 0.8rem;
    font-family: var(--font-en);
    display: inline-block;
    color: #fff;
    position: relative;
    transition: all 0.3s;
}

.btn-white-border::after {
    content: "→";
    margin-left: 10px;
    font-size: 0.9em;
}

.btn-white-border:hover {
    background-color: #fff;
    color: var(--accent-color);
    opacity: 1;
}

/* Blog */
.top-blog {
    padding-bottom: 80px;
}

.blog-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 40px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
}

.blog-title-area {
    text-align: center;
}

.blog-title-area .section-title-en {
    margin-bottom: 5px;
    text-align: left;
}

.section-title-jp {
    font-size: 0.8rem;
    color: var(--accent-color);
    font-family: var(--font-serif);
    display: block;
    text-align: center;
    /* Actually design shows it centered under BLOG? Or left? Screenshot shows "BLOG" then "ブログ" below it. */
    /* Let's align it with BLOG text. */
}

.blog-tags {
    display: flex;
    gap: 20px;
    list-style: none;
    margin-bottom: 5px;
}

.blog-tags a {
    font-size: 0.8rem;
    color: var(--blue-color);
    font-family: var(--font-serif);
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 40px;
}

.blog-card {
    background-color: var(--accent-light);
    /* Beige bg */
    transition: opacity 0.3s;
}

.blog-card:hover {
    opacity: 0.8;
}

.blog-image {
    margin-bottom: 0;
}

.blog-image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    /* Square image as per screenshot? Or placeholder is square? Screenshot looks square-ish or 4:3. Let's use aspect-ratio. */
    object-fit: cover;
}

.blog-content {
    padding: 20px;
}

.blog-card-title {
    font-size: 0.95rem;
    margin-bottom: 20px;
    line-height: 1.6;
    font-family: var(--font-serif);
    color: var(--primary-color);
    height: 3.2em;
    /* Limit to 2 lines roughly */
    overflow: hidden;
}

.blog-meta {
    display: flex;
    align-items: center;
    gap: 15px;
}

.blog-meta time {
    font-family: var(--font-en);
    color: #ccc;
    /* Light gray date */
    font-size: 0.8rem;
}

.blog-category {
    background-color: var(--blue-color);
    color: #fff;
    font-size: 0.7rem;
    padding: 2px 10px;
    display: inline-block;
}

.view-more-center {
    text-align: center;
}

/* Instagram */
.instagram {
    background-color: var(--blue-light);
}

.insta-profile {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 30px;
}

.insta-icon img {
    border-radius: 50%;
}

.insta-id {
    font-family: var(--font-en);
    font-weight: bold;
}

.insta-desc {
    font-size: 0.8rem;
    color: var(--secondary-color);
}

.insta-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

/* Bottom CTA */
.bottom-cta {
    background-image: url('../images/cta-back.jpg');
    /* Dark bg */
    background-size: cover;
    background-position: center;
    color: #fff;
    text-align: center;
    padding: 80px 0;
}

.cta-inner h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
    font-weight: normal;
}

.cta-inner p {
    margin-bottom: 40px;
    font-size: 0.9rem;
    opacity: 0.8;
}

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.btn-cta {
    display: block;
    width: 240px;
    padding: 15px 0;
    text-align: center;
    font-family: var(--font-en);
    font-size: 1rem;
    letter-spacing: 0.05em;
}

.btn-cta.gold {
    background-color: var(--accent-color);
    color: #fff;
}

.btn-cta.blue {
    background-color: var(--blue-color);
    color: #fff;
}

/* Footer */
.footer {
    background-color: var(--accent-light);
    padding-top: 80px;
    color: var(--primary-color);
}

.footer-top {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 60px;
    margin-bottom: 60px;
}

.footer-logo img {
    width: 134px;
    height: auto;
}

.footer-info {
    text-align: left;
}

.footer-shop-name {
    font-family: var(--font-en);
    font-size: 2rem;
    color: var(--accent-color);
    margin-bottom: 10px;
    font-weight: normal;
}

.footer-shop-name-jp {
    font-family: var(--font-serif);
    font-size: 1rem;
    color: var(--accent-color);
    margin-left: 10px;
}

.footer-address {
    font-size: 0.9rem;
    color: var(--accent-color);
    margin-bottom: 20px;
}

.footer-tags {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

.footer-tag {
    border: 1px solid var(--accent-color);
    color: var(--accent-color);
    padding: 5px 15px;
    font-size: 0.8rem;
    background-color: #fff;
    /* Assuming white bg for tags inside beige footer */
}

.footer-sns {
    display: flex;
    gap: 15px;
}

.sns-icon img {
    width: 40px;
    height: 40px;
    border-radius: 10px;
}

.footer-bottom-nav {
    border-top: 1px solid #dcdcdc;
    /* Full width border */
    padding: 30px 0;
    width: 100%;
}

.footer-nav-list {
    display: flex;
    justify-content: center;
    gap: 40px;
    list-style: none;
}

.footer-nav-list a {
    font-family: var(--font-en);
    font-size: 0.9rem;
    color: var(--accent-color);
    letter-spacing: 0.05em;
}

.copyright {
    background-color: var(--blue-color);
    color: #fff;
    text-align: center;
    padding: 20px 0;
    font-family: var(--font-en);
    font-size: 0.7rem;
    letter-spacing: 0.05em;
}

/* Responsive */
@media (max-width: 768px) {
    .header {
        height: 60px;
        /* Smaller header on mobile */
    }

    .header-inner {
        padding: 0 15px;
    }

    .logo img {
        height: 30px;
    }

    .nav {
        display: none;
        position: fixed;
        top: 60px;
        left: 0;
        width: 100%;
        background-color: #fff;
        padding: 20px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        margin: 0;
    }

    .nav.active {
        display: block;
    }

    .nav-list {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .header-right {
        gap: 15px;
    }

    .btn-reserve {
        font-size: 0.7rem;
        padding: 0 10px;
        height: 40px;
        /* Button height inside header */
        border-radius: 2px;
    }

    .hamburger {
        display: block;
        width: 30px;
        height: 20px;
        position: relative;
        background: none;
        border: none;
        cursor: pointer;
        z-index: 101;
    }

    .hamburger span {
        display: block;
        width: 100%;
        height: 2px;
        background-color: #333;
        position: absolute;
        left: 0;
        transition: 0.3s;
    }

    .hamburger span:nth-child(1) {
        top: 0;
    }

    .hamburger span:nth-child(2) {
        top: 9px;
    }

    .hamburger span:nth-child(3) {
        bottom: 0;
    }

    .hamburger.active span:nth-child(1) {
        transform: rotate(45deg);
        top: 9px;
    }

    .hamburger.active span:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active span:nth-child(3) {
        transform: rotate(-45deg);
        bottom: 9px;
    }

    .hero-images {
        margin-top: 60px;
        flex-direction: column;
    }

    .hero-img {
        height: 200px;
    }

    .intro-inner,
    .owner-inner {
        flex-direction: column;
        gap: 30px;
    }

    .big-link-row,
    .big-link-row.reverse {
        grid-template-columns: 1fr;
    }

    /* Reset order for mobile so image is always on top? Or keep alternating?
       Usually mobile stacks image on top or bottom consistently.
       Let's check current HTML structure.
       Row 1: Box (Text) - Image.
       Row 2: Box (Text) - Image (with .reverse class on row).
       Row 3: Box (Text) - Image.
       
       If we want Image on Top for all:
       .big-link-image { order: -1; }
       
       If we want to keep source order (Text then Image), then just 1 column is fine.
       But design usually prefers Image then Text or Text then Image consistently.
       Let's assume default stacking (Text then Image) is okay, OR check if user wants specific mobile layout.
       Previous flex-direction: column stacked them.
       Let's ensure they stack nicely.
    */

    .big-link-row.reverse .big-link-box {
        order: unset;
    }

    .big-link-row.reverse .big-link-image {
        order: unset;
    }

    .blog-grid {
        grid-template-columns: 1fr;
    }

    .insta-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-top {
        flex-direction: column;
        gap: 30px;
        text-align: center;
    }

    .footer-info {
        text-align: center;
    }

    .footer-tags {
        justify-content: center;
        flex-wrap: wrap;
    }

    .footer-sns {
        justify-content: center;
    }

    .footer-nav-list {
        flex-wrap: wrap;
        gap: 20px;
    }

    .cta-buttons-reserve {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    /* Catchphrase Responsive */
    .hero-text-section {
        padding: 60px 0;
        text-align: center;
    }

    .hero-text-inner {
        padding: 0 20px;
    }

    .main-copy {
        font-size: 1.6rem;
    }

    .hero-bg-text {
        width: 300px;
        top: 20px;
        right: -50px;
        opacity: 0.3;
    }

    .intro-question {
        font-size: 1rem;
        text-align: center;
    }

    .intro-desc {
        text-align: center;
    }

    .view-more-right-aligned {
        text-align: center;
    }
}

/* Global Bottom CTA Reserve (Moved from reserve.css) */