/*
Theme Name: GeneratePress Child
Theme URI: https://generatepress.com
Description: GeneratePress の子テーマ。カスタムスタイルや機能はここに追加してください。
Author: 
Author URI: 
Template: generatepress
Version: 1.0.33
Requires at least: 6.1
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: generatepress-child
*/

/* カスタムスタイルはこの下に記述 */
/* ================================================
   FORM / CULTURE — Editorial Fashion Platform
   Typography as Identity / 2026
   ================================================ */

/* ================================================
   RESET & BASE
   ================================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

:root {
    --black: #0a0a0a;
    --black-deep: #101010;
    --white: #F0F0F0;
    --white-trans: #F0F0F0d0;
    --white-pure: #fff;
    --gray-muted: #dcdcdc;
    --border-light: #f8f8f8;
    --border-dark: #909090;
    --font-bebas: 'Bebas Neue', sans-serif;
    --font-work-sans: 'Work Sans', sans-serif;
    --font-anton: 'Anton', sans-serif;
    --font-mincho: 'Shippori Mincho', 'Yu Mincho', 'Hiragino Mincho ProN', 'MS PMincho', serif;
    --transition-sharp: 0.2s cubic-bezier(0.4, 0, 0.6, 1);
    --transition-snap: 0.15s cubic-bezier(0.8, 0, 0.2, 1);
    --transition-smooth: 0.3s ease;
    --ease-out-snap: cubic-bezier(0.8, 0, 0.2, 1);
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--white);
    color: var(--black);
    line-height: 1.2;
    overflow-x: hidden;
    cursor: default;
    filter: none!important;
}

a,
a:hover,
a:visited,
a:active {
    color: inherit;
    text-decoration: none;
}

.text-white {
    color: var(--white);
}
.text-black {
    color: var(--black);
}
.bg-white {
    background-color: var(--white);
}
.bg-black {
    background-color: var(--black);
}

/* タイトル用フォント（Bebas Neue）のユーティリティ */
.font-title {
    font-family: var(--font-bebas);
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

.site-main {
    padding: 0 2rem;
}
.home .site-main {
    padding: 0;
}
@media screen and (max-width: 767px) {
    .site-main {
        padding: 0;
    }
}

.separate-containers .inside-article, .separate-containers .comments-area, .separate-containers .page-header, .one-container .container, .separate-containers .paging-navigation, .inside-page-header{
    color: var(--black);
    background: var(--white);
}

/* Work single: コンテナ幅を 1200px に制限 */
.single-work .container.grid-container {
    max-width: 1200px;
}

.work-single-hero {
    margin-top: 2rem;
}

.work-single-content.entry-content {
    line-height: 2;
    max-width: 1050px;
    margin: 3rem auto;
}

.work-single-content p {
    letter-spacing: 0.02em;
}

.work-single-footer {
    padding-top: 2rem;
    text-align: center;
    position: relative;
}
.work-single-footer::before {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background-color: var(--border-dark);
    margin-bottom: 2rem;
    transform-origin: left;
    transform: scaleX(0.8) translateX(10%);
    opacity: 0;
    animation: entry-header-line .6s ease-out forwards 0.8s;
}
.work-single-footer .archive-link {
    font-size: 1rem;
    padding: 0.75rem 1.5rem;
    color: var(--black);
}

.work-single-title.entry-title {
    margin-bottom: 0.5rem;
}
.inside-article a, .paging-navigation a, .comments-area a, .page-header a{
    color: var(--black);
}
.header-wrap #site-navigation:not(.toggled) .main-nav > ul > li:hover > a, .header-wrap #site-navigation:not(.toggled) .main-nav > ul > li:focus > a, .header-wrap #site-navigation:not(.toggled) .main-nav > ul > li.sfHover > a, .header-wrap #mobile-header:not(.toggled) .main-nav > ul > li:hover > a,
.header-wrap #site-navigation:not(.toggled) .main-nav > ul > li[class*="current-menu-"] > a, .header-wrap #mobile-header:not(.toggled) .main-nav > ul > li[class*="current-menu-"] > a, .header-wrap #site-navigation:not(.toggled) .main-nav > ul > li[class*="current-menu-"]:hover > a, .header-wrap #mobile-header:not(.toggled) .main-nav > ul > li[class*="current-menu-"]:hover > a{
    color: var(--black);
}
h1,h2,h3,h4,h5{
    color: var(--black);
}
.entry-header h1, .page-header h1{
    color: var(--black);
}
.entry-header{
    position: relative;
}
.entry-header::after{
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background-color: var(--border-dark);
    position: absolute;
    bottom: -2rem;
    left: 0;
    transform-origin: left;
    transform: scaleX(0.8) translateX(10%);
    opacity: 0;
    animation: entry-header-line .6s ease-out forwards 0.8s;
}

@keyframes entry-header-line {
    to {
        opacity: 1;
        transform: scaleX(1) translateX(0);
    }
}


.one-container .site-content{
    padding-top: 80px;
}

.entry-title{
    font-family: var(--font-bebas);
    font-size: clamp(3rem, 7vw, 6rem);
    letter-spacing: 0.02em;
    line-height: 0.9;
    margin:2rem 0 4rem 0;
}

/* ================================================
   NAVIGATION
   ================================================ */
.header-wrap .navigation-branding, .header-wrap .site-logo.mobile-header-logo{
    margin-right:0;
}
.main-navigation.has-branding .inside-navigation{
    justify-content:space-between;
}
.inside-navigation.grid-container:before,
.inside-navigation.grid-container:after{
    display:none;
}
.header-wrap {
    transition: background var(--transition-smooth), border-color var(--transition-smooth);
}

.header-wrap #site-navigation:not(.toggled) .main-nav > ul > li > a,
.header-wrap #mobile-header:not(.toggled):not(.navigation-stick) .main-nav > ul > li > a,
.header-wrap .main-navigation:not(.toggled):not(.navigation-stick) .menu-toggle,
.header-wrap .main-navigation:not(.toggled):not(.navigation-stick) .menu-toggle:hover,
.main-navigation:not(.toggled):not(.navigation-stick) .mobile-bar-items a,
.main-navigation:not(.toggled):not(.navigation-stick) .mobile-bar-items a:hover,
.main-navigation:not(.toggled):not(.navigation-stick) .mobile-bar-items a:focus{
    color: var(--black);
}
.home .header-wrap #site-navigation:not(.toggled) .main-nav > ul > li > a{
    color:var(--white);
}

.home .header-at-top.header-wrap .main-navigation:not(.toggled):not(.navigation-stick) .menu-toggle,
.home .header-at-top.header-wrap .main-navigation:not(.toggled):not(.navigation-stick) .menu-toggle:hover{
    color:var(--white);
}

.home .header-at-top .site-logo.mobile-header-logo img{
    filter: invert(0);
}


/* ファーストビュー：背景・ボーダー透過 */
.home .header-wrap.header-at-top #site-navigation:not(.toggled),
.home .header-wrap.header-at-top #mobile-header:not(.toggled):not(.navigation-stick),
.home .has-inline-mobile-toggle .header-wrap.header-at-top .mobile-menu-control-wrapper{
    background: transparent !important;
}
.home .header-wrap.header-at-top {
    border-bottom-color: transparent;
}
.header-wrap #site-navigation:not(.toggled),
.header-wrap #mobile-header:not(.toggled):not(.navigation-stick),
.has-inline-mobile-toggle .mobile-menu-control-wrapper {
    background: var(--white-pure);
    transition: background var(--transition-smooth);
}

/* ================================================
   ARCHIVE INFINITE SCROLL
   ================================================ */
.archive-pagination.is-infinite-scroll .pagination,
.archive-pagination.is-infinite-scroll .nav-links {
    display: none;
}

.archive-pagination.is-infinite-scroll.is-loading::after {
    content: 'LOADING...';
    display: block;
    margin: 2rem auto 0;
    text-align: center;
    font-family: var(--font-bebas);
    letter-spacing: 0.15em;
    font-size: 0.9rem;
}
.navigation-branding img,
.site-logo.mobile-header-logo img {
    filter: invert(1);
}
.main-navigation,
.main-navigation ul ul {
    background: var(--white-pure);
}
.main-navigation {
    transition: transform 0.8s ease, background 0.6s ease;
    min-height: 60px;
}
.home .header-at-top .main-navigation{
    background: transparent !important;
}
/* 下スクロール時：ヘッダーを上に隠す（背景は透明のまま） */
.header-wrap.header-hidden #site-navigation:not(.toggled),
.header-wrap.header-hidden #mobile-header:not(.toggled):not(.navigation-stick),
.has-inline-mobile-toggle .header-wrap.header-hidden .mobile-menu-control-wrapper {
    background: transparent !important;
}
.header-wrap.header-hidden {
    border-bottom-color: transparent;
}
.header-hidden .main-navigation {
    transform: translateY(-200px);
    background: transparent !important;
}
.home .sticky-enabled .header-at-top .main-navigation.is_stuck{
    box-shadow: none;
}

