@charset "UTF-8";

/* ==========================================
   CSS Variables & Base
========================================== */
:root {
    --font-en: "Cormorant Garamond", serif;
    --font-ja: YakuHanJP, "Noto Sans JP", sans-serif;
    --color-text: #1a1a1a;
    --color-bg: #ffffff;
    --color-dark: #111111;
}

html {
   font-size: 62.5%;
   scroll-padding-top: 80px;
   scroll-behavior: smooth;
   scroll-padding-top: 60px; 
}

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

body { 
    font-family: var(--font-ja); 
    color: var(--color-text); 
    background: var(--color-bg); 
    line-height: 1.8; 
    letter-spacing: 0.03em; 
    overflow-x: hidden;
    font-size: 1.6rem; 
}

img { max-width: 100%; height: auto; vertical-align: bottom; }
a { text-decoration: none; color: inherit; transition: opacity 0.3s; }
a:hover { opacity: 0.7; }
li { list-style: none; }
button { font-family: inherit; cursor: pointer; }

body.is-loading { overflow: hidden; height: 100vh; height: 100dvh; }
.u-hidden-sp { display: inline; }

/* ==========================================
   Loading & Reveal Animation
========================================== */
.c-loader { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100dvh; background-color: var(--color-bg); z-index: 9999; display: flex; align-items: center; justify-content: center; transition: opacity 0.6s ease, visibility 0.6s ease; }
.c-loader.is-loaded { opacity: 0; visibility: hidden; }
.c-loader__logo { transition: opacity 0.8s ease, transform 0.8s ease; }
.c-loader.is-loaded .c-loader__logo { opacity: 0; transform: translateY(-15px); }
.c-loader__logo img { width: 200px; opacity: 0; animation: fadeInLogo 1.5s ease-out forwards; }
@keyframes fadeInLogo { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } }

.js-fadein { opacity: 0; clip-path: inset(15% 0 0 0); transition: opacity 1.2s ease, clip-path 1.2s cubic-bezier(0.215, 0.61, 0.355, 1); }
.js-fadein.is-visible { opacity: 1; clip-path: inset(0 0 0 0); }

/* ==========================================
   Fixed UI (Logo, Hamburger, Drawer)
========================================== */
.c-fixed-logo { position: fixed; top: 40px; left: 40px; z-index: 1000; mix-blend-mode: difference; filter: invert(1); }
.c-fixed-logo img { width: 280px; height: auto; display: block; transition: width 0.4s ease; }
body.is-scrolled .c-fixed-logo img { width: 120px; }

.c-hamburger { position: fixed; top: 40px; right: 40px; z-index: 1000; width: 32px; height: 22px; display: flex; flex-direction: column; justify-content: space-between; background: transparent; border: none; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; mix-blend-mode: difference; color: #fff; }
.c-hamburger span { display: block; width: 100%; height: 1px; background-color: currentColor; transition: transform 0.3s ease, opacity 0.3s ease; }
body.is-scrolled .c-hamburger { opacity: 1; pointer-events: auto; }
.c-hamburger.is-active span:nth-child(1) { transform: translateY(10.5px) rotate(45deg); }
.c-hamburger.is-active span:nth-child(2) { opacity: 0; }
.c-hamburger.is-active span:nth-child(3) { transform: translateY(-10.5px) rotate(-45deg); }

.c-drawer { position: fixed; top: 80px; right: 40px; width: 240px; height: auto; background: rgba(255, 255, 255, 0.97); z-index: 900; padding: 40px 30px; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); display: flex; align-items: flex-start; justify-content: flex-start; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease; }
.c-drawer.is-active { opacity: 1; visibility: visible; transform: translateY(0); }
.c-drawer__nav { display: flex; flex-direction: column; gap: 20px; text-align: left; }
.c-drawer__nav a { font-family: var(--font-en); font-size: 1.8rem; color: var(--color-dark); letter-spacing: 0.05em; }