.home .header-at-top .navigation-branding img {
    filter: invert(0);
}
/* 隠れるときもロゴを白のまま */
.header-wrap.header-hidden .navigation-branding img,
.header-wrap.header-hidden .site-logo.mobile-header-logo img {
    filter: invert(0);
}
.home .header-at-top .main-nav > ul > li > a,
.home .header-at-top #primary-menu a,
.home .header-at-top #menu-main-1 a {
    color: var(--white-pure);
}
.home .header-at-top.header-wrap #site-navigation:not(.toggled) .main-nav > ul > li:hover > a, 
.home .header-at-top.header-wrap #site-navigation:not(.toggled) .main-nav > ul > li:focus > a, 
.home .header-at-top.header-wrap #site-navigation:not(.toggled) .main-nav > ul > li.sfHover > a, 
.home .header-at-top.header-wrap #mobile-header:not(.toggled) .main-nav > ul > li:hover > a, 
.home .header-at-top.header-wrap #site-navigation:not(.toggled) .main-nav > ul > li[class*="current-menu-"] > a, 
.home .header-at-top.header-wrap #mobile-header:not(.toggled) .main-nav > ul > li[class*="current-menu-"] > a, 
.home .header-at-top.header-wrap #site-navigation:not(.toggled) .main-nav > ul > li[class*="current-menu-"]:hover > a, 
.home .header-at-top.header-wrap #mobile-header:not(.toggled) .main-nav > ul > li[class*="current-menu-"]:hover > a{
    color: var(--white-pure);
}


.main-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 0;
    min-height: 60px;
    z-index: 1000;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    order: 1;
}

.logo-image {
    height: 48px;
    width: auto;
    display: block;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.logo-image:hover {
    transform: scale(1.05);
}

.logo-text {
    font-family: var(--font-bebas);
    font-size: 1.5rem;
    font-weight: 400;
    letter-spacing: 0.15em;
    color: var(--black);
    line-height: 1;
    margin-top: 2px;
    transition: letter-spacing 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-logo:hover .logo-text {
    letter-spacing: 0.2em;
}

.nav-menu {
    display: flex;
    gap: 3rem;
    order: 3;
}

.nav-link {
    font-family: var(--font-work-sans);
    font-weight: 900;
    font-size: 0.9rem;
    letter-spacing: 0.1em;
    position: relative;
    transition: var(--transition-sharp);
}

.nav-link:hover {
    transform: translateY(-2px);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--black);
    transition: var(--transition-snap);
}

.nav-link:hover::after {
    width: 100%;
}

#mobile-menu{
    display: none;
}
.menu-toggle .mobile-menu{
    display: none;
}

/* モバイルメニューボタン：タップ時の青いハイライトを無効化 */
#mobile-header .menu-toggle {
    -webkit-tap-highlight-color: transparent;
}
#mobile-header .menu-toggle:focus {
    outline: none;
}

@media screen and (max-width: 768px) {
    .main-navigation .main-nav ul li a, 
    .main-navigation .main-nav ul li a:hover, 
    .main-navigation .main-nav ul li a:focus, 
    .main-navigation .main-nav ul li a:active{
        color: var(--black)!important;
    }

    body #mobile-header{
        width: 100vw!important;
    }

}
.main-navigation .menu-toggle, 
.main-navigation .menu-bar-items,
.main-navigation .main-nav ul li[class*="current-menu-"] > a,
.slide-opened .slideout-exit:not(.has-svg-icon):before, 
.slideout-navigation button.slideout-exit:not(.has-svg-icon):before{
    color: var(--black);
}
.slideout-navigation.main-navigation .main-nav ul li a{
    text-transform: uppercase!important;
    font-weight: 600!important;
}

/* GeneratePress primary menu（#primary-menu / #menu-main-1） */
#primary-menu {
    display: flex;
    justify-content: flex-end;
}
#primary-menu,
#primary-menu a,
#menu-main-1,
#menu-main-1 a {
    color: var(--black);
}

/* スクロール後（FV以外）のときだけメニューを黒に */
.header-wrap:not(.header-at-top) #site-navigation:not(.toggled) .main-nav > ul > li > a {
    color: var(--black);
}

/* 隠れるときは文字を白のまま（上記の黒より優先） */
.header-wrap.header-hidden .main-nav > ul > li > a,
.header-wrap.header-hidden #primary-menu a,
.header-wrap.header-hidden #menu-main-1 a {
    color: var(--white-pure);
}

/* Hamburger Menu (Mobile) */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 28px;
    height: 21px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
    position: relative;
}

.hamburger-line {
    width: 100%;
    height: 3px;
    background-color: var(--black);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

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

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

/* Mobile Menu Overlay */
.menu-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.menu-overlay.active {
    display: block;
    opacity: 1;
}

/* ================================================
   HERO SECTION
   ================================================ */
.hero-section {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 0 2rem;
    margin-top: 0px;
    overflow: hidden;
    min-height: 50vw;
}

/* Hero Video Background - 全画面を覆う（hero-sectionが100vhのため100%で全画面） */
.hero-video-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    z-index: 0;
    overflow: hidden;
    background-image: url(./assets/img/fv-bgv.gif);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hero-video-wrapper::after {
    content: '';
    display: block;
    position: absolute;
    top: -5%;
    left: -5%;
    width: 110%;
    height: 110%;
    z-index: 0;
    background-image: url(./assets/img/fv-bgv.gif);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: brightness(0.5) invert(1) blur(4px);
    opacity: 0.5;
    transition: all 1.2s ease-out;
}

.video-loaded .hero-video-wrapper::after {
    top: 0px;
    left: 0px;
    opacity: 0.0;
}

.hero-video-vimeo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 56.25vw; /* 16:9 ratio */
    min-height: 100%;
    min-width: 177.77vh; /* 16:9 ratio */
    transform: translate(-50%, -50%) scale(1.1);
    pointer-events: none;
    filter: grayscale(100%) contrast(1.2);
    border: none;
}

.hero-video-youtube {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 56.25vw; /* 16:9 ratio */
    min-height: 100%;
    min-width: 177.77vh; /* 16:9 ratio */
    transform: translate(-50%, -50%) scale(1.1);
    pointer-events: none;
    filter: grayscale(100%) contrast(1.2);
    border: none;
}

.hero-video-youtube iframe {
    width: 100%;
    height: 100%;
    pointer-events: none;
    border: none;
}

.hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
    filter: grayscale(100%) contrast(1.2);
}

.hero-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.05) 0%,
        rgba(255, 255, 255, 0.10) 50%,
        rgba(255, 255, 255, 0.05) 100%
    );
    mix-blend-mode: normal;
    z-index: 1;
    pointer-events: none;
}

/* Hero Grid - メニュー領域(60px)にかぶらないように上余白を確保 */
.hero-grid {
    width: 100%;
    max-width: 1600px;
    position: relative;
    z-index: 2;
    padding: 10px 3rem 0 3rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
    align-items: center;
}

.hero-typography {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Hero Magazine Cover */
.hero-magazine {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 52vh;
    width: 34vw;
    margin-left: auto;
}

.hero-magazine-label {
    font-family: var(--font-bebas);
    font-size: 0.85rem;
    letter-spacing: 0.15em;
    font-weight: 700;
    text-align: center;
}

/* Latest Issue Badge - Bold & Blinking */
.latest-issue-badge {
    font-weight: 900;
    font-size: clamp(0.8vh, 0.8vw, 1rem);
    letter-spacing: 0.2em;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--white);
    color: var(--black);
    border: 3px solid var(--white);
    position: absolute;
    top: 0;
    right: 0;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
    margin-top: 1rem;
    text-align: center;
    width: 100px;
    max-width: 24%;
    aspect-ratio: 4/3;
    border: 1px solid var(--gray-muted);
    opacity: 0;
    transform: translateX(30px);
    transition: transform 0.6s ease 0.5s, opacity 0.6s ease 0.5s;
}

.video-loaded .latest-issue-badge{
    opacity: 1;
    transform: translateX(0);
}

.video-loaded .hero-magazine-cover-link:hover .latest-issue-badge{
    opacity: 0;
    transition-delay: 0s;
}

/* Pulse Glow Animation */
@keyframes pulseGlow {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
    }
    50% {
        opacity: 0.85;
        transform: scale(1.05);
        box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
    }
}

.hero-magazine-cover-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.hero-magazine-cover {
    position: relative;
    width: 100%;
    aspect-ratio: 2/3;
    overflow: hidden;
    border: 1px solid var(--black);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

.hero-cover-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease
}

.hero-magazine-cover:hover .hero-cover-image {
    transform: scale(1.05);
    transition: transform 3.5s linear
}

.hero-magazine-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, transparent 100%);
    padding: 1.5rem;
    color: var(--white);
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) .2s;
}

.hero-magazine-cover:hover .hero-magazine-info {
    opacity: 1;
    transform: translateY(0);
}

.hero-magazine-number {
    font-family: var(--font-bebas);
    font-size: 0.95rem;
    letter-spacing: 0.1em;
    margin-bottom: 0.3rem;
}

.hero-magazine-title {
    font-family: var(--font-anton);
    font-size: 2rem;
    line-height: 1;
    margin-bottom: 0.3rem;
}

.hero-magazine-credit {
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    opacity: 0.8;
}

.hero-title {
    font-family: var(--font-anton);
    font-size: clamp(6rem, 14vw, 20vh);
    line-height: 0.85;
    letter-spacing: -0.02em;
    font-weight: 400;
    overflow: hidden;
    text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.3);
}

.hero-line {
    display: block;
    opacity: 0;
    transform: translateX(-100%);
    white-space: nowrap;
    overflow: hidden;
    color: var(--white-pure);
}

.video-loaded .hero-line{
    animation: slideInHero 1s cubic-bezier(0.8, 0, 0.2, 1) forwards;
} 

.hero-line:nth-child(1) { animation-delay: 0.12s; }
.hero-line:nth-child(2) { animation-delay: 0.8s; }
.hero-line:nth-child(3) { transform: translateX(100%);animation-delay: 0.1s; }

@keyframes slideInHero {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.hero-statement {
    margin: 2rem 0 0 1rem;
    font-weight: 400;
    font-size: 1.5rem;
    letter-spacing: -0.02em;
    opacity: 0;
    max-width: 480px;
    color: var(--white-pure);
}
.video-loaded .hero-statement{
    animation: fadeIn 1s ease forwards 1.7s;
}
@keyframes fadeIn {
    to { opacity: 1; }
}

.scroll-indicator {
    position: absolute;
    bottom: 4rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    font-size: 0.8rem;
    font-weight: 400;
    letter-spacing: 0.2em;
    z-index: 10;
    color: var(--white-pure);
    cursor: pointer;
    pointer-events: auto;
}

.scroll-line {
    position: relative;
    width: 2px;
    height: 60px;
    overflow: hidden;
}

.scroll-line::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 2px;
    height: 20px;
    background-color: var(--white-pure);
    animation: scrollPulse 1.8s ease infinite;
}

@keyframes scrollPulse {
    0% {
        top: 0;
        opacity: 1;
        height: 0px;
    }
    50%{
        height: 24px;
    }
    100% {
        top: 100%;
        transform: translateY(-100%);
        height: 0px;
        opacity: 0.3;
    }
}

/* ================================================
   SECTION COMMON
   ================================================ */
section {
    padding: 10rem 4rem;
}

.section-header {
    margin-bottom: 6rem;
}

.section-title {
    font-family: var(--font-bebas);
    font-size: clamp(4rem, 10vw, 10rem);
    letter-spacing: 0.02em;
    line-height: 0.9;
}

.section-subtitle {
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    margin-top: 1rem;
}
@media (max-width: 767px) {
    .section-header {
        margin-bottom: 2rem;
    }
}

/* ================================================
   MAGAZINE SECTION
   ================================================ */
.magazine-item {
    position: relative;
    cursor: pointer;
    padding: 0 8px;
    transition: var(--transition-sharp);
    flex: 0 0 calc(33.333% - 2rem);
    scroll-snap-align: start;
    user-select: none;
}

.slick-prev,
.slick-next {
    z-index: 10;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--black);
    border: none;
    border-radius: 0;
    transition: var(--transition-sharp);
}
.slick-prev:hover,
.slick-next:hover {
    background: var(--black);
    opacity: 0.85;
}
.slick-prev:focus,
.slick-next:focus,
.slick-prev:focus-visible,
.slick-next:focus-visible {
    background: var(--black);
}
.slick-prev::before,
.slick-next::before {
    content: '';
    display: block;
    width: 0.75rem;
    height: 0.75rem;
    margin: 0 auto;
    border-bottom: 2px solid currentColor;
}
.slick-prev::before {
    border-left: 2px solid currentColor;
    transform: rotate(45deg);
}
.slick-next::before {
    border-right: 2px solid currentColor;
    transform: rotate(-45deg);
}
.slick-prev { left: 1rem; }
.slick-next { right: 1rem; }