/* Accordion */
.c-nav-accordion { position: relative; }
.c-acc-icon { display: inline-block; width: 10px; height: 10px; position: relative; margin-left: 6px; vertical-align: middle; }
.c-acc-icon::before, .c-acc-icon::after { content: ""; position: absolute; background-color: currentColor; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.c-acc-icon::before { width: 10px; height: 1px; }
.c-acc-icon::after { width: 1px; height: 10px; transition: transform 0.3s ease, opacity 0.3s ease; }
.c-nav-accordion.is-open .c-acc-icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.c-acc-content { display: flex; flex-direction: column; overflow: hidden; max-height: 0; opacity: 0; transition: max-height 0.4s ease, opacity 0.4s ease, padding 0.4s ease; }
.c-nav-accordion.is-open .c-acc-content { max-height: 200px; opacity: 1; }
.c-header__nav-list .c-acc-content { position: absolute; top: 100%; right: 0; width: max-content; background: rgba(255, 255, 255, 0.95); border-radius: 4px; gap: 10px; padding: 0 15px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); z-index: 10; }
.c-header__nav-list .c-nav-accordion.is-open .c-acc-content { padding-top: 15px; padding-bottom: 15px; margin-top: 5px; }

.c-drawer__nav .c-acc-content { gap: 15px; padding-left: 15px; }
.c-drawer__nav .c-nav-accordion.is-open .c-acc-content { padding-top: 15px; }
.c-drawer__nav .c-acc-content a { font-size: 1.4rem; text-transform: none; }

/* ==========================================
   Header Common
========================================== */
.c-header {
    padding: 40px 40px 60px;
    position: relative;
    z-index: 100;
}
.c-header--lower { padding-bottom: 0; } 
.c-header__top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 40px; }
.c-header--lower .c-header__top { margin-bottom: 0; justify-content: flex-end; } 
.c-header__logo-spacer { width: 280px; } 

.c-header__nav { text-align: right; transition: opacity 0.3s ease, visibility 0.3s ease; }
body.is-scrolled .c-header__nav { opacity: 0; visibility: hidden; }
.c-header__nav-list { font-family: var(--font-en); font-size: 1.6rem; text-transform: capitalize; display: flex; flex-direction: column; gap: 15px; }
.c-header__catch {
    font-family: var(--font-en);
    font-size: 1.4rem;
    line-height: 1.4;
    color: #444;
    letter-spacing: 0.02em;
}