.magazine-cover {
    width: 100%;
    aspect-ratio: 3/4;
    background-color: var(--black);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    border: 3px solid var(--black);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.magazine-cover-title {
    font-family: var(--font-anton);
    font-size: clamp(4rem, 8vw, 12rem);
    color: var(--white);
    z-index: 2;
    letter-spacing: -0.02em;
}

.work-cover {
    width: 100%;
    height:auto;
    aspect-ratio: 4/3;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}
.work-cover-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(0, 0, 0, 0.75);
    color: var(--white-pure, #fff);
    opacity: 0;
    transition: opacity 0.35s ease;
    text-align: center;
}
.work-archive-item:hover .work-cover-overlay {
    opacity: 1;
}
.work-cover-overlay-category {
    font-family: var(--font-anton);
    font-size: clamp(2rem, 5vw, 4rem);
    letter-spacing: -0.02em;
    color: inherit;
}

.magazine-info {
    margin-top: 1rem;
}

.magazine-title-line {
    font-family: var(--font-anton);
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    gap: 0.5rem;
}

.magazine-number {
    /* Remove this class - no longer used */
    display: none;
}

.magazine-date {
    font-family: var(--font-bebas);
    font-size: 1.8rem;
    letter-spacing: 0.05em;
    font-weight: 400;
}

.magazine-title {
    font-size: 1.5rem;
    font-weight: 400;
    letter-spacing: 0.05em;
}

.magazine-subtitle {
    font-family: var(--font-anton);
    font-size: 1.5rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: var(--black);
    text-transform: none;
}

/* Archive section: View All button - centered, black bg, white text */
.magazine-section .section-footer,
.works-section .section-footer,
.work-archive-section .section-footer {
    text-align: center;
    margin-top: 3rem;
}

.magazine-section .section-footer-btn,
.works-section .section-footer-btn,
.work-archive-section .section-footer-btn {
    display: inline-block;
    padding: 1rem 2.5rem;
    background-color: var(--black);
    color: var(--white-pure);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: opacity var(--transition-sharp);
}

.magazine-section .section-footer-btn:hover,
.work-archive-section .section-footer-btn:hover {
    opacity: 0.85;
    color: var(--white-pure);
}

.archive-link-wrapper {
    text-align: center;
    margin-top: 6rem;
}

.archive-link {
    font-size: 1.2rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    display: inline-block;
    padding: 1.5rem 3rem;
    border: 3px solid var(--black);
    transition: var(--transition-snap);
}

.archive-link:hover {
    background-color: var(--black);
    color: var(--white);
}

/* Magazine Archive (CPT archive page) */
.work-archive-section,
.magazine-archive-section {
    padding: 0 0 6rem;
}

@media (max-width: 767px) {
    .work-archive-section,
    .magazine-archive-section {
        padding: 0 0 3rem;
    }

    .magazine-title{
        font-size: 1.2rem;
        line-height: 1;
    }
    .magazine-archive-grid .magazine-title{
        font-size: 1.5rem;
    }
}

.work-archive-item {
    color: inherit;
    text-decoration: none;
    display: block;
    flex: 0 0 calc(25% - 1.5rem);
    min-width: 0;
}

.work-archive-grid {
    display: grid;
    max-width: 1600px;
    margin: 0 auto;
    gap: 6rem;
}

.work-no-posts {
    text-align: center;
    padding: 3rem 2rem;
    font-size: 1.1rem;
}

/* Product single & archive (shop_product) */
.product-single-hero {
    margin-top: 2rem;
}

.product-single-content.entry-content {
    line-height: 2;
    max-width: 1050px;
    margin: 3rem auto;
}

.product-single-content p {
    letter-spacing: 0.02em;
}

/* 採寸表（product-size-chart）内のテーブル */
.product-size-chart {
    margin: 2rem 0;
}

.product-size-chart table {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    border-collapse: collapse;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
}

.product-size-chart thead th,
.product-size-chart tbody td {
    padding: 0.6rem 1rem;
    border: 1px solid var(--border-dark, #ccc);
    text-align: center;
}

.product-size-chart thead th {
    background-color: var(--gray-light, #f5f5f5);
    font-weight: 700;
}

.product-size-chart tbody tr:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.02);
}

.product-size-chart tbody td:first-child {
    text-align: left;
    font-weight: 500;
}
.product-size-chart p{
    max-width: 480px;
    margin: 0 auto;
    font-size: 0.8rem;
}
.product-single-footer {
    padding-top: 2rem;
    text-align: center;
    position: relative;
}

.product-single-footer::before {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background-color: var(--border-dark);
    margin-bottom: 2rem;
    transform-origin: left;
    transform: scaleX(0.8) translateX(10%);
    opacity: 0;
    animation: entry-header-line .6s ease-out forwards 0.8s;
}

.product-single-footer .archive-link {
    font-size: 1rem;
    padding: 0.75rem 1.5rem;
    color: var(--black);
}

.product-single-title.entry-title {
    margin-bottom: 0.5rem;
}

.shopify-buy-frame--product iframe {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.shopify-buy-frame--product iframe.loaded {
    opacity: 1;
    transform: translateY(0);
}

@media screen and (max-width: 767px) {
    .shopify-buy-frame--toggle.is-sticky{
        top: auto!important;
        bottom: 50px!important;
    }
}

/* iframe読み込み完了まで画像を非表示にしてレイアウトシフトを防止 */
.wait-iframe{
    opacity: 0!important;
}
.product-single-images .product-single-image{
    transition-delay: 0.15s;
}
.product-single-images.wait-iframe .product-single-image {
    opacity: 0!important;
    transform: translateY(50px)!important;
}

.product-archive-section,
.product-section.product-archive-section {
    padding: 0 0 6rem;
}

.product-archive-section .section-footer {
    text-align: center;
    margin-top: 3rem;
}

.product-archive-section .section-footer-btn {
    display: inline-block;
    padding: 1rem 2.5rem;
    background-color: var(--black);
    color: var(--white-pure);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-decoration: none;
    transition: opacity var(--transition-sharp);
}

.product-archive-section .section-footer-btn:hover {
    opacity: 0.85;
    color: var(--white-pure);
}

.product-archive-item {
    color: inherit;
    text-decoration: none;
    display: block;
    flex: 0 0 calc(25% - 1.5rem);
    min-width: 0;
}

.product-archive-grid {
    display: grid;
    grid-template-columns: repeat( auto-fill, minmax( 280px, 1fr ) );
    max-width: 1600px;
    margin: 0 auto;
    gap: 6rem;
}

@media (min-width: 1024px) {
    .product-archive-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767px) {
    .product-archive-grid {
        grid-template-columns: repeat( auto-fill, minmax( 140px, 1fr ) );
        gap: 0.5rem;
    }
}
.product-cover {
    width: 100%;
    height: auto;
    aspect-ratio: 795/1066;
    background-size: cover;
    border: 3px solid var(--black);
}

.product-cover__layer {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: opacity 0.35s ease;
}

.product-cover__layer--first {
    opacity: 1;
}

.product-cover__layer--second {
    opacity: 0;
}

.product-archive-item:hover .product-cover--has-hover .product-cover__layer--first {
    opacity: 0;
}

.product-archive-item:hover .product-cover--has-hover .product-cover__layer--second {
    opacity: 1;
}

.product-cover-title {
    font-family: var(--font-bebas);
    font-size: clamp(4rem, 8vw, 12rem);
    color: var(--white);
    z-index: 2;
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 200px;
    background: var(--border-dark);
}

.product-no-posts {
    text-align: center;
    padding: 3rem 2rem;
    font-size: 1.1rem;
}

.magazine-archive-item {
    color: inherit;
    text-decoration: none;
    display: block;
    flex: 0 0 calc(25% - 1.5rem);
    min-width: 0;
}
.magazine-archive-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: flex-start;
    max-width: 1600px;
    margin: 0 auto;
}
.magazine-no-posts {
    text-align: center;
    padding: 3rem 2rem;
    font-size: 1.1rem;
}

/* Magazine Single (single magazine post) */
.magazine-single-article {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 1.5rem 4rem;
}
.magazine-single-cover {
    margin-bottom: 2rem;
    border: 3px solid var(--black);
    overflow: hidden;
}
.magazine-single-cover img {
    width: 100%;
    max-height: 100vh;
    height: auto;
    display: block;
    object-fit: contain;
}
.magazine-single-header {
    margin-bottom: 2rem;
}
.magazine-single-title-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.75rem 1.5rem;
    font-family: var(--font-bebas);
}
.magazine-single-title-line .magazine-subtitle {
    font-family: var(--font-anton);
    font-size: clamp(2rem, 5vw, 3rem);
    text-transform: none;
}
.magazine-single-header::after {
    bottom:0;
}
.magazine-single-meta {
    margin-bottom: 0.5rem;
}
.magazine-single-date {
    font-family: var(--font-bebas);
    font-size: 1.2rem;
    letter-spacing: 0.05em;
}
.magazine-single-title {
    font-family: var(--font-anton);
    font-weight: 400;
    font-size: clamp(2rem, 5vw, 3rem);
    letter-spacing: 0.02em;
    line-height: 1.2;
    margin: 2rem 0;
}
.magazine-single-purchase {
    text-align: right;
    margin-top: 1rem;
    margin-bottom: 0;
}
/* .inside-article a 等より優先させるためセレクタを詳細に */
.magazine-single-header .magazine-purchase-btn {
    display: inline-block;
    padding: 0.75rem 2rem;
    background: var(--black);
    color: var(--white);
    text-decoration: none;
    font-weight: 700;
    letter-spacing: 0.1em;
    transition: opacity var(--transition-sharp);
}
.magazine-single-header .magazine-purchase-btn,
.magazine-single-header .magazine-purchase-btn:visited,
.magazine-single-header .magazine-purchase-btn:hover,
.magazine-single-header .magazine-purchase-btn:focus {
    color: var(--white);
}
.magazine-single-header .magazine-purchase-btn:hover {
    opacity: 0.85;
}
.magazine-single-soldout {
    margin-top: 1rem;
    margin-bottom: 0;
    font-weight: 700;
    letter-spacing: 0.1em;
}
.magazine-single-content {
    margin-bottom: 3rem;
}
.magazine-single-price-wrap{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: sticky;
    top: 0;
    bottom: 0;
    z-index: 10;
    padding: 1rem 0;
    margin: 0 -2rem;
    transition: top 0.5s ease .29s;
    background: var(--white-trans);
    backdrop-filter: blur(10px);
}
.header-wrap:not(.header-hidden) + .container .magazine-single-price-wrap{
    top: 80px;
}
.magazine-single-price-wrap-inner {
    display: flex;
    align-items: center;
    gap: 2rem;
}
.magazine-single-price-wrap .magazine-title {
    font-size: 1.2rem;
    text-align: right;
}
.magazine-single-price-wrap .magazine-single-price{
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0!important;
    line-height: 1;
}