/* ==========================================
   Buttons & Titles & Marquee
========================================== */
.c-section-title { display: flex; align-items: baseline; gap: 20px; margin-bottom: 40px; }
.c-section-title__en { font-family: var(--font-en); font-size: 5.6rem; font-weight: 400; }
.c-section-title__ja { font-size: 1.2rem; font-weight: 500; letter-spacing: 0.1em; color: #111; }

.c-link-btn-arrow { display: inline-flex; align-items: center; font-family: var(--font-en); font-size: 1.6rem; font-weight: 400; text-decoration: underline; text-underline-offset: 4px; }
.c-link-btn-arrow svg { width: 18px; height: 18px; margin-left: 4px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.c-marquee { position: relative; z-index: 1; overflow: hidden; width: 100%; margin-top: 60px; }
.c-marquee__inner { display: flex; width: max-content; animation: marquee 120s linear infinite; }
.c-marquee__content { display: flex; }
.c-marquee__text { font-family: var(--font-en); font-size: 12.0rem; padding-right: 0.8em; white-space: nowrap; color: #333; }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ==========================================
   Footer
========================================== */
.c-footer-pre { background-color: var(--color-bg); padding-top: 60px; }
.c-footer { position: relative; background-color: var(--color-dark); color: #fff; padding: 80px 0; background-size: cover; background-position: center; background-image: url('../img/top_footer_bg.jpg'); }
.c-footer::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); z-index: 1; }
.c-footer__inner { position: relative; z-index: 2; max-width: 1600px; margin: 0 auto; padding: 0 40px; display: flex; justify-content: space-between; align-items: stretch; min-height: 300px; }
.c-footer__info { display: flex; gap: 100px; }
.c-footer__studio-name { font-size: 1.6rem; font-weight: 500; margin-bottom: 15px; letter-spacing: 0.05em; }
.c-footer__studio-desc { font-size: 1.2rem; line-height: 2; margin-bottom: 30px; color: #e0e0e0; }
.c-footer__studio-links { display: flex; flex-direction: column; gap: 12px; }
.c-footer__studio-links a { display: inline-flex; align-items: center; gap: 8px; font-size: 1.2rem; letter-spacing: 0.05em; }
.c-footer__studio-links svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.c-footer__right { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; }
.c-footer__nav { display: flex; gap: 30px; }
.c-footer__nav a {
    font-family: var(--font-en);
    font-size: 1.6rem;
    letter-spacing: 0.02em;
}
.c-footer__copyright { font-size: 1.0rem; letter-spacing: 0.05em; color: #bbb; }

/* ==========================================
   Top Page Specific (.p-top)
========================================== */
.p-top { padding-bottom: 0; }
.p-top-container { max-width: 1600px; margin: 0 auto; padding: 0 40px; }

.p-top-hero { width: 100%; }
.p-top-hero__image-wrap { width: 100%; aspect-ratio: 16 / 9; background-color: #e5e5e5; background-size: cover; background-position: center; background-image: url('../img/top_studio_park.jpg'); }

.p-top-split-section { display: flex; align-items: stretch; justify-content: space-between; margin-top: 100px; margin-bottom: 80px; width: 100%; }
.p-top-split-section--reverse { flex-direction: row-reverse; }
.p-top-split-text { flex: 0 0 50%; padding-top: 60px; padding-bottom: 60px; display: flex; flex-direction: column; justify-content: center; }
.p-top-split-section:not(.p-top-split-section--reverse) .p-top-split-text { padding-left: calc(max(40px, (100vw - 1600px) / 2 + 40px)); padding-right: 60px; }
.p-top-split-section--reverse .p-top-split-text { padding-right: calc(max(40px, (100vw - 1600px) / 2 + 40px)); padding-left: 60px; }

.p-top-split__link-wrap .c-link-btn-arrow,
.p-top-studio-banner__right .c-link-btn-arrow { font-family: var(--font-en); }

.p-top-split-img {
    flex: 1;
    background-color: #f0f0f0;
    background-size: cover;
    background-position: center;
    aspect-ratio: 4 / 3;
    background-image: url(../img/top_about.jpg);
}
.p-top-split-desc-ja { font-size: 1.4rem; line-height: 2.2; color: #111; letter-spacing: 0.05em; margin-bottom: 30px; }
.p-top-split-desc-en {
    font-family: var(--font-en);
    font-size: 1.4rem;
    line-height: 1.5;
    color: #444;
    margin-bottom: 40px;
}

.p-top-split-img--guideline { background-image: url('../img/top_guideline.jpg'); }

.p-top-gallery { position: relative; z-index: 2; margin-top: -6vw; margin-bottom: 150px; }
.p-top-gallery__grid { display: grid; grid-template-columns: repeat(24, 1fr); grid-auto-rows: 2vw; gap: 0; }
.p-top-gallery__item { background-color: #eaeaea; background-size: cover; background-position: center; will-change: transform; }
.p-top-gallery__item--1 {
    grid-column: 2 / 14;
    grid-row: 3 / 16;
    background-image: url('../img/top_gallery_01.jpg');
}
.p-top-gallery__item--2 { grid-column: 16 / 25; grid-row: 1 / 25; background-image: url('../img/top_gallery_02.jpg'); }
.p-top-gallery__item--3 { grid-column: 1 / 6; grid-row: 24 / 31; background-image: url('../img/top_gallery_03.jpg'); }
.p-top-gallery__item--4 { grid-column: 7 / 12; grid-row: 26 / 33; background-image: url('../img/top_gallery_04.jpg'); }
.p-top-gallery__item--5 { grid-column: 13 / 18; grid-row: 22 / 29; background-image: url('../img/top_gallery_05.jpg'); }
.p-top-gallery__item--6 { grid-column: 19 / 24; grid-row: 28 / 35; background-image: url('../img/top_gallery_06.jpg'); }

.p-top-studios { margin-bottom: 120px; border-top: 1px solid #ddd; padding-top: 40px; }
.p-top-studios-head { margin-bottom: 80px; }
.p-top-studio-banner { width: 100%; padding: 100px 0; }
.p-top-studio-banner--dark { background-color: var(--color-dark); color: #fff; }
.p-top-studio-banner__inner { position: relative; display: flex; align-items: center; justify-content: space-between; }
.p-top-studio-banner__left { flex: 0 0 30%; }
.p-top-studio-logo { margin-bottom: 35px; }
.p-top-studio-logo img { width: 100%; max-width: 250px; height: auto; display: block; }
.p-top-studio-banner--dark .p-top-studio-logo img {}

.p-top-studio-desc { font-size: 1.3rem; line-height: 1.8; margin-bottom: 24px; letter-spacing: 0.05em; }
.p-top-studio-tag { display: inline-block; font-size: 1.0rem; padding: 4px 18px; border: 1px solid currentColor; border-radius: 20px; letter-spacing: 0.05em; }
.p-top-studio-banner__center { position: absolute; left: 50%; transform: translateX(-50%); width: 32%; }
.p-top-studio-img { width: 100%; aspect-ratio: 16 / 9; background-color: #ddd; background-size: cover; background-position: center; }
.p-top-studio-banner--dark .p-top-studio-img { background-color: #333; }
.p-top-studio-img--park { background-image: url('../img/top_studio_park.jpg'); }
.p-top-studio-img--boku { background-image: url('../img/top_studio_boku.jpg'); }
.p-top-studio-banner__right { flex: 0 0 20%; display: flex; flex-direction: column; align-items: flex-end; gap: 15px; }

.p-top-studio-link { display: flex; align-items: center; gap: 10px; font-family: var(--font-en); font-size: 1.6rem; letter-spacing: 0.05em; }
.p-top-studio-link svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }


/* ==========================================
   Studio Details Specific (.p-studio)
========================================== */
.p-studio { position: relative; padding-bottom: 0; margin-top: -60px; }
.p-studio-container { max-width: 1600px; margin: 0 auto; padding: 0 40px; }

.c-breadcrumb {
    position: absolute;
    top: 32px;
    left: 45px;
    transform: rotate(90deg);
    transform-origin: left top;
    font-size: 1.0rem;
    font-family: var(--font-en);
    letter-spacing: 0.1em;
    color: #666;
    white-space: nowrap;
    z-index: 10;
}

.c-breadcrumb a { transition: opacity 0.3s; }
.c-breadcrumb a:hover { opacity: 0.6; }

.p-page-header { padding: 0 0 80px; text-align: center; }
.c-page-title__img { width: 100%; max-width: 320px; height: auto; display: inline-block; }
.c-page-title__img--boku { filter: invert(1); } /* STUDIO BOKU. 白ロゴ反転用 */

/* Hero */
.p-studio-hero {
    margin-bottom: 80px;
}
.p-studio-hero__content {
    display: flex;
    align-items: stretch;
    gap: 80px;
}

.p-studio-hero__left { flex: 1; display: flex; flex-direction: column; }
.p-studio-hero__main-img { width: 100%; height: 100%; object-fit: cover; background: #eee; }

/* Fixed Reserve Button */
.p-studio-fixed-btn { position: fixed; bottom: 40px; left: 50%; transform: translateX(-50%); z-index: 100; transition: opacity 0.4s ease, visibility 0.4s ease; }
.p-studio-fixed-btn.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.c-btn-reserve-pill { display: inline-flex; align-items: center; gap: 15px; background: var(--color-dark); color: #fff; padding: 8px 30px 8px 8px; border-radius: 50px; box-shadow: 0 10px 20px rgba(0,0,0,0.15); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease; text-decoration: none; }
.c-btn-reserve-pill:hover { transform: scale(1.05); box-shadow: 0 15px 25px rgba(0,0,0,0.25); opacity: 1; }
.c-btn-reserve-pill__thumb { width: 44px; height: 44px; border-radius: 50%; background-color: #333; background-size: cover; background-position: center; }
.c-btn-reserve-pill__thumb--park { background-image: url('../img/top_studio_park.jpg'); }
.c-btn-reserve-pill__thumb--boku { background-image: url('../img/top_studio_boku.jpg'); }

.c-btn-reserve-pill__text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.c-btn-reserve-pill__text-ja { font-size: 1.3rem; margin-bottom: 2px; }
.c-btn-reserve-pill__text-en { font-family: var(--font-en); font-size: 1.6rem; display: flex; align-items: center; gap: 6px; }
.c-btn-reserve-pill__text-en svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* Info & Floorplan */
.p-studio-hero__right { 
    flex: 0 0 240px; 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
}
.p-studio-info {
    margin-bottom: 40px;
}
.p-studio-info p { font-size: 1.4rem; line-height: 2; margin-bottom: 24px; letter-spacing: 0.05em; color: #111; }
.p-studio-info__links { display: flex; flex-direction: row; gap: 24px; }
.p-studio-info__links .c-link-btn-arrow { text-decoration: none; } 

.p-studio-floorplan { text-align: right; }
.p-studio-floorplan__btn {
    background: none;
    border: none;
    padding: 0;
    display: inline-block;
    width: 80%;
    text-align: right;
}
.p-studio-floorplan img { width: 100%; margin-bottom: 8px; background: #fff; display: block; }
.p-studio-floorplan span { font-family: var(--font-en); font-size: 1.4rem; display: inline-flex; align-items: center; gap: 6px; color: var(--color-text); transition: opacity 0.3s; }
.p-studio-floorplan__btn:hover span { opacity: 0.7; }
.p-studio-floorplan span svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.5; fill: none; }

/* Desc Section */
.p-studio-desc {
    margin-bottom: 80px;
}
.p-studio-desc__content {
    /* display: grid; */
    /* grid-template-columns: 1fr 1fr; */
    /* gap: 80px; */
    /* align-items: start; */
}
.p-studio-desc__img-main img { width: 100%; height: auto; background: #eee; display: block; }
.p-studio-desc__text {
    font-size: 1.4rem;
    line-height: 2.2;
    letter-spacing: 0.05em;
    color: #111;
    padding-top: 10px;
    text-align: center;
}
.p-studio-desc__title { font-size: 1.6rem; font-weight: 500; margin-bottom: 40px; letter-spacing: 0.1em; color: #111; }
.p-studio-desc__poem {
    margin-bottom: 24px;
    font-size: 1.2rem;
}

/* Gallery Section */
.p-studio-gallery__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 80px 20px; }
@media (max-width: 1100px) { .p-studio-gallery__grid { grid-template-columns: repeat(4, 1fr); gap: 60px 16px; } }
@media (max-width: 900px) { .p-studio-gallery__grid { grid-template-columns: repeat(3, 1fr); gap: 40px 16px; } }

.p-studio-gallery__item { background: none; border: none; padding: 0; text-align: left; display: block; width: 100%; }
.p-studio-gallery__img-wrap { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: #f4f4f4; margin-bottom: 12px; }
.p-studio-gallery__img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; display: block; }
.p-studio-gallery__overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.25); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.4s ease; }
.p-studio-gallery__overlay svg { width: 36px; height: 36px; color: #fff; transform: scale(0.8); transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.p-studio-gallery__item:hover .p-studio-gallery__img-wrap img { transform: scale(1.05); }
.p-studio-gallery__item:hover .p-studio-gallery__overlay { opacity: 1; }
.p-studio-gallery__item:hover .p-studio-gallery__overlay svg { transform: scale(1); }
.p-studio-gallery__caption { font-family: var(--font-en); font-size: 1.3rem; letter-spacing: 0.05em; color: #555; }


/* ==========================================
   Modal (Lightbox)
========================================== */
.c-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100dvh; z-index: 10000; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; }
.c-modal.is-active { opacity: 1; visibility: visible; }
.c-modal__bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); cursor: pointer; }
.c-modal__content { position: relative; z-index: 1; max-width: 90%; max-height: 90vh; }
.c-modal__content img { max-width: 100%; max-height: 90vh; object-fit: contain; display: block; border-radius: 4px; box-shadow: 0 10px 40px rgba(0,0,0,0.5); background: #fff; }
.c-modal__close { position: absolute; top: -40px; right: -20px; color: #fff; font-size: 3.6rem; line-height: 1; background: transparent; border: none; cursor: pointer; transition: opacity 0.3s; padding: 10px; }
.c-modal__close:hover { opacity: 0.7; }




/* ==========================================
           Guide Page Specific
        ========================================== */

.c-fixed-left {
position: fixed;
top: 40px;
left: 40px;
z-index: 1000;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 48px;
}
        
        .c-fixed-left .c-fixed-logo {
            position: static;
            mix-blend-mode: normal; /* 背景色に影響されて薄くなるのを防ぐ */
            filter: none !important; /* 共通CSSの白反転を解除して確実に黒表示にする */
        }
        
        .c-fixed-logo--lower img {
            width: 160px !important;
            filter: none; 
        }

        .c-fixed-left .c-breadcrumb {
            position: static;
            transform: none; /* 回転せず横並びに */
            font-size: 1.0rem;
            font-family: var(--font-en);
            letter-spacing: 0.1em;
            color: #666;
            display: flex;
            align-items: center;
            gap: 8px;
            margin: 0;
            white-space: nowrap;
        }

        /* --- Page Header & Layout --- */
        .p-guide { position: relative; padding-bottom: 0; margin-top: -40px; }

        .p-guide__inner {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 40px;
            display: flex;
            align-items: flex-start;
            gap: 120px;
        }

.p-guide__sidebar {
    flex: 0 0 180px;
    position: sticky;
    top: 240px;
}

        .p-guide__nav li { margin-bottom: 24px; }
        .p-guide__nav a {
            font-size: 1.4rem;
            position: relative;
            padding-left: 20px;
            color: #111;
            letter-spacing: 0.05em;
            transition: opacity 0.3s;
        }
        .p-guide__nav a:hover { opacity: 0.6; }
        .p-guide__nav a::before {
            content: "";
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background-color: #111;
        }

        /* --- Content Area --- */
        .p-guide__content { 
            flex: 1; 
            min-width: 0; 
            width: 100%;
        }

        .c-page-title__en { display: block; font-family: var(--font-en); font-size: 6.4rem; font-weight: 400; line-height: 1; margin-bottom: 8px; color: #111; }
        .c-page-title__ja { display: block; font-size: 1.2rem; letter-spacing: 0.1em; color: #111; }
        
        .p-guide-sec { margin-bottom: 120px; }
        
        .p-guide-sec-title { 
            display: flex; 
            align-items: baseline; 
            gap: 20px; 
            margin-bottom: 40px; 
            border-bottom: none; 
            padding-bottom: 0;
        }
        .p-guide-sec-title__en { font-family: var(--font-en); font-size: 4.0rem; line-height: 1; }
        .p-guide-sec-title__ja { font-size: 1.2rem; letter-spacing: 0.1em; font-weight: 500; color: #111; }

        /* Flow (ご予約の流れ) */
        .p-guide-flow__header { 
            display: flex; 
            justify-content: space-between; 
            align-items: flex-end; 
            margin-bottom: 30px;
        }
        .p-guide-flow__arrows { display: flex; gap: 12px; }
        .p-guide-flow__arrow { 
            width: 32px; 
            height: 32px; 
            border-radius: 50%; 
            border: 1px solid #e0e0e0; 
            background: transparent; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            transition: background 0.3s, border-color 0.3s, color 0.3s;
        }
        .p-guide-flow__arrow:hover { background: #111; border-color: #111; color: #fff; }
        .p-guide-flow__arrow svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }

        .p-guide-flow__scroll { 
            display: flex; 
            gap: 24px; 
            overflow-x: auto; 
            padding-bottom: 20px;
            scrollbar-width: none; 
            margin-right: calc(-1 * (max(0px, (100vw - 1400px) / 2) + 40px));
            padding-right: calc(max(0px, (100vw - 1400px) / 2) + 40px);
        }
        .p-guide-flow__scroll::-webkit-scrollbar { display: none; }
        
        .p-guide-flow__item {
            flex: 0 0 320px;
            border: 1px solid #ddd;
            padding: 40px 30px;
            background: #fff;
        }
        .p-guide-flow__step {
            font-family: var(--font-en);
            font-size: 2.2rem;
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 24px;
        }
        .p-guide-flow__line { flex: 1; border-top: 1px dashed #bbb; }

        /* テキスト折り返し・改行崩れ対策 */
        .p-guide-flow__text, .p-guide-notice__text, .p-guide-faq__a { 
            font-size: 1.3rem; 
            line-height: 1.8; 
            color: #444; 
            letter-spacing: 0.05em; 
            overflow-wrap: anywhere; 
            word-wrap: break-word; 
        }

        /* Notice (ご注意) */
        .p-guide-notice__item { margin-bottom: 40px; }
        .p-guide-notice__title { font-size: 1.5rem; font-weight: 500; margin-bottom: 16px; letter-spacing: 0.05em; }
        .p-guide-alert { color: #d32f2f; font-size: 1.2rem; line-height: 1.8; margin-top: 50px; letter-spacing: 0.05em; }

        /* FAQ (よくあるご質問) */
        .p-guide-faq__list { border-top: 1px solid #ddd; }
        .p-guide-faq__item { border-bottom: 1px solid #ddd; }
        .p-guide-faq__q {
            padding: 30px 0;
            font-size: 1.5rem;
            font-weight: 500;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            letter-spacing: 0.05em;
            margin: 0;
        }
        .p-guide-faq__q .c-acc-icon { margin-left: auto; width: 12px; height: 12px; flex-shrink: 0; }
        .p-guide-faq__q .c-acc-icon::before { width: 12px; }
        .p-guide-faq__q .c-acc-icon::after { height: 12px; }
        
        .p-guide-faq__item.is-open .c-acc-content { max-height: 500px; opacity: 1; padding-bottom: 30px; }
        .p-guide-faq__a { margin: 0; }



/* ==========================================
   Responsive (Smartphone)
========================================== */
@media (max-width: 768px) {
    .u-hidden-sp { display: none !important; }

    /* Common */
    .c-header { padding: 20px 20px 0; }
    .c-header__top { margin-bottom: 80px; } 
    .c-header__nav { display: none; }
    .c-header__catch { margin-top: 120px; }

    .c-fixed-logo { top: 20px; left: 20px; }
    .c-fixed-logo img { width: 180px; }
    body.is-scrolled .c-fixed-logo img { width: 120px; }

    .c-hamburger { top: 20px; right: 20px; opacity: 1; pointer-events: auto; } 
    
    .c-drawer { top: 0; left: 0; right: 0; width: 100%; height: 100vh; height: 100dvh; padding: 160px 20px 40px; border-radius: 0; box-shadow: none; align-items: flex-start; justify-content: flex-start; transform: none; }
    .c-drawer__nav { text-align: left; gap: 20px; }
    .c-drawer__nav a { font-size: 2.4rem; } 
    .c-drawer__nav .c-acc-content a { font-size: 1.6rem; }

    .c-marquee__text { font-size: 6.4rem; } 

    .c-footer { padding: 60px 0; background-image: none !important; }
    .c-footer::before { display: none; } 
    .c-footer__inner {
    flex-direction: column;
    gap: 50px;
    min-height: auto;
    padding: 0 20px;
}
    .c-footer__info { flex-direction: column; gap: 40px; }
    .c-footer__right { align-items: flex-start; gap: 30px; }
    .c-footer__nav { display: none; }

    /* Top Page */
    .p-top { margin-top: 40px; padding-bottom: 0; }
    .c-section-title__en { font-size: 4.5rem; }
    .p-top-container { padding: 0 20px; }
    .p-top-hero__image-wrap { aspect-ratio: 4 / 4; }
    .p-top-split-section { flex-direction: column; margin-top: 60px; margin-bottom: 60px; }
    .p-top-split-section--reverse { flex-direction: column; }
    .p-top-split-section:not(.p-top-split-section--reverse) .p-top-split-text,
    .p-top-split-section--reverse .p-top-split-text { padding: 40px 20px; width: 100%; }
    .p-top-split-img { width: 100%; aspect-ratio: 2 / 1; min-height: auto; }
    .p-top-gallery { margin-top: 40px; margin-bottom: 80px; overflow: hidden; }
    .p-top-gallery__grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; gap: 20px; padding: 0 20px; }
    .p-top-gallery__item { grid-column: auto !important; grid-row: auto !important; aspect-ratio: 1; transform: none !important; }
    .p-top-gallery__item:nth-child(even) { margin-top: 40px; }
    .p-top-gallery__item:nth-child(odd) { margin-bottom: 40px; }
    
    .p-top-studios { margin-bottom: 80px; padding-top: 60px; }
    .p-top-studios-head { margin-bottom: 40px; }
    .p-top-studio-banner { padding: 60px 0; }
    .p-top-studio-banner__inner { position: static; display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
    .p-top-studio-banner__left { width: 100%; flex: auto; order: 1; margin-bottom: 20px; }
    .p-top-studio-banner__right { width: 100%; flex: auto; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: 20px; order: 2; margin-bottom: 30px; }
    .p-top-studio-banner__center { position: static; transform: none; width: 100%; flex: auto; order: 3; }

    /* Studio Details Page */
    .p-studio { margin-top: 0; }
    .p-studio-container { padding: 0 20px; }
    .c-breadcrumb { display: none; } /* スマホ時はパンくず非表示 */
    .p-page-header { padding: 40px 0 60px; }
    .c-page-title__img { max-width: 240px; }

    .p-studio-hero { margin-bottom: 80px; }
    .p-studio-hero__content { flex-direction: column; gap: 40px; }
    .p-studio-hero__right { width: 100%; flex: auto; padding-top: 0; flex-direction: row; align-items: flex-end; gap: 20px; }
    .p-studio-info { margin-bottom: 0; flex: 1; }
    .p-studio-floorplan { flex: 0 0 120px; }

.p-studio-fixed-btn {
    bottom: 30px;
    width: max-content;
}
    .p-studio-desc { margin-bottom: 80px; }
    .p-studio-desc__content { grid-template-columns: 1fr; gap: 40px; }

    .p-studio-gallery { margin-bottom: 0; }
    .p-studio-gallery__grid { grid-template-columns: repeat(2, 1fr); gap: 30px 16px; }
    
    .c-modal__close { right: 0; top: -50px;}




    

   /* ヘッダー消滅（高さ潰れ）対策 */
   .c-header--lower { min-height: 80px; }

   .c-fixed-left { top: 20px; left: 20px; gap: 8px; }
   .c-fixed-logo--lower img { width: 120px !important; }
   .c-fixed-left .c-breadcrumb { display: none; }
   
   .p-guide { margin-top: 0; }
   .p-page-header { padding: 40px 0 60px; }
   .c-page-title__en { font-size: 4.8rem; } 

   .p-guide__inner { flex-direction: column; gap: 40px; padding: 0 20px; }
   
   .p-guide__sidebar { position: static; flex: auto; width: 100%; border-bottom: 1px solid #ddd; padding-bottom: 20px; }
   .p-guide__nav { display: flex; flex-wrap: wrap; gap: 16px; }
   .p-guide__nav li { margin-bottom: 0; }

   .p-guide-sec { margin-bottom: 80px; }
   .p-guide-sec-title__en { font-size: 3.2rem; }
   
   .p-guide-flow__header { flex-direction: row; align-items: center; justify-content: space-between; margin-bottom: 20px; }
   .p-guide-flow__scroll { margin-right: -20px; padding-right: 20px; gap: 16px; }
   .p-guide-flow__item { flex: 0 0 280px; padding: 30px 20px; }
   .p-guide-flow__step { font-size: 1.8rem; margin-bottom: 16px; }
   
   .p-guide-notice__item { margin-bottom: 30px; }
   
   .p-guide-faq__q { font-size: 1.3rem; padding: 20px 0; }

.p-studio-desc__text {
    text-align: left;
}

}