.magazine-single-images {
    margin-top: 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.magazine-single-images .magazine-single-image {
    cursor: pointer;
}
.magazine-single-images .magazine-single-image img {
    width: 100%;
    height: auto;
    display: block;
}
.magazine-single-content p {
    margin-bottom: 1.25em;
    letter-spacing: 0.15em;
    line-height: 2;
}
.magazine-single-footer {
    padding-top: 2rem;
    text-align: center;
    position: relative;
}
.magazine-single-footer::before {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background-color: var(--border-dark);
    margin-bottom: 2rem;
    transform-origin: left;
    transform: scaleX(0.8) translateX(10%);
    opacity: 0;
    animation: entry-header-line .6s ease-out forwards 0.8s;
}
.magazine-single-footer .archive-link {
    font-size: 1rem;
    padding: 0.75rem 1.5rem;
    color: var(--black);
}

@media screen and (max-width: 767px) {
    .magazine-single-article{
        padding: 1rem 0 2rem;
    }
    .magazine-single-cover{
        margin-bottom: 0rem;
    }
    .magazine-single-images{
        margin: 0 -1rem;
    }
    .magazine-single-price-wrap{
        margin: 0 -1rem;
    }
    .header-wrap:not(.header-hidden) + .container .magazine-single-price-wrap{
        top: 60px;
    }

    .product-archive-section,
    .product-section.product-archive-section {
        padding: 0 0 6rem;
    }

    .magazine-single-image{
        pointer-events: none;
    }
    .magazine-single-price-wrap-inner {
        flex:1;
        flex-direction: column;
        align-items: flex-end;
        gap: 0rem;
    }
    .magazine-single-price-wrap .magazine-title {
        font-size: 0.9rem;
        align-self: flex-start;
        margin-left: 1rem;
        text-align: left;
    }
    .magazine-single-price-wrap .magazine-title .small{
        font-size:80%;
        font-weight: 600;
    }
    .magazine-single-price-wrap .magazine-single-price{
        font-size: 0.8rem;
        line-height: 1.2;
        padding-right: 1rem;
    }
    .shopify-buy__layout-vertical{
        max-width: 220px!important;
    }
}

/* Magazine Single — ライトボックス（全画面・前後送り） */
.magazine-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}
.magazine-lightbox.active {
    opacity: 1;
    visibility: visible;
}
.magazine-lightbox__inner {
    max-width: 100%;
    max-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 4rem;
    box-sizing: border-box;
}
.magazine-lightbox__img {
    max-width: 100%;
    max-height: calc(100vh - 6rem);
    width: auto;
    height: auto;
    object-fit: contain;
}
.magazine-lightbox__counter {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 0.95rem;
    letter-spacing: 0.1em;
    opacity: 0.9;
}
.magazine-lightbox__close,
.magazine-lightbox__prev,
.magazine-lightbox__next {
    position: absolute;
    border: none;
    background: transparent;
    color: #fff;
    cursor: pointer;
    padding: 1rem;
    opacity: 0.85;
    transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.magazine-lightbox__close:focus,
.magazine-lightbox__prev:focus,
.magazine-lightbox__next:focus {
    background: transparent;
    color: #fff;
}
.magazine-lightbox__close:hover,
.magazine-lightbox__prev:hover,
.magazine-lightbox__next:hover {
    opacity: 1;
    background: #fff;
    color: #000;
}
.magazine-lightbox__close {
    top: 1rem;
    right: 1rem;
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.5rem;
    line-height: 1;
}
.magazine-lightbox__close::before,
.magazine-lightbox__close::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1.25rem;
    height: 2px;
    margin: -1px 0 0 -0.625rem;
    background: currentColor;
}
.magazine-lightbox__close::before {
    transform: rotate(45deg);
}
.magazine-lightbox__close::after {
    transform: rotate(-45deg);
}
.magazine-lightbox__prev,
.magazine-lightbox__next {
    top: 50%;
    margin-top: -1.5rem;
    width: 3rem;
    height: 3rem;
    font-size: 1.5rem;
}
.magazine-lightbox__prev {
    left: 0.5rem;
}
.magazine-lightbox__prev::before {
    content: '';
    display: block;
    width: 0.75rem;
    height: 0.75rem;
    margin: 0 auto;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
}
.magazine-lightbox__next {
    right: 0.5rem;
}
.magazine-lightbox__next::before {
    content: '';
    display: block;
    width: 0.75rem;
    height: 0.75rem;
    margin: 0 auto;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
}

/* Magazine Carousel Navigation */
.magazine-carousel-wrapper {
    position: relative;
    width: 100vw;
    max-width: none;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    left: 0;
}

.carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--white);
    color: var(--black);
    border: 3px solid var(--black);
    width: 60px;
    height: 60px;
    font-size: 2rem;
    font-weight: 900;
    cursor: pointer;
    z-index: 10;
    transition: var(--transition-snap);
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-nav:hover {
    background-color: var(--black);
    color: var(--white);
    transform: translateY(-50%);
}

.carousel-nav-prev {
    left: -30px;
}

.carousel-nav-next {
    right: -30px;
}

.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 3rem;
}

.carousel-dot {
    width: 12px;
    height: 12px;
    background-color: transparent;
    border: 2px solid var(--black);
    cursor: pointer;
    transition: var(--transition-snap);
}

.carousel-dot.active {
    background-color: var(--black);
}


/* ================================================
   STORE SECTION
   ================================================ */
.store-section {
    background-color: var(--white);
}

.store-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 4rem;
    max-width: 1600px;
    margin: 0 auto;
}

.product-item {
    position: relative;
    cursor: pointer;
    transition: var(--transition-sharp);
    display: block;
    text-decoration: none;
    color: inherit;
}

.product-item:hover {
    transform: translateY(-10px);
}

.product-image {
    width: 100%;
    aspect-ratio: 3/4;
    background-color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--black);
    position: relative;
    overflow: hidden;
    transition: var(--transition-snap);
}

.product-item:hover .product-image {
    background-color: var(--white);
}

/* 商品画像（image_url）：1枚目常時表示、ホバーで2枚目にフェード */
.product-image--img {
    position: relative;
}

.product-image--img .product-image__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity 0.35s ease;
}

.product-image--img .product-image__img--first {
    opacity: 1;
}

.product-image--img .product-image__img--second {
    opacity: 0;
}

.product-item.is-hover .product-image--img .product-image__img--first {
    opacity: 0;
}

.product-item.is-hover .product-image--img .product-image__img--second {
    opacity: 1;
}

.product-image-placeholder {
    font-family: var(--font-anton);
    font-size: clamp(2rem, 5vw, 6rem);
    color: var(--white);
    text-align: center;
    letter-spacing: -0.02em;
    transition: var(--transition-snap);
}

.product-item:hover .product-image-placeholder {
    color: var(--black);
}

.product-info {
    margin-top: 2rem;
}

.product-title {
    font-size: 1.5rem;
    margin-bottom: 0.1rem;
}
.product-meta{
    font-size: 0.95em;
    font-weight: 300;
}
.product-name {
    font-family: var(--font-bebas);
    font-size: 2rem;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.product-price {
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: 0.05em;
}

@media (max-width: 767px) {
    .product-title{
        font-size: 1.0rem;
    }
    .product-meta{
        font-size: .9rem;
    }
}

/* ================================================
   PHILOSOPHY SECTION - CINEMATIC SCROLL EXPERIENCE
   ================================================ */

/* Section Container - ステージ分の高さでスクロール可能に */
.philosophy-section-cinematic {
    position: relative;
    background-color: var(--black);
    min-height: 300vh;
}

/* Subtle grain texture overlay */
.philosophy-section-cinematic::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(./assets/img/noise.gif);
    background-size: 996px 996px;
    pointer-events: none;
    opacity: 0.08;
    z-index: 1;
}

/* Background NO Logo - Fixed position (Follows scroll) */
.philosophy-bg-logo {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1.05);
    z-index: 2;
    opacity: 0;
    pointer-events: none;
    will-change: transform, opacity;
}

.philosophy-logo-massive {
    width: auto;
    height: 90vh;
    display: block;
    filter: grayscale(100%) brightness(1.2);
}

/* Stage Container - 共通: 上端でストッキー */
.philosophy-stage {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2rem;
    z-index: 3;
}

/* Stage 2: WHAT IS */
.philosophy-stage-what-is {
    will-change: opacity, transform;
}

.philosophy-what-is {
    font-family: var(--font-anton);
    font-size: clamp(6rem, 15vw, 18rem);
    margin-bottom: 0;
    line-height: 0.9;
    letter-spacing: 0.05em;
    white-space: nowrap;
    font-weight: 400;
    text-align: center;
    color: var(--white-pure);
    opacity: 0;
    will-change: opacity, transform, letter-spacing;
    transition: opacity 0.3s ease-out 0.1s, letter-spacing 0.3s ease-out 0.1s;
}

.philosophy-stage-what-is.active .philosophy-what-is {
    opacity: 1;
    letter-spacing: -0.02em;
}

/* Stage 3: Japanese Manifesto */
.philosophy-stage-ja {
    will-change: opacity, transform, letter-spacing;
}

.philosophy-manifesto-ja {
    font-family: var(--font-mincho);
    font-size: clamp(1.4rem, 3vw, 2.4rem);
    font-weight: 900;
    line-height: 1.8;
    letter-spacing: 0.03em;
    text-align: center;
    max-width: 1200px;
    color: var(--white-pure);
    opacity: 0;
    transition: opacity 0.6s ease-out;
}

.philosophy-stage-ja.active .philosophy-manifesto-ja {
    opacity: 1;
}

.philosophy-manifesto-ja .philosophy-line {
    display: block;
}

/* Stage 4: English Text */
.philosophy-stage-en {
    will-change: opacity, transform;
}

.philosophy-manifesto-en {
    font-family: var(--font-mincho);
    font-size: clamp(1.4rem, 3vw, 2.2rem);
    font-weight: 700;
    line-height: 1.8;
    letter-spacing: 0.08em;
    text-align: center;
    max-width: 1100px;
    color: var(--gray-muted);
    opacity: 0;
    transition: opacity 0.6s ease-out;
}

.philosophy-stage-en.active .philosophy-manifesto-en {
    opacity: 1;
}

.philosophy-manifesto-en .philosophy-line {
    display: block;
    will-change: opacity, transform;
}

.philosophy-highlight {
    color: var(--white-pure);
    font-weight: 900;
}

/* Responsive - Tablet */
@media (max-width: 1023px) {
    .philosophy-logo-massive {
        height: 60vh;
    }
    
    .philosophy-what-is {
        font-size: clamp(5rem, 12vw, 12rem);
    }
    
    .philosophy-manifesto-ja {
        font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    }
    
    .philosophy-manifesto-en {
        font-size: clamp(1.2rem, 2.5vw, 1.8rem);
    }
}

/* Responsive - Mobile */
@media (max-width: 767px) {
    .philosophy-stage{
        padding: 0;
    }
    .philosophy-section-cinematic {
        min-height: 300vh;
    }
    
    .philosophy-logo-massive {
        height: 50vh;
    }
    
    .philosophy-what-is {
        font-size: clamp(4rem, 12vw, 8rem);
    }
    
    .philosophy-manifesto-ja {
        font-size: clamp(1.15rem, 3vw, 2rem);
        line-height: 1.7;
    }
    
    .philosophy-manifesto-en {
        font-size: clamp(1rem, 2.5vw, 1.4rem);
        line-height: 1.7;
    }
}

/* ================================================
   TEAM SECTION (LEGACY - KEPT FOR COMPATIBILITY)
   ================================================ */
.team-section {
    background-color: var(--black);
    color: var(--white);
}

.team-section .section-title {
    color: var(--white);
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 4rem;
    max-width: 1600px;
    margin: 0 auto;
}

.team-member {
    text-align: center;
}

.team-photo {
    width: 100%;
    aspect-ratio: 3/4;
    background-color: var(--white);
    border: 3px solid var(--white);
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-sharp);
}

.team-member:hover .team-photo {
    transform: scale(1.05);
}

.team-photo-placeholder {
    font-family: var(--font-anton);
    font-size: 3rem;
    color: var(--black);
    letter-spacing: -0.02em;
}

.team-name {
    font-family: var(--font-bebas);
    font-size: 2rem;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.team-role {
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: 0.1em;
}

.team-bio {
    margin-top: 1rem;
    font-size: 0.9rem;
    font-weight: 400;
    letter-spacing: 0.05em;
    line-height: 1.6;
    opacity: 0.8;
}

/* ================================================
   WORKS SECTION
   ================================================ */
.works-section {
    background-color: var(--white);
}

.works-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8rem;
    max-width: 1800px;
    margin: 0 auto;
}

.work-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    color: inherit;
    text-decoration: none;
}

.work-item:nth-child(even) {
    direction: rtl;
}

.work-item:nth-child(even) > * {
    direction: ltr;
}

.work-image {
    width: 100%;
    aspect-ratio: 4/3;
    background-color: var(--black);
    border: 3px solid var(--black);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-sharp);
    overflow: hidden;
    position: relative;
}

.work-image-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: filter 0.6s ease;
}

.work-item:hover .work-image-photo {
    filter: grayscale(100%) brightness(0.8) contrast(1.2);
}

.work-image-placeholder {
    position: absolute;
    font-family: var(--font-anton);
    font-size: 4rem;
    color: var(--white);
    letter-spacing: -0.02em;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.work-item:hover .work-image-placeholder{
    opacity: 1;
}

.work-content {
    padding: 2rem;
}

.work-title {
    font-family: var(--font-bebas);
    font-size: clamp(3rem, 6vw, 6rem);
    letter-spacing: 0.02em;
    line-height: 0.9;
    margin-bottom: 2rem;
}

.work-description {
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.05em;
    line-height: 1.8;
    margin-bottom: 2rem;
    text-align: justify;
}

.work-meta {
    font-size: 0.9rem;
    font-weight: 900;
    letter-spacing: 0.1em;
}

@media (max-width: 767px) {
    .work-content {
        padding: 1rem;
    }

    .work-description {
        font-size: 0.88rem;
        letter-spacing: 0;
    }
}

/* ================================================
   CONTACT SECTION
   ================================================ */
.contact-section {
    background-color: var(--black);
    color: var(--white);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-content {
    max-width: 800px;
    width: 100%;
}

.contact-title {
    font-family: var(--font-bebas);
    font-size: clamp(4rem, 10vw, 10rem);
    letter-spacing: 0.02em;
    margin-bottom: 4rem;
    text-align: center;
}

.contact-form {
    margin-bottom: 4rem;
}

.form-group {
    position: relative;
    margin-bottom: 3rem;
}

.form-group input,
.form-group textarea {
    width: 100%;
    background-color: transparent;
    border: none;
    border-bottom: 2px solid var(--white);
    color: var(--white);
    font-family: var(--font-work-sans);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 1rem 0;
    outline: none;
    transition: var(--transition-sharp);
}

.wpcf7-select {
    width: 100%;
    background-color: transparent;
    border-left:0;
    border-right:0;
    border-top:0;
    padding: 1rem 0;
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.form-group label {
    position: absolute;
    left: 0;
    top: 1rem;
    font-size: 0.9rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    transition: var(--transition-sharp);
    pointer-events: none;
}

.form-group input:focus,
.form-group textarea:focus {
    border-bottom-color: var(--white);
    border-bottom-width: 3px;
}

.form-group input:focus + label,
.form-group textarea:focus + label,
.form-group input:not(:placeholder-shown) + label,
.form-group textarea:not(:placeholder-shown) + label {
    top: -1.5rem;
    font-size: 0.8rem;
}

.wpcf7-form .submit-btn {
    width: 100%;
    padding: 1.5rem;
    background-color: var(--white);
    color: var(--black);
    font-size: 1.2rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    border: 3px solid var(--white);
    transition: var(--transition-snap);
}

.wpcf7-form .submit-btn:hover {
    background-color: var(--black);
    color: var(--white);
}

.contact-info {
    text-align: center;
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    line-height: 2;
}

/* ================================================
   MODAL
   ================================================ */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    z-index: 2000;
    overflow-y: auto;
    animation: modalFadeIn 0.3s ease;
}

.modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.modal-content {
    background-color: var(--white);
    width: 100%;
    max-width: 1200px;
    max-height: calc(100vh - 4rem);
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
    padding: 4rem;
    animation: modalSlideUp 0.4s cubic-bezier(0.8, 0, 0.2, 1);
    scrollbar-width: thin;
    scrollbar-color: var(--black) var(--border-light);
}

/* モーダル用スクロールバー: モノクロスクエアUI */
.modal::-webkit-scrollbar,
.modal-content::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.modal::-webkit-scrollbar-button,
.modal-content::-webkit-scrollbar-button {
    display: none;
}

.modal::-webkit-scrollbar-track,
.modal-content::-webkit-scrollbar-track {
    background: transparent;
    border: none;
    border-radius: 0;
}

.modal::-webkit-scrollbar-thumb,
.modal-content::-webkit-scrollbar-thumb {
    background: var(--black);
    border: none;
    border-radius: 0;
}

.modal::-webkit-scrollbar-thumb:hover,
.modal-content::-webkit-scrollbar-thumb:hover {
    background: #333;
}

.modal::-webkit-scrollbar-corner,
.modal-content::-webkit-scrollbar-corner {
    background: var(--border-light);
    border-radius: 0;
}

@keyframes modalSlideUp {
    from {
        transform: translateY(50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-close {
    position: fixed;
    top: 2rem;
    right: 2rem;
    width: 3rem;
    height: 3rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    line-height: 3rem;
    color: var(--white);
    transition: var(--transition-snap);
    z-index: 10;
}

.modal-close:hover {
    background-color: transparent;
    color: var(--white-pure);
}

.modal-body h3 {
    font-family: var(--font-bebas);
    font-size: 4rem;
    letter-spacing: 0.02em;
    margin-bottom: 2rem;
}

.modal-body p {
    font-size: 1.1rem;
    line-height: 1.8;
    letter-spacing: 0.02em;
    margin-bottom: 2rem;
}

.product-modal-body {
    text-align: center;
}

.product-modal-gallery {
    width: 100%;
    max-width: 600px;
    margin: 0 auto 2rem;
}

.product-modal-slider {
    width: 100%;
}

.product-modal-slider .slick-list,
.product-modal-slider .slick-track,
.product-modal-slider .slick-slide {
    height: 100%;
}

.product-modal-slider .slick-slide > div {
    height: 100%;
}

.product-modal-slide {
    height: 100%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background-color: var(--black);
}

.product-modal-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.product-modal-slide-placeholder {
    min-height: 280px;
}

.product-modal-image-text {
    font-family: var(--font-anton);
    font-size: 4rem;
    color: var(--white);
    letter-spacing: -0.02em;
}

.product-modal-thumbs {
    margin-top: 1rem;
    padding: 0 2rem;
}

.product-modal-thumbs .slick-list {
    margin: 0 -0.35rem;
}

.product-modal-thumbs .slick-slide {
    padding: 0 0.35rem;
    cursor: pointer;
}

.product-modal-thumb {
    aspect-ratio: 1;
    border: 1px solid var(--border-light);
    overflow: hidden;
}

.product-modal-thumbs .slick-current .product-modal-thumb {
    border-color: var(--black);
}

.product-modal-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.product-modal-thumb-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-modal-thumb-placeholder .product-modal-image-text {
    font-size: 1.5rem;
}

.product-modal-slider .slick-prev,
.product-modal-slider .slick-next {
    background: var(--white);
    color: var(--black);
}

.product-modal-slider .slick-prev::before,
.product-modal-slider .slick-next::before {
    border-color: var(--black);
}

.product-modal-slider .slick-prev:hover,
.product-modal-slider .slick-next:hover {
    background: var(--white);
    color: var(--black);
    opacity: 0.85;
}

.product-modal-title {
    font-family: var(--font-bebas);
    font-size: 3rem;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
}

.product-modal-price {
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    margin-bottom: 2rem;
}

.product-modal-description {
    font-size: 1rem;
    line-height: 1.8;
    max-width: 700px;
    margin: 0 auto 3rem;
    text-align: justify;
}

.product-modal-content-images {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2rem;
    justify-content: center;
}

.product-modal-content-image {
    max-width: 100%;
    max-height: calc(100vh - 4rem);
    width: auto;
    height: auto;
    object-fit: cover;
    display: block;
}

.product-buy-btn {
    padding: 1.5rem 4rem;
    background-color: var(--black);
    color: var(--white);
    font-size: 1.2rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    border: 3px solid var(--black);
    transition: var(--transition-snap);
}

.product-buy-btn:hover {
    background-color: var(--white);
    color: var(--black);
}

/* ================================================
   FOOTER
   ================================================ */
.footer {
    background-color: var(--white-pure);
    border-top: 1px solid var(--border-light);
    padding: 4rem;
}

.footer-content {
    display: flex;
    align-items: center;
    gap: 2rem;
    max-width: 1600px;
    margin: 0 auto;
}

.footer-logo {
    display: flex;
    align-items: center;
}

.footer-logo-image {
    height: 60px;
    width: auto;
    display: block;
    margin: 0;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 1rem 1.5rem;
}

.footer-links .footer-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 1rem 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-links .footer-nav li {
    margin: 0;
}

.footer-links a {
    color: var(--gray-light);
    text-decoration: none;
    text-transform: uppercase;
    font-size:0.8rem;
    font-weight: 600;
    transition: var(--transition-snap);
}

.footer-links a:hover {
    color: var(--black);
}

.footer-social {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.footer-social-link {
    display: inline-flex;
    color: var(--gray-light);
    transition: var(--transition-snap);
}

.footer-social-link:hover {
    color: var(--black);
}

.footer-social-link svg {
    width: 14px;
    height: 14px;
}

.footer-text {
    margin-left: auto;
    text-align: right;
    font-size: 0.9rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    line-height: 1.8;
}

.footer-text .philosophy-text {
    font-size: 0.85rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin: 0 0 0.5em;
    color: var(--black);
}

.footer-text .produced-text {
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    margin: 0 0 0.5em;
    color: var(--black);
}

.footer-text .copyright-text {
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    margin: 0;
    color: var(--black-deep);
}

/* ================================================
   RESPONSIVE
   ================================================ */
@media (max-width: 1024px) {
    .main-nav {
        flex-direction: column;
        gap: 2rem;
        padding: 2px 0;
    }

    .logo-image {
        height: 42px;
    }

    .nav-menu {
        gap: 1.5rem;
    }

    section {
        padding: 6rem 2rem;
    }

    .hero-section {
        padding: 0 2rem;
    }

    /* Hero Grid - タブレットで縦並び、メニューにかぶらないよう上余白60px */
    .hero-grid {
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
        padding: 60px 2rem 0 2rem;
    }

    .hero-magazine {
        max-width: 400px;
        margin: 0 auto;
    }

    .hero-magazine-cover {
        max-width: 100%;
    }

    .hero-title {
        font-size: clamp(5rem, 13vw, 12rem);
        letter-spacing: -0.02em;
    }

    .philosophy-section {
        padding: 6rem 2rem;
        min-height: 60vh;
    }

    .philosophy-hero {
        padding: 6rem 2rem;
        margin-bottom: 4rem;
        min-height: 50vh;
    }

    .philosophy-hero-bg {
        opacity: 0.32;
    }

    .philosophy-hero-bg-logo {
        height: clamp(300px, 40vw, 600px);
    }

    .philosophy-hero-title {
        font-size: clamp(4rem, 10vw, 10rem);
    }

    .philosophy-statement-ja {
        font-size: clamp(1.2rem, 2.5vw, 2rem);
        line-height: 1.8;
        margin-bottom: 3rem;
    }

    .philosophy-statement-en {
        font-size: clamp(1rem, 2vw, 1.6rem);
        line-height: 1.8;
        text-align: left;
    }

    .store-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 3rem;
    }

    .carousel-nav {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }

    .carousel-nav-prev {
        left: -10px;
    }

    .carousel-nav-next {
        right: -10px;
    }

    .magazine-grid {
        padding: 0 2rem 2rem 2rem;
    }

    .magazine-item {
        flex: 0 0 calc(50% - 1.5rem);
    }

    .work-item {
        grid-template-columns: 1fr;
    }

    .work-item:nth-child(even) {
        direction: ltr;
    }

    .modal-content {
        padding: 3rem 2rem;
        max-height: calc(100vh - 6rem);
    }

    .footer-content {
        flex-direction: column;
        gap: 2rem;
        text-align: center;
    }

    .footer-links .footer-nav {
        justify-content: center;
    }

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

    .footer-logo-image {
        margin-left: auto;
        margin-right: auto;
    }

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

@media (max-width: 768px) {
    section {
        padding: 2rem 1rem;
    }

    .separate-containers .inside-article, .separate-containers .comments-area, .separate-containers .page-header, .separate-containers .paging-navigation, .one-container .site-content, .inside-page-header {
        padding: 60px 1rem 1rem;
    }
    /* Hamburger Menu Visible on Mobile */
    .hamburger {
        display: flex;
        order: 2;
    }
    
    /* Mobile Navigation - Logo left, Hamburger right */
    .main-nav {
        padding: 1.2rem 1.5rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .nav-logo {
        order: 1;
        gap: 0.4rem;
    }
    
    .logo-image {
        height: 32px;
    }
    
    .logo-text {
        font-size: 1rem;
        letter-spacing: 0.1em;
    }
    
    /* Navigation Menu - Slide in from right */
    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 70%;
        max-width: 300px;
        height: 100vh;
        background-color: var(--white);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 2rem;
        padding: 2rem;
        box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
        transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 1000;
    }
    
    .nav-menu.active {
        right: 0;
    }
    
    .nav-link {
        font-size: 1.2rem;
        letter-spacing: 0.15em;
    }

    .logo-image {
        height: 32px;
    }

    .footer-logo-image {
        height: 50px;
    }

    /* Hero Section - 全画面（video-wrapperが全画面、gridはメニューにかぶらない） */
    .hero-section {
        height: 100vh;
        padding: 60px 0.5rem 0 0.5rem;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    /* Hero Grid - メニュー領域にかぶらないよう上余白60px */
    .hero-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 0px 1.8rem;
        max-width: 100%;
        width: 100%;
        justify-content: center;
    }

    .hero-typography {
        margin: 0 1rem;
        order: 2;
        text-align: left;
        gap: 0;
    }

    .hero-magazine {
        order: 1;
        width: calc(100% - 60px);
        max-width: calc(66vh);
        margin: 0 auto;
    }
    
    .hero-magazine-label {
        font-size: 0.75rem;
        letter-spacing: 0.12em;
    }

    .hero-magazine-cover {
        max-width: 100%;
        border: 2px solid var(--black);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    }
    
    /* Show magazine info by default on mobile */
    .hero-magazine-info {
        opacity: 1;
        transform: translateY(0);
        padding: 1rem;
        bottom:-5px;
        z-index: 1;
    }
    
    .hero-magazine-number {
        font-size: 0.9rem;
        margin-bottom: 0.3rem;
    }
    
    .hero-magazine-title {
        font-size: 1.8rem;
        line-height: 1;
        margin-bottom: 0.3rem;
    }
    
    .hero-magazine-credit {
        font-size: 0.7rem;
    }
    
    /* Latest Issue Badge - Mobile */
    .hero-magazine-cover{
        overflow: visible;
    }
    .hero-cover-image{
        position: relative;
        z-index: 1;
    }
    .latest-issue-badge {
        font-size: 0.75rem;
        font-weight: 400;
        padding: 0 1.1rem;
        letter-spacing: 0.15em;
        margin-top: 0.8rem;
        right: -30px;
        left:auto;
        width: 30px;
        height: 150px;
        aspect-ratio: auto;
        max-width: none;
        transform: translateX(-40px);
    }
    .latest-issue-badge span{
        transform: rotate(90deg);
    }
    .latest-issue-badge br{
        display: none;
    }
    .latest-issue-badge-text:nth-child(3){
        margin-left: 10px;
    }

 
    .hero-title {
        font-size: clamp(3rem, 7vw, 4rem);
        line-height: 0.9;
        letter-spacing: -0.01em;
        flex: 1;
        overflow: visible;
        display: flex;
        flex-direction: row;
        margin-bottom: 0.1em;
    }
    .hero-line{
        margin-right: 0.25em;
    }

    .hero-statement {
        font-size: 0.7rem;
        margin: 0;
        letter-spacing: 0.1em;
        flex: 1;
    }
    
    /* Scroll indicator - better positioning */
    .scroll-indicator {
        flex-direction: row-reverse;
        bottom: 2rem;
    }
    
    .scroll-line {
        height: 40px;
    }

    .section-title {
        font-size: clamp(3rem, 12vw, 6rem);
    }

    .philosophy-section {
        padding: 5rem 1.5rem;
        min-height: 50vh;
    }

    .philosophy-hero {
        padding: 4rem 1rem;
        margin-bottom: 3rem;
        min-height: 40vh;
    }

    .philosophy-hero-bg {
        opacity: 0.28;
    }

    .philosophy-hero-bg-logo {
        height: clamp(250px, 60vw, 400px);
    }

    .philosophy-hero-title {
        font-size: clamp(3rem, 10vw, 7rem);
    }

    .philosophy-statement {
        padding: 0 1.5rem;
    }

    .philosophy-statement-ja {
        font-size: clamp(1rem, 2vw, 1.5rem);
        line-height: 1.7;
        margin-bottom: 2.5rem;
        text-align: center;
    }

    .philosophy-statement-en {
        font-size: clamp(0.85rem, 1.8vw, 1.2rem);
        line-height: 1.7;
        text-align: left;
    }

    .magazine-grid {
        padding: 0 0 1rem 0;
    }

    .magazine-item {
        flex: 0 0 100%;
    }

    .carousel-nav {
        display: none;
    }

    .magazine-grid,
    .team-grid {
        gap: 3rem;
    }

    .magazine-info{
        margin-top: 0.5rem;
    }

    .slick-prev { left: 0rem; }
    .slick-next { right: 0rem; }

    .store-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }

    .product-info{
        margin-top: 0.5rem;
    }
    .product-name{
        font-size: 1.2rem;
        margin-bottom: 0;
    }
    .product-price{
        font-size: 1rem;
    }

    .works-grid{
        gap: 2rem;
    }
    .work-item{
        gap: 0.5rem;
    }
    .work-title{
        margin-bottom: 1rem;
    }

    .modal.active {
        padding: 2rem 1rem;
    }

    .modal-content {
        max-height: calc(100vh - 4rem);
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .modal-content::-webkit-scrollbar,
    .modal::-webkit-scrollbar {
        display: none;
    }

    .footer{
        padding:1rem;
    }
}

/* ================================================
   SCROLL ANIMATIONS
   ================================================ */
.reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.6s ease, transform 0.6s ease-out;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* GOODS section: 0.2s base delay + stagger 0.1s per item */
.store-grid .product-item.reveal:nth-child(3n+1) { transition-delay: 0.2s; }
.store-grid .product-item.reveal:nth-child(3n+2) { transition-delay: 0.3s; }
.store-grid .product-item.reveal:nth-child(3n)   { transition-delay: 0.4s; }

.reveal-left {
    opacity: 0;
    transform: translateX(-100px);
    transition: opacity 0.6s ease, transform 0.6s ease-out;
}

.reveal-left.active {
    opacity: 1;
    transform: translateX(0);
}

.reveal-right {
    opacity: 0;
    transform: translateX(100px);
    transition: opacity 0.6s ease, transform 0.6s ease-out;
}

.reveal-right.active {
    opacity: 1;
    transform: translateX(0);
}

/* Extra Small Devices - Very Small Mobile (480px and below) */
@media (max-width: 480px) {
    .nav-logo {
        gap: 0.35rem;
    }
    
    .logo-image {
        height: 28px;
    }
    
    .logo-text {
        font-size: 0.9rem;
        letter-spacing: 0.08em;
    }
    
    .main-nav {
        padding: 1rem 1rem;
    }
}

/* Extra Extra Small Devices - iPhone SE, Small Android (375px and below) */
@media (max-width: 375px) {
    .nav-logo {
        gap: 0.3rem;
    }
    
    .logo-image {
        height: 26px;
    }
    
    .logo-text {
        font-size: 0.85rem;
        letter-spacing: 0.06em;
    }
    
    .main-nav {
        padding: 0.9rem 1rem;
    }
}

/* ================================================
   PAGE LOADER（ビデオ読み込み前の白画面）
   ================================================ */
.page-loader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: var(--black-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

body.video-loaded .page-loader {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loader {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-top-color: var(--black);
    border-radius: 50%;
    animation: loader-spin 0.8s linear infinite;
}

.page-loader-logo-image {
    opacity: 0;
    filter: blur(50px);
    animation: page-loader-logo-fade-in 0.8s ease forwards;
}

@keyframes page-loader-logo-fade-in {
    30% {
        opacity: 0;
        filter: blur(50px);
    }
    100% {
        opacity: 1;
        filter: blur(0);
    }
}


/* Support page: list bullets hidden */
.store-region-wrap{
    column-count: 3;
    column-gap: 4px;
}
.store-region{
    break-inside: avoid;
}
.store-region,
.support-section{
    padding: 1rem 0;
}
.entry-content .store-list,
.entry-content .brand-list {
    list-style: none;
    padding-left: 0;
}
.entry-content .store-list li,
.entry-content .brand-list li {
    list-style: none;
    margin-bottom: 1rem;
}

.brand-list{
    display: flex;
    flex-wrap: wrap;

}
.brand-list >*{
    flex: 0 0 50%;
}

@media (max-width: 1366px) {
    .store-region-wrap{
        column-count: 2;
    }
    .brand-list{
        display: block;
    }
}
@media (max-width: 768px) {
    .store-region-wrap{
        column-count: 1;
    }
}

/* ================================================
   特定商取引法に基づく表記（page-tokutei）
   ================================================ */
.tokutei-body{
    max-width:800px;
    margin: 0 auto;
}
.tokutei-page .entry-title{
    font-size: 2rem;
}
.tokutei-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
    line-height: 1.6;
}

.tokutei-table th,
.tokutei-table td {
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-dark, #909090);
    vertical-align: top;
}

.tokutei-table th {
    width: 180px;
    background-color: var(--border-light, #f8f8f8);
    font-weight: 600;
    color: var(--black, #0a0a0a);
}

.tokutei-table td {
    background-color: var(--white-pure, #fff);
    color: var(--black, #0a0a0a);
}

.tokutei-table td a {
    color: var(--black, #0a0a0a);
    text-decoration: underline;
}

.tokutei-table td a:hover {
    opacity: 0.8;
}

.tokutei-note {
    margin-top: 2rem;
    font-size: 0.8125rem;
    color: var(--border-dark, #909090);
}

@media (max-width: 640px) {
    .tokutei-table th {
        width: 120px;
        font-size: 0.8125rem;
        padding: 0.5rem 0.75rem;
    }
    .tokutei-table td {
        font-size: 0.8125rem;
        padding: 0.5rem 0.75rem;
    }
}

/* ================================================
   プライバシーポリシー（page-privacy-policy）
   ================================================ */
.privacy-policy-body {
    max-width: 800px;
    margin: 0 auto;
}

.privacy-policy-body p,
.privacy-policy-body .privacy-intro {
    margin-bottom: 1em;
    line-height: 1.7;
    font-size: 14px;
}
.privacy-policy-body hr {
    margin: 2rem 0;
    border: none;
    border-top: 1px solid var(--border-dark, #909090);
}
.privacy-policy-body h2 {
    font-size: 1.25rem;
    margin-top: 2em;
    margin-bottom: 0.5em;
}
.privacy-policy-body ul,
.privacy-policy-body ol {
    margin: 0.5em 0 1em 1.5em;
    font-size: 14px;
}