@charset "UTF-8";

/* ============================================================
   1. 変数・ベース設定
   ============================================================ */
:root {
  --color-base: #f1ede4;
  --color-main: #2b2b2b;
  --color-white: #ffffff;
  --font-serif: "noto-serif-jp", serif;
  --transition-base: 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  --section-padding: 160px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  background-color: var(--color-base);
  color: var(--color-main);
  font-family: var(--font-serif);
  font-weight: 300;
  line-height: 2.2;
  overflow-x: hidden;
}

body::after {
  content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background-image: url("https://www.transparenttextures.com/patterns/recycled-paper.png");
  opacity: 0.12; pointer-events: none; z-index: 9999;
}

body.is-menu-open { overflow: hidden !important; }

img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; transition: opacity 0.3s; }
li { list-style: none; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 4%; }
.container--narrow { max-width: 1000px; margin: 0 auto; padding: 0 4%; }
section { padding: var(--section-padding) 0; }

/* ============================================================
   2. ヘッダー・ナビゲーション
   ============================================================ */
.header {
  position: fixed; top: 0; left: 0; width: 100%; height: 100px; z-index: 2000;
  display: flex; align-items: center; 
  transition: background 0.6s var(--transition-base), color 0.6s, height 0.6s;
}
.header__inner { width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 0 4%; }
.header__logo { display: flex; align-items: center; gap: 15px; flex-shrink: 0; }
.header__logo-img { height: 40px; width: auto; transition: filter 0.6s; }
@media (max-width: 768px) {
.header__logo-img { height: 30px; width: auto; transition: filter 0.6s; }
}
.header__logo-text { font-size: 1.15rem; font-weight: 500; letter-spacing: 0.15em; white-space: nowrap; }
.header__nav ul { display: flex; flex-direction: row; gap: 30px; align-items: center; }
.header__nav a { font-size: 0.85rem; letter-spacing: 0.1em; white-space: nowrap; }

.header.is-scrolled {
  background: rgba(241, 237, 228, 0.98);
  color: var(--color-main) !important;
  height: 80px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.header.is-scrolled .header__logo-img { filter: brightness(0) !important; }

/* スマホメニュー開閉時のヘッダー透過透過 */
.header:has(.header__hamburger.is-active) {
    background-color: transparent !important;
    box-shadow: none !important;
    color: var(--color-main) !important;
}
.header:has(.header__hamburger.is-active) .header__logo-img {
    filter: brightness(0) !important;
}

[data-hero-theme="dark"] .header:not(.is-scrolled) { color: #fff; }
[data-hero-theme="dark"] .header:not(.is-scrolled) .header__logo-img { filter: brightness(0) invert(1); }
[data-hero-theme="light"] .header:not(.is-scrolled) { color: var(--color-main); }
[data-hero-theme="light"] .header:not(.is-scrolled) .header__logo-img { filter: brightness(0); }

/* ============================================================
   3. アニメーションパーツ（線、ボタン、枠など）
   ============================================================ */
.image-reveal-wrapper { position: relative; display: block; width: 100%; overflow: visible; }
.image-reveal-wrapper img { 
    opacity: 0; transform: translateY(20px); 
    transition: opacity 0.6s var(--transition-base), transform 0.6s var(--transition-base) !important; 
    transition-delay: 0s !important; 
}
.line-right, .line-bottom { position: absolute; background: var(--color-main); transition: transform 0.7s var(--transition-base) !important; z-index: 10 !important; }
.line-right { top: 15px; right: -15px; width: 1px; height: calc(100% + 15px); transform: scaleY(0); transform-origin: top; }
.line-bottom { bottom: -15px; left: 15px; width: calc(100% + 15px); height: 1px; transform: scaleX(0); transform-origin: left; }
.image-reveal-wrapper.is-active img { opacity: 1; transform: translateY(0); }
.image-reveal-wrapper.is-active .line-right { transform: scaleY(1); }
.image-reveal-wrapper.is-active .line-bottom { transform: scaleX(1); }

.base-events-dark .line-right, .base-events-dark .line-bottom, .footer .line-right, .footer .line-bottom, .is-dark-section .line-right, .is-dark-section .line-bottom, .tokyobase-parallax .line-right, .tokyobase-parallax .line-bottom { background: #ffffff !important; }

.btn-frame-draw {
    position: relative; display: inline-block; padding: 22px 70px; text-decoration: none;
    color: var(--color-main); font-size: 0.9rem; letter-spacing: 0.2em; font-weight: 500;
    background-color: transparent; transition: all 0.4s ease;
	margin-top: 50px;
}
.btn-frame-draw::before, .btn-frame-draw::after {
    content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    border: 1px solid currentColor; transform-origin: center;
    transition: transform 1.2s cubic-bezier(0.19, 1, 0.22, 1);
}
.btn-frame-draw::before { border-left: none; border-right: none; transform: scaleX(0); }
.btn-frame-draw::after { border-top: none; border-bottom: none; transform: scaleY(0); transition-delay: 0.2s; }
.btn-frame-draw.is-active::before { transform: scaleX(1); }
.btn-frame-draw.is-active::after { transform: scaleY(1); }
.btn-frame-draw:hover { background-color: var(--color-main) !important; color: #fff !important; }
a.btn-frame-draw--light { color: #ffffff !important; }
a.btn-frame-draw--light:hover { background-color: #ffffff !important; color: var(--color-main) !important; }

/* ============================================================
   4. トップページ特有のセクション
   ============================================================ */
.hero { position: relative; width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #000; }
.hero__bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
.hero__image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; opacity: 0; }
.hero__content { position: relative; z-index: 10; text-align: center; width: 100%; transition: color 0.6s; }
.hero__center-logo { margin: 0 auto 10px; height: 80px; width: auto; transition: filter 0.6s; }
.hero__main-title { font-size: clamp(3rem, 10vw, 4.5rem); letter-spacing: 0.4em; text-indent: 0.4em; font-weight: 500; line-height: 1.1; margin-bottom: 5px; }
.hero__sub-title { font-size: 1.1rem; letter-spacing: 0.3em; line-height: 1; margin-bottom: 25px; }
.hero__line { width: min(85%, 800px); height: 1px; margin: 0 auto 25px; transform: scaleX(0); animation: extendHeroLine 1.5s cubic-bezier(0.22, 1, 0.36, 1) 0.5s forwards; }
@keyframes extendHeroLine { to { transform: scaleX(1); } }
.hero__catchphrase { font-size: clamp(0.9rem, 2.5vw, 1.2rem); letter-spacing: 0.3em; font-weight: 300; line-height: 1.4; }
.hero__scroll { position: absolute; bottom: 80px; left: 50%; transform: translateX(-50%); z-index: 10; font-size: 0.65rem; letter-spacing: 0.4em; }
.hero__scroll span { display: block; writing-mode: vertical-rl; padding-bottom: 70px; position: relative; }
.hero__scroll span::after { content: ""; position: absolute; bottom: 0; left: 50%; width: 1px; height: 60px; animation: scrollLine 2.5s infinite; }
@keyframes scrollLine { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
[data-hero-theme="dark"] .hero__content, [data-hero-theme="dark"] .hero__scroll { color: #fff; }
[data-hero-theme="dark"] .hero__center-logo { filter: brightness(0) invert(1); }
[data-hero-theme="dark"] .hero__line, [data-hero-theme="dark"] .hero__scroll span::after { background: #fff; }

.section-title { font-size: 2.2rem; letter-spacing: 0.2em; margin-bottom: 80px; font-weight: 400; display: flex; flex-direction: column; gap: 15px; }
.section-subtitle { display: block; font-size: 0.9rem; letter-spacing: 0.15em; font-weight: 300; text-transform: lowercase; opacity: 0.7; }
.section-title.white { color: #fff; }

.philosophy__flex { display: flex; gap: 10%; align-items: flex-start; justify-content: space-between; }
.vertical-text { writing-mode: vertical-rl; height: 430px; font-size: 1.2rem; line-height: 2.8; margin-bottom: 60px; }
.philosophy__image-box { flex: 1.2; position: relative; overflow: visible; }
.philosophy__image-box img { width: 100%; object-fit: cover; }

.news { position: relative; background: var(--color-white); overflow: hidden; }
.news::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url("https://www.transparenttextures.com/patterns/natural-paper.png"); opacity: 0.4; pointer-events: none; z-index: 1; }
.news .container { position: relative; z-index: 10; }
.news__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 60px; margin-bottom: 40px; }
.news__img-wrap { aspect-ratio: 1/1; background: #f9f9f9; position: relative; overflow: visible; }
.news__img-wrap img { width: 100%; height: 100%; object-fit: cover; clip-path: inset(0); }
.news__item:hover img { transform: scale(1.05); }
.news__meta { font-size: 0.8rem; margin-top: 35px; margin-bottom: 10px; display: flex; gap: 20px; color: var(--color-accent); }
.news__title { font-size: 1.05rem; font-weight: 400; line-height: 1.7; color: var(--color-main); }

.tokyobase-parallax { position: relative; height: 100vh; display: flex; align-items: center; justify-content: center; color: #fff; text-align: center; overflow: hidden; }
.tokyobase-parallax__bg { position: absolute; top: -15%; left: 0; width: 100%; height: 130%; background-image: url('../images/base1.jpg'); background-size: cover; background-position: center; z-index: 1; }
.tokyobase-parallax__bg::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.35); }
.tokyobase-parallax__content { position: relative; z-index: 10; }
.tokyobase__line { width: 240px; height: 1px; background: rgba(255, 255, 255, 0.4); margin: 0 auto 30px; }
.tokyobase__concept { font-size: 1.6rem; font-weight: 500; line-height: 1.8; margin-bottom: 40px; letter-spacing: 0.2em; }

/* ============================================================
   5. 下層ページ：共通＆Tokyo Base
   ============================================================ */
.page-hero-impact { width: 100%; height: 60vh; background-color: #f0f0f0; position: relative; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; }
.page-hero-impact__bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; opacity: 0.15; filter: grayscale(100%); }
.page-hero-impact__content { position: relative; z-index: 10; }
.page-hero-impact__label { font-size: 0.7rem; letter-spacing: 0.3em; margin-bottom: 20px; color: #888; }
.page-hero-impact__title { font-size: clamp(3rem, 8vw, 6rem); font-style: italic; font-weight: 300; letter-spacing: 0.1em; margin-bottom: 10px; }
.page-hero-impact__subtitle { font-size: 0.9rem; letter-spacing: 0.5em; color: var(--color-main); }

.base-section-label { font-size: 0.65rem; letter-spacing: 0.3em; color: #aaa; margin-bottom: 20px; }
.base-section-title { font-size: 2.2rem; line-height: 1.6; margin-bottom: 60px; letter-spacing: 0.15em; font-weight: 500; }
.base-section-lead { font-size: 1rem; line-height: 2.6; color: #444; margin-bottom: 45px; letter-spacing: 0.05em; }
.base-section-lead strong { font-weight: 600; color: var(--color-main); padding: 0 2px; background: linear-gradient(transparent 80%, rgba(43, 43, 43, 0.1) 80%); }

.base-intro-new { position: relative; padding: var(--section-padding) 0; background-color: #f1ede4; overflow: hidden; text-align: center;}
.base-intro-new::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url("https://www.transparenttextures.com/patterns/handmade-paper.png"); opacity: 0.5; pointer-events: none; z-index: 1; }
.base-intro-new .container--narrow { position: relative; z-index: 2; }
.base-intro-new__text { text-align: left; }
.base-intro-new__text .base-section-title { color: #1a1a1a; text-shadow: 0.5px 0.5px 1px rgba(0,0,0,0.05); }
.base-intro-sub-title { font-size: 1.2rem; font-weight: 500; color: var(--color-accent); margin: 60px 0 30px; display: flex; align-items: center; gap: 15px; }
.base-intro-sub-title::after { content: ""; flex: 1; height: 1px; background: rgba(0,0,0,0.1); }
.base-intro-closing { margin-top: 80px; padding: 40px; background: rgba(255, 255, 255, 0.4); border-left: 2px solid var(--color-main); position: relative; }

.base-intro-new__gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 80px; align-items: start; }
.base-intro-new__gallery .image-reveal-wrapper { width: 100%; aspect-ratio: 3 / 4; overflow: visible; }
.base-intro-new__gallery img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 1.2s var(--transition-base); }

.base-events-dark { background-color: var(--color-main); color: #fff; padding: var(--section-padding) 0; position: relative; }
.base-events-dark::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: radial-gradient(circle at 100% 100%, transparent 49.8%, rgba(255,255,255,0.02) 49.9%, rgba(255,255,255,0.02) 50.1%, transparent 50.2%); background-size: 300px 300px; opacity: 0.5; pointer-events: none; }
.base-events-pattern { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px); background-size: 400px 400px; opacity: 0.8; pointer-events: none; z-index: 1; }
.base-section-label.white { color: rgba(255,255,255,0.4); }
.base-section-title.white { color: #fff; margin-bottom: 80px; }
.base-events-dark__lead { font-size: 1.05rem; line-height: 2.2; color: rgba(255, 255, 255, 0.85); max-width: 750px; margin-top: -30px; margin-bottom: 80px; letter-spacing: 0.05em; }

.event-strong-list { position: relative; z-index: 10; }
.event-strong-item { display: flex; gap: 80px; align-items: center; margin-bottom: 120px; }
.event-strong-item:nth-child(even) { flex-direction: row-reverse; }
.event-strong-item__img { flex: 1; aspect-ratio: 16/10; overflow: hidden; }
.event-strong-item__img img { width: 100%; height: 100%; object-fit: cover; opacity: 0.8; }
.event-strong-item__body { flex: 1; }
.event-strong-item__body time { font-size: 0.9rem; letter-spacing: 0.2em; color: var(--color-accent); display: block; margin-bottom: 15px; }
.event-strong-item__body h4 { font-size: 1.8rem; font-weight: 700; margin-bottom: 20px; letter-spacing: 0.1em; }
.event-strong-item__line { width: 60px; height: 2px; background: var(--color-accent); margin-bottom: 30px; }
.event-strong-item__body p { line-height: 2; opacity: 0.8; margin-bottom: 40px; }

.base-pr-field { padding: var(--section-padding) 0; background-color: var(--color-base); }
.pr-usage { display: flex; gap: 80px; align-items: flex-start; margin-top: 80px; }
.pr-usage__img { flex: 1.2; height: 550px; }
.pr-usage__img img { width: 100%; height: 100%; object-fit: cover; }
.pr-usage__text { flex: 1; padding-top: 20px; }
.pr-usage__num { display: block; font-size: 0.7rem; letter-spacing: 0.3em; color: var(--color-accent); margin-bottom: 15px; font-family: var(--font-serif); }
.pr-usage__h3 { font-size: 1.6rem; line-height: 1.6; margin-bottom: 40px; font-weight: 500; }
.pr-usage__p { font-size: 0.95rem; line-height: 2.3; color: #444; }

.base-senses-deep { padding: var(--section-padding) 0; background-color: var(--color-base); position: relative; }
.senses-header { margin-bottom: 100px; max-width: 850px; }
.senses-grid { display: flex; flex-wrap: wrap; gap: 60px 30px; justify-content: space-between; }
.senses-card { flex: 0 0 calc(33.333% - 20px); display: flex; flex-direction: column; }
.senses-card:nth-child(n+4) { flex: 0 0 calc(40% - 15px); margin: 0 5%; }
.senses-card__img-wrap.image-reveal-wrapper { width: 100%; aspect-ratio: 4 / 5; overflow: visible; margin-bottom: 30px; position: relative; }
.senses-card__img-wrap img { width: 100%; height: 100%; object-fit: cover; clip-path: inset(0); }
.senses-card__label { position: absolute; top: 0; right: -30px; background: var(--color-main); color: #fff; font-size: 0.6rem; padding: 10px 15px; letter-spacing: 0.3em; writing-mode: vertical-rl; z-index: 10; }
.senses-card__body h3 { font-size: 1.2rem; font-weight: 500; margin-bottom: 20px; letter-spacing: 0.1em; }

.base-staff-cool { background-color: #e8eaed; padding: var(--section-padding) 0; }
.staff-new-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: stretch; margin-top: 60px; }
.staff-new-item { display: flex; flex-direction: column; background: rgba(255, 255, 255, 0.6); padding: 50px 40px; height: 100%; transition: 0.6s var(--transition-base); }
.staff-new-item:hover { background: #fff; transform: translateY(-10px); }
.identity-visual { width: 100%; height: 280px; margin: 30px 0; overflow: hidden; background: #f8f8f8; }
.identity-visual img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%); transition: filter 0.6s ease; }
.staff-new-item:hover .identity-visual img { filter: grayscale(0%); }
.identity-visual--logo { display: flex; align-items: center; justify-content: center; background: #fdfdfd; }
.identity-logo-img { width: auto !important; height: 200px !important; object-fit: contain !important; filter: brightness(0); }
.staff-new-body h4 { font-size: 1.15rem; margin-bottom: 10px; font-weight: 500; }
.staff-new-body .role { font-size: 0.7rem; color: var(--color-accent); margin-bottom: 8px; font-weight: 700; }

.base-access-split { padding: var(--section-padding) 0; background: var(--color-base); }
.access-split-flex { display: flex; gap: 80px; align-items: center; }
.access-split-info { flex: 1; }
.access-split-map { flex: 1.4; }
.map-frame { width: 100%; aspect-ratio: 16/9; background: #e0ddd5; display: flex; align-items: center; justify-content: center; color: #aaa; font-size: 0.7rem; letter-spacing: 0.3em; }
.access-row { display: flex; padding: 22px 0; border-bottom: 1px solid rgba(0,0,0,0.08); }
.access-row .label { width: 140px; font-size: 0.7rem; color: #999; letter-spacing: 0.2em; }
.access-row p { flex: 1; font-size: 0.95rem; line-height: 1.7; }

.base-closing { padding: 160px 0 120px; text-align: center; background-color: var(--color-base); }
.base-closing__lead { font-size: clamp(1.4rem, 4vw, 1.8rem); line-height: 2.2; font-style: italic; font-weight: 300; margin-bottom: 50px; letter-spacing: 0.25em; color: var(--color-main); }
.base-closing__line { width: 100%; max-width: 1000px; height: 1px; background: rgba(0, 0, 0, 0.08); margin: 0 auto 40px; }
.base-closing__sub { font-size: 0.65rem; letter-spacing: 0.5em; color: #999; margin-right: -0.5em; }

/* ============================================================
   6. 下層ページ：Company & Partners
   ============================================================ */
.corp-vision { padding: 160px 0 120px; }
.corp-vision__title { font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.3; margin-bottom: 60px; font-weight: 600; letter-spacing: 0.02em; }
.corp-vision__lead-wrap { display: grid; grid-template-columns: repeat(12, 1fr); gap: 40px; }
.corp-vision__lead { grid-column: 1 / 7; font-size: 1.2rem; line-height: 2.2; font-weight: 500; }
.corp-vision__text { grid-column: 7 / 13; font-size: 0.9rem; line-height: 2.4; color: #555; }

.corp-message { padding: 140px 0; background-color: var(--color-base); }
.corp-message__grid { display: grid; grid-template-columns: repeat(12, 1fr); align-items: center; gap: 80px; }
.corp-message__img-area { grid-column: 1 / 8; }
.corp-message__img-area .director-img-wrap { width: 100%; aspect-ratio: 1 / 1 !important; overflow: hidden; }
.corp-message__img-area img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%) contrast(1.1); transition: transform 1.5s var(--transition-base); }
.corp-message__text-area { grid-column: 8 / 13; }
.corp-message__catch { font-size: 1.6rem; line-height: 1.5; margin: 30px 0; font-weight: 600; font-family: var(--font-serif); }
.corp-message__body p { font-size: 0.9rem; line-height: 2.2; color: #444; margin-bottom: 25px; }

.corp-profile { padding: 120px 0; background-color: var(--color-base); }
.profile-table { border-top: 1px solid var(--color-main); padding-top: 40px; }
.profile-table__title { font-size: 0.7rem; letter-spacing: 0.4em; color: var(--color-accent); margin-bottom: 40px; font-weight: 500; }
.profile-row { display: flex; padding: 28px 0; border-bottom: 1px solid rgba(0,0,0,0.08); }
.profile-row dt { flex: 0 0 220px; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.1em; color: var(--color-main); }
.profile-row dd { flex: 1; font-size: 0.95rem; line-height: 1.8; color: #444; }

.plan-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 30px !important; }
.plan-card-dark { background-color: var(--color-main) !important; color: #fff !important; border-radius: 24px !important; padding: 50px 30px !important; text-align: center; border: none !important; transition: transform 0.4s ease, box-shadow 0.4s ease !important; }
.plan-card-dark:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.2); }
.plan-card-dark.is-recommend { background-color: #3a3a3a !important; position: relative; transform: scale(1.05); z-index: 2; }
.plan-icon { font-size: 2.5rem; margin-bottom: 20px; color: rgba(255,255,255,0.9); }
.plan-card-dark .role { color: rgba(255,255,255,0.5) !important; letter-spacing: 0.2em; font-size: 0.7rem; }
.plan-card-dark h4 { font-size: 1.3rem !important; margin: 10px 0 20px !important; }
.plan-card-dark .price { font-size: 2rem !important; font-weight: 500; margin-bottom: 25px !important; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 20px; }
.plan-card-dark .price span { font-size: 0.8rem; opacity: 0.6; }
.plan-card-dark .plan-desc { font-size: 0.85rem !important; line-height: 1.8 !important; opacity: 0.8; }

.corp-contact { padding: 140px 0; text-align: center; }
.btn-corp { display: inline-block; margin-top: 50px; padding: 24px 80px; background-color: var(--color-main); color: #ffffff !important; text-decoration: none; font-size: 0.95rem; letter-spacing: 0.2em; font-weight: 500; border: 1px solid var(--color-main); transition: all 0.4s ease; cursor: pointer; }
.btn-corp:hover { background-color: transparent; color: var(--color-main) !important; transform: translateY(-2px); }

/* ============================================================
   7. 下層ページ：News & Contact Form
   ============================================================ */
.news-archive__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 80px 40px; margin-bottom: 100px; }
.news-item__link:hover img { transform: scale(1.05); }
.news-item__meta { display: flex; gap: 20px; font-size: 0.8rem; margin: 30px 0 15px; color: #888; }
.news-item__title { font-size: 1.1rem; line-height: 1.7; font-weight: 500; }
.pagination { display: flex; justify-content: center; align-items: center; gap: 30px; font-size: 0.85rem; letter-spacing: 0.2em; }
.pagination a:hover { opacity: 0.5; }
.pagination .current { border-bottom: 1px solid var(--color-main); }

.post-detail { padding-top: 180px; }
.post-detail__meta { margin-bottom: 30px; display: flex; gap: 20px; font-size: 0.9rem; color: #888; }
.post-detail__title { font-size: clamp(1.8rem, 5vw, 2.5rem); line-height: 1.4; margin-bottom: 80px; }
.post-detail__visual { width: 100%; max-width: 900px; margin: 0 auto 100px; padding: 0 4%; }
.post-detail__visual img { aspect-ratio: 16/9; object-fit: cover; }
.content-area { line-height: 2.2; font-size: 1.05rem; }
.content-area p { margin-bottom: 40px; text-align: justify; }
.content-area h2 { font-size: 1.6rem; margin: 80px 0 40px; border-left: 2px solid var(--color-main); padding-left: 30px; }
.content-area img { margin: 60px 0 20px; width: 100%; }
.content-area figcaption { font-size: 0.8rem; text-align: center; color: #888; margin-bottom: 60px; }
.post-detail__footer { text-align: center; padding: 100px 0 160px; }

.contact-form { max-width: 800px; margin: 0 auto; }
.form-item { margin-bottom: 40px; text-align: left; }
.form-item label { display: block; font-size: 0.85rem; font-weight: 500; margin-bottom: 12px; letter-spacing: 0.1em; }
.form-item .required { font-size: 0.65rem; background: var(--color-main); color: #fff; padding: 2px 8px; margin-left: 10px; vertical-align: middle; border-radius: 2px; }
.form-item input[type="text"], .form-item input[type="email"], .form-item input[type="tel"], .form-item select, .form-item textarea { width: 100%; background: rgba(255, 255, 255, 0.4); border: 1px solid rgba(0, 0, 0, 0.1); padding: 15px 20px; font-family: var(--font-serif); font-size: 1rem; color: var(--color-main); border-radius: 4px; transition: all 0.4s ease; outline: none; }
.form-item input:focus, .form-item select:focus, .form-item textarea:focus { background: #fff; border-color: var(--color-main); }
.select-wrapper { position: relative; }
.select-wrapper::after { content: "↓"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); pointer-events: none; font-size: 0.8rem; opacity: 0.5; }
.select-wrapper select { appearance: none; -webkit-appearance: none; }
.form-policy { text-align: center; margin: 60px 0 40px; font-size: 0.85rem; }
.form-policy a { text-decoration: underline; opacity: 0.7; }
.checkbox-label { display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; cursor: pointer; }

/* ============================================================
   8. フッター・装飾パーツ
   ============================================================ */
.footer { position: relative; background: var(--color-main); color: #fff; padding: 140px 0 60px; overflow: hidden; }
.footer__pattern { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: radial-gradient(circle at 100% 100%, transparent 49.8%, rgba(255,255,255,0.02) 49.9%, rgba(255,255,255,0.02) 50.1%, transparent 50.2%), radial-gradient(circle at 0% 100%, transparent 49.8%, rgba(255,255,255,0.02) 49.9%, rgba(255,255,255,0.02) 50.1%, transparent 50.2%), radial-gradient(circle at 100% 0%, transparent 49.8%, rgba(255,255,255,0.02) 49.9%, rgba(255,255,255,0.02) 50.1%, transparent 50.2%), radial-gradient(circle at 0% 0%, transparent 49.8%, rgba(255,255,255,0.02) 49.9%, rgba(255,255,255,0.02) 50.1%, transparent 50.2%); background-size: 500px 500px; pointer-events: none; z-index: 1; }
.footer__inner { position: relative; z-index: 10; display: flex; justify-content: space-between; margin-bottom: 100px; }
.footer__logo { display: flex; align-items: center; gap: 15px; }
.footer__logo-img { height: 35px; width: auto; filter: brightness(0) invert(1); }
.footer__logo-text { font-size: 1.15rem; font-weight: 500; letter-spacing: 0.15em; color: #fff; }
.footer__links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px 80px; }
.footer__links a { font-size: 0.85rem; opacity: 0.6; }
.copyright { position: relative; z-index: 10; text-align: center; font-size: 0.7rem; opacity: 0.4; border-top: 1px solid rgba(255,255,255,0.08); padding-top: 40px; }

.pagetop { position: fixed; right: 4%; bottom: 50px; z-index: 100; background: transparent; border: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 15px; opacity: 0; visibility: hidden; transform: translateY(20px); transition: opacity 0.8s var(--transition-base), visibility 0.8s, transform 0.8s var(--transition-base), color 0.4s ease; width: 120px; color: var(--color-main); }
.pagetop.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.pagetop__text { font-size: 0.65rem; letter-spacing: 0.3em; font-family: var(--font-serif); }
.pagetop__line { width: 1px; height: 60px; background: currentColor; transition: transform 0.6s var(--transition-base); transform-origin: top; }
.pagetop:hover .pagetop__line { transform: scaleY(1.3); }
.pagetop.is-light { color: #fff !important; }

.fixed-pattern-right { position: fixed; top: 0; right: 4%; width: 120px; height: 100vh; z-index: 5; pointer-events: none; opacity: 0.05; background-image: radial-gradient(circle at 100% 100%, transparent 49%, var(--color-main) 50%, transparent 51%), radial-gradient(circle at 0% 100%, transparent 49%, var(--color-main) 50%, transparent 51%), radial-gradient(circle at 100% 0%, transparent 49%, var(--color-main) 50%, transparent 51%), radial-gradient(circle at 0% 0%, transparent 49%, var(--color-main) 50%, transparent 51%); background-size: 120px 120px; background-repeat: repeat-y; }
[data-hero-theme="dark"] ~ .fixed-pattern-right { filter: invert(1); }

/* ============================================================
   9. ハンバーガー＆モバイルメニュー (最新修正版)
   ============================================================ */
.header__hamburger {
    display: none; width: 30px; height: 20px; position: relative;
    background: none; border: none; cursor: pointer; 
    z-index: 2000 !important; color: inherit;
}
.header__hamburger span {
    display: block; position: absolute; left: 0; width: 100%; height: 1px;
    background-color: currentColor; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s;
}
.header__hamburger span:nth-child(1) { top: 0; }
.header__hamburger span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.header__hamburger span:nth-child(3) { bottom: 0; }
.header__hamburger.is-active span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
.header__hamburger.is-active span:nth-child(2) { opacity: 0; }
.header__hamburger.is-active span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

.mobile-menu {
    position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
    background-color: var(--color-base); z-index: 1500; 
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    visibility: hidden; opacity: 0; transition: opacity 0.4s, visibility 0.4s;
}
.mobile-menu__header { margin-bottom: 60px; text-align: center; }
.mobile-menu__title { font-size: 0.75rem; letter-spacing: 0.5em; color: var(--color-main); font-weight: 500; margin-bottom: 15px; opacity: 0.8; }
.mobile-menu__title-line { width: 40px; height: 1px; background-color: var(--color-main); margin: 0 auto; opacity: 0.3; }
.mobile-menu__nav { text-align: center; list-style: none; }
.mobile-menu__nav li { margin-bottom: 30px; }
.mobile-menu__nav a { position: relative; text-decoration: none; padding-bottom: 4px; }
.mobile-menu__nav a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background-color: currentColor; transform: scaleX(0); transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); transform-origin: right; }
.mobile-menu__nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.mobile-menu__nav a span { display: block; font-size: 0.7rem; color: #999; margin-bottom: 5px; }

/* ============================================================
   10. レスポンシブ (スマホ・タブレット)
   ============================================================ */
@media (max-width: 1024px) {
    /* ナビ切り替え */
    .header__hamburger { display: block !important; }
    .header__nav { display: none !important; }
    .fixed-pattern-right { display: none; }
    
    /* スマホ時はヘッダーを独立させる */
    .header { background-color: rgba(241, 237, 228, 0.98); border-bottom: 1px solid rgba(0, 0, 0, 0.05); }
    [data-hero-theme="dark"] .header:not(.is-scrolled) { background-color: transparent; border-bottom: none; }

    /* トップページ余白と縦並び */
    section { padding: 100px 0; }
    .philosophy__flex { flex-direction: column; gap: 60px; }
    .philosophy__image-box { width: 100%; }
    .vertical-text { height: 320px; margin-bottom: 40px; }
    .news__grid { grid-template-columns: 1fr; gap: 40px; }
    .tokyobase__concept { font-size: 1.3rem; }

    /* 下層ページ縦並び */
    .base-events-new__flex, .base-intro-new__gallery, .event-strong-item, .access-split-flex, .pr-usage { flex-direction: column !important; gap: 40px; }
    .senses-card, .senses-card:nth-child(n+4) { flex: 0 0 calc(50% - 15px); margin: 0; }
    .staff-new-grid { grid-template-columns: 1fr; }
    .corp-identity__grid, .details-grid, .news-archive__grid, .plan-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
    
    /* フッター */
    .footer { padding: 100px 0 40px; }
    .footer__inner { flex-direction: column; gap: 50px; text-align: center; }
    .footer__logo { justify-content: center; }
    .footer__links { grid-template-columns: 1fr; gap: 40px; }
    .footer__links ul { display: flex; flex-direction: column; gap: 15px; }
}

@media (max-width: 768px) {
    .hero__main-title { font-size: clamp(2.5rem, 8vw, 3rem); }
    .section-title { font-size: 1.8rem; margin-bottom: 60px; }
    .senses-card, .senses-card:nth-child(n+4) { flex: 0 0 100%; }
    .base-intro-new__gallery .image-reveal-wrapper { aspect-ratio: 4 / 5; }
    .corp-message__grid { display: block; }
    .corp-message__img-area { margin-bottom: 40px; }
    .profile-row { flex-direction: column; gap: 10px; padding: 20px 0; }
    .profile-row dt { flex: 0 0 auto; font-size: 0.75rem; }
    .form-item { margin-bottom: 30px; }

    /* 文字左寄せ・サイズ調整 */
    .base-section-label { text-align: left !important; display: block; }
    .base-section-title { font-size: 1.5rem !important; text-align: left !important; margin-bottom: 30px !important; line-height: 1.6; }
    .base-section-lead, .base-intro-sub-title { font-size: 0.95rem !important; text-align: left !important; }
    .base-intro-new__text, .base-intro-new .container--narrow, .base-intro-closing { text-align: left !important; }
}

/* ============================================================
   COMPANY: 三つの機能（カード型）＆ 三つの事業（カード型）
   ============================================================ */

/* --- 三つの機能 (IDENTITY) --- */
.corp-identity__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.identity-card {
    background: #ffffff;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03); /* 和紙に落ちるような極薄い影 */
    transition: transform 0.6s var(--transition-base), box-shadow 0.6s ease;
}

.identity-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06);
}

.identity-card__img {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: visible; /* 右下の線を出すために必須 */
    margin-bottom: 30px;
}

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

.identity-card__title {
    font-size: 1.15rem;
    font-weight: 500;
    margin-bottom: 15px;
    letter-spacing: 0.1em;
    border-bottom: 1px solid rgba(0,0,0,0.1); /* タイトル下に上品な線 */
    padding-bottom: 15px;
}

.identity-card__desc {
    font-size: 0.85rem;
    line-height: 2;
    color: #555;
    text-align: justify;
}

/* --- 三つの事業 (BUSINESS) --- */
.business-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.business-card {
    background: rgba(255, 255, 255, 0.03); /* 墨色に透ける極薄の白 */
    border: 1px solid rgba(255, 255, 255, 0.1); /* 繊細な枠線 */
    padding: 50px 30px;
    text-align: center;
    transition: transform 0.6s var(--transition-base), background 0.6s ease;
}

.business-card:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.08); /* ホバーで少し明るく浮き上がる */
}

.business-card__icon {
    width: 50px;
    height: 50px;
    margin: 0 auto 30px;
    color: rgba(255, 255, 255, 0.9);
}

.business-card__icon svg {
    width: 100%;
    height: 100%;
}

.business-card__title {
    font-size: 1.2rem;
    font-weight: 500;
    margin-bottom: 20px;
    letter-spacing: 0.1em;
}

.business-card__desc {
    font-size: 0.85rem;
    line-height: 1.9;
    color: rgba(255, 255, 255, 0.6);
    text-align: justify;
}

/* スマホ対応 (1024px以下で1カラムの縦並びに) */
@media (max-width: 1024px) {
    .corp-identity__grid,
    .business-grid {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }
}

/* ============================================================
   PCヘッダーナビゲーションのホバーアニメーション復活
   ============================================================ */
.header__nav a {
    position: relative;
    text-decoration: none;
    padding-bottom: 4px; /* 下線の余白 */
}

.header__nav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: currentColor; /* 文字色に自動で合わせる */
    transform: scaleX(0);
    transform-origin: right; /* マウスが外れた時は右に消える */
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.header__nav a:hover::after {
    transform: scaleX(1);
    transform-origin: left; /* マウスを乗せたら左から伸びる */
}

/* ============================================================
   トップページ：スマホ表示のレイアウト微調整
   ============================================================ */
@media (max-width: 768px) {
    /* 1. 縦書きの改行防止（高さを確保して1行に収める） */
    .vertical-text {
        height: 420px !important; /* 文字数に合わせて高さを拡張 */
        margin: 0 auto 50px;
    }

    /* 2. VIEW MOREボタンの中央寄せ＆サイズダウン */
    .philosophy__text-box .btn-frame-draw {
        display: block;
        width: fit-content; /* 中身のテキスト幅に合わせる */
        margin: 0 auto; /* 左右の余白を自動にして中央寄せ */
        padding: 14px 40px !important; /* 枠を小さく（元は22px 70px） */
        font-size: 0.8rem; /* 文字も少し小さく */
    }

    /* 3. 画像右側のライン見切れ防止（右に余白を作る） */
    .philosophy__image-box {
        /* 右の線がはみ出さないよう、画像の幅を少し狭めて右に寄せる */
        width: calc(100% - 20px) !important; 
        margin-right: 20px; 
    }
}

@media (max-width: 768px) {
    /* 5つのカードすべての画像に対して、右側に20pxの余白を強制的に作る */
    .senses-card__img-wrap.image-reveal-wrapper {
        width: calc(100% - 20px) !important;
        margin-right: 20px !important;
    }
}

/* ============================================================
   出展について (partners.html) : スマホ用の縦並び調整
   ============================================================ */
@media (max-width: 1024px) {
    /* base-intro-new の中にある横並びの要素（フレックスボックス）を強制的に縦並びにする */
    .base-intro-new {
        height: auto !important; /* 高さが固定されてフッターが消えるのを防ぐ */
    }

    .base-intro-new .container,
    .base-intro-new .container--narrow,
    .base-intro-new [style*="display: flex"], /* HTMLで直接flexを書いている場合の保険 */
    .base-intro-new__flex { /* クラス名で分けている場合 */
        display: flex !important;
        flex-direction: column !important; /* 縦並びに変更 */
        gap: 50px !important; /* 縦の余白 */
    }

    /* 縦並びになった時の横幅をリセット */
    .base-intro-new > div > div {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* 中の画像をスマホ画面幅に合わせる */
    .base-intro-new img {
        width: 100%;
        height: auto;
    }
}

/* インラインスタイルの flex-reverse をスマホで解除する */
.flex-reverse {
    flex-direction: row-reverse;
}

@media (max-width: 1024px) {
    /* インラインスタイルを強制的に打ち消して縦並びにする */
    .philosophy__flex, 
    .philosophy__flex.flex-reverse {
        flex-direction: column !important;
        gap: 60px !important;
    }

    .philosophy__image-box, 
    .philosophy__text-box {
        width: 100% !important;
        flex: none !important;
    }

    /* 背景が薄いグレーの指定用クラス（任意） */
    .u-bg-pale {
        background-color: rgba(0,0,0,0.02) !important;
    }
}

/* --- レイアウトユーティリティ --- */
.u-flex-reverse {
    flex-direction: row-reverse;
}

.u-bg-gray {
    background-color: rgba(0,0,0,0.02) !important;
}

/* --- スマホ時のサムネイル右側余白 & 縦並び強制 --- */
@media (max-width: 1024px) {
    /* 全てのフレックスボックスを縦並びにする */
    .philosophy__flex,
    .philosophy__flex.u-flex-reverse,
    .access-split-flex {
        flex-direction: column !important;
        gap: 50px !important;
    }

    /* サムネイルの右側にライン用の余白(20px)を確保 */
    .image-reveal-wrapper {
        width: calc(100% - 20px) !important;
        margin-right: 20px !important;
    }

    .philosophy__image-box,
    .philosophy__text-box,
    .access-split-info,
    .access-split-map {
        width: 100% !important;
    }
}

/* フッターの表示を確実にする */
.footer {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* ============================================================
   お知らせ一覧 (news.html) サムネイル統一調整
   ============================================================ */

/* 一覧のグリッド設定（PCで3列） */
.news-archive__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px 40px;
    margin-bottom: 80px;
}

/* 画像ラッパーの縦横比を固定（3:2など） */
.news-item__img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2; /* これで全ての画像が同じ比率になります */
    overflow: hidden;
    margin-bottom: 25px;
}

/* 画像自体の設定（枠いっぱいに広げて切り抜き） */
.news-item__img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 縦横比を維持したまま、枠を埋める */
    transition: transform 1.2s var(--transition-base);
}

/* ホバー時に画像をわずかに拡大 */
.news-item__link:hover img {
    transform: scale(1.08);
}

/* スマホ対応：2列または1列へ */
@media (max-width: 900px) {
    .news-archive__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 20px;
    }
}

@media (max-width: 600px) {
    .news-archive__grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   VISIONセクション：レスポンシブ修正（横書き・縦並び）
   ============================================================ */
@media (max-width: 1024px) {
    /* 1. タイトルをスマホ向けにサイズ調整（横書き維持） */
    .corp-vision__title {
        font-size: 1.8rem !important;
        line-height: 1.4;
        margin-bottom: 40px;
    }

    /* 2. 2カラムを解除して縦に並べる */
    .corp-vision__lead-wrap {
        display: block !important; /* グリッドを解除 */
        writing-mode: horizontal-tb !important; /* 横書きを強制 */
    }

    /* 3. 各文章の横幅を100%にして余白を作る */
    .corp-vision__lead, 
    .corp-vision__text,
	.corp-message__catch {
        width: 100% !important;
        margin-bottom: 30px;
        font-size: 0.95rem;
        line-height: 2;
    }

    /* 4. 不要な装飾ラインを消去 */
    .corp-vision__bg-line {
        display: none !important;
    }
}

/* ============================================================
   VISIONセクション：レスポンシブ中央寄せ・縦書きレイアウト
   ============================================================ */
@media (max-width: 1024px) {
    /* 1. コンテナをフレックスにして中身を中央に寄せる */
    .corp-vision .container {
        display: flex;
        flex-direction: column;
        align-items: center; /* 横方向の中央寄せ */
        justify-content: center;
    }

    /* 2. タイトルは横書きのまま、中央配置 */
    .corp-vision__title {
        writing-mode: horizontal-tb !important;
        text-align: center;
        margin: 0 auto 60px !important;
        font-size: 1.8rem !important;
        border: none !important; /* ライン不要 */
        padding: 0 !important;
    }

    /* 3. 本文エリアを「縦書き」かつ「中央寄せ」に */
    .corp-vision__lead-wrap {
        display: flex !important;
        flex-direction: row-reverse !important; /* 右から左へ流れる */
        writing-mode: vertical-rl; /* 縦書き実行 */
        margin: 0 auto; /* ブロック自体を中央に */
        height: 50vh; /* 縦書きの「高さ」を固定して中央感を出す */
        min-height: 400px;
        gap: 30px !important;
        justify-content: center; /* 縦書き内での中央配置 */
    }

    /* 4. 縦書き内のテキスト設定 */
    .corp-vision__lead, 
    .corp-vision__text {
        width: auto !important;
        height: 100%;
        line-height: 2.4 !important;
        margin: 0 !important;
    }

    /* 5. 背景の装飾ラインを完全に消去 */
    .corp-vision__bg-line {
        display: none !important;
    }
}

/* ============================================================
   ヒーロー中央ロゴのカラー制御
   ============================================================ */

/* 1. 基本（ダークテーマ時：白） */
.hero__center-logo {
    color: var(--color-white);
    transition: color 0.8s ease, filter 0.8s ease;
    z-index: 10;
}

/* 2. ライトテーマ時（背景が明るい時）：ここを強制的に黒にする */
[data-hero-theme="light"] .hero__center-logo {
    color: var(--color-main) !important; /* 墨色 #2b2b2b */
}

/* 3. ロゴが画像（imgタグ）の場合の処理 */
[data-hero-theme="light"] .hero__center-logo img {
    /* 画像が元々「白」なら、brightness(0) で真っ黒になります。
       完全な黒ではなく --color-main に近づけたい場合は invert を使います。
    */
    filter: brightness(0) !important; 
    /* もし真っ黒すぎたら以下のように調整してください */
    /* filter: invert(13%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(88%); */
}

/* --- ヒーロー中央ロゴのカラー反転 (追記) --- */

/* 背景が明るい画像(lightテーマ)の時、中央ロゴを黒くする */
[data-hero-theme="light"] .hero__center-logo {
    /* 画像を真っ黒にする指定 */
    filter: brightness(0) !important; 
}

/* ついでにテキスト（メインタイトル等）も黒くする場合 */
[data-hero-theme="light"] .hero__content {
    color: var(--color-main) !important;
}

/* ついでに中央の線も黒くする場合 */
[data-hero-theme="light"] .hero__line {
    background: var(--color-main) !important;
}

/* ============================================================
   PHILOSOPHY: 最初の2カラム画像をスマホで横長・縦並びに
   ============================================================ */
@media (max-width: 768px) {
    /* 1. コンテナを縦並びに切り替え */
    .philosophy-hero__images, /* 実際の画像グリッドのクラス名 */
    .philosophy__flex-images { 
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important; /* 画像間の隙間 */
    }

    /* 2. 画像を「横長」に固定してトリミング */
    .philosophy-hero__images .image-reveal-wrapper,
    .philosophy__flex-images .image-reveal-wrapper {
        width: calc(100% - 20px) !important; /* 右側の装飾ライン用の余白 */
        margin-right: 20px !important;
        aspect-ratio: 3 / 2 !important; /* ここで「横長」を指定 */
        height: auto !important;
    }

    .philosophy-hero__images img,
    .philosophy__flex-images img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important; /* 比率が変わっても中央で綺麗に切り抜き */
    }
}

@media (max-width: 768px) {
  .vertical-text {
    writing-mode: vertical-rl; /* 念のため記述 */
    width: fit-content;        /* 【重要】幅を文字のボリュームに合わせる */
    height: 420px !important;
    margin: 0 auto 50px !important;
    display: block;            /* 確実にブロック要素にする */
  }
}

/* ============================================================
   COMPANY / PHILOSOPHY: レスポンシブ縦並び・横書き完全修正
   ============================================================ */
@media (max-width: 1024px) {

    /* --- 1. VISIONセクション (company.html) --- */
    
    .corp-vision__content {
        /* Gridの 80px 1fr 指定を完全に無効化するために block に変更 */
        display: block !important; 
        padding: 0;
    }

    .corp-vision__title {
        /* スマホ向けにフォントサイズと余白を最適化 */
        font-size: 1.8rem !important;
        line-height: 1.5;
        margin: 20px 0 40px !important;
        writing-mode: horizontal-tb !important;
    }

    .corp-vision__lead-wrap {
        /* 横並びを解除し、全幅表示へ */
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .corp-vision__lead, 
    .corp-vision__text {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 30px;
        /* 改めて横書きを定義 */
        writing-mode: horizontal-tb !important; 
        line-height: 2.0;
    }


    /* --- 2. PHILOSOPHY最初のセクション (縦長→横長画像へ) --- */

    .philosophy__flex {
        /* Flexの方向を縦に切り替え */
        display: flex !important;
        flex-direction: column !important;
        gap: 50px !important; /* 画像と文章の間の「間」 */
    }

    .philosophy__image-box, 
    .philosophy__text-box {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
    }

    /* 画像：縦長を「横長(16:9)」にトリミング */
    .philosophy__image-box .image-reveal-wrapper {
        aspect-ratio: 16 / 9 !important; /* スマホで最も美しく見える比率 */
        width: calc(100% - 20px) !important; /* 右側の装飾ライン用のスペース */
        margin-right: 20px !important;
        margin-bottom: 0;
    }

    .philosophy__image-box img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important; /* 比率が変わっても中央を綺麗に切り抜く */
    }
}


@media (max-width: 768px) {
    /* 1. ギャラリー全体の縦の隙間を調整 */
    .base-intro-new__gallery {
        grid-template-columns: 1fr !important; /* 1カラム */
        row-gap: 50px !important;    /* 【重要】画像と画像の下の余白（お好みで数値変更） */
        gap: 50px !important;        /* rowとcolumn両方に効かせたい場合 */
        margin-top: 60px !important;
    }

    /* 2. 画像そのものに発生する「謎の数ピクセルの隙間」を消す */
    .base-intro-new__gallery img {
        display: block !important;    /* これで画像下の微細な隙間が消えます */
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    /* 3. 装飾ラインが画像に近すぎる場合の調整 */
    .base-intro-new__gallery .image-reveal-wrapper {
        margin-bottom: 10px !important; /* ラインの外側に少し余白を足す場合 */
    }
}


/* ============================================================
   1. ヘッダー基本構造 (PC/SP共通)
   ============================================================ */
.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between; /* 常に両端に振り分け */
    width: 100%;
}

.header__nav {
    margin-left: auto; /* ナビを右側に寄せる */
}

/* --- ヘッダーSNSアイコン (PC用) --- */
.header__sns {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-left: 25px; /* お問合せボタンとの距離 */
}

.header__sns a {
    /* 何があっても黒（墨色）で固定 */
    color: #2b2b2b !important;
    font-size: 1.2rem;
    transition: opacity 0.3s ease;
}

.header__sns a:hover {
    opacity: 0.5;
}


/* ============================================================
   2. モバイルメニュー (開いた時の中身)
   ============================================================ */
.mobile-menu__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 100px 40px 40px;
    box-sizing: border-box;
}

.mobile-menu__footer {
    margin-top: auto; /* 下部に固定 */
    text-align: center;
    padding-top: 40px;
    border-top: 1px solid rgba(0, 0, 0, 0.05); /* 軽い区切り線 */
}

.mobile-menu__sns {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: 20px;
}

.mobile-menu__sns a {
    color: #2b2b2b !important; /* メニュー内も黒で固定 */
    font-size: 1.8rem;
}

.mobile-menu__copyright {
    font-size: 0.7rem;
    color: #2b2b2b;
    opacity: 0.6;
    letter-spacing: 0.1em;
}


/* ============================================================
   3. フッター
   ============================================================ */
.footer__left-block {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.footer__sns {
    display: flex;
    align-items: center;
    gap: 20px;
}

.footer__sns a {
    color: var(--color-white); /* フッターのみ白背景に映えるよう白 */
    font-size: 1.3rem;
    opacity: 0.7;
    transition: opacity 0.3s;
}

.footer__sns a:hover {
    opacity: 1;
}


/* ============================================================
   4. レスポンシブ調整 (メディアクエリ)
   ============================================================ */

/* --- タブレット・スマホ共通 (1024px以下) --- */
@media (max-width: 1024px) {
    .header__sns {
        display: none !important; /* ヘッダーのアイコンを隠す */
    }

    .header__hamburger {
        margin-left: auto !important; /* ハンバーガーを右端に */
    }
}

/* --- スマホ専用 (768px以下) --- */
@media (max-width: 768px) {
    /* 行間をコンパクトに */
    body {
        line-height: 1.6 !important;
    }

    p, .base-section-lead, .corp-vision__lead, .corp-vision__text {
        line-height: 1.7 !important;
    }

    .mobile-menu__nav li {
        margin-bottom: 15px;
    }

    /* フッターの中央寄せ */
    .footer__inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .footer__left-block {
        align-items: center;
        margin-bottom: 40px;
    }
}

/* --- PR FIELD レイアウト --- */
.pr-usage {
    display: flex;
    align-items: flex-start;
    gap: 80px;
    margin-top: 60px;
}

.pr-usage__text {
    flex: 1;
}

.pr-usage__img {
    flex: 1.2;
}

.pr-usage__img img {
    width: auto;
    height: 100%;
    display: block;
}

/* --- シェルフスペック表組み --- */
.shelf-spec-container {
    margin-top: 40px;
}

.shelf-spec__title {
    font-size: 0.9rem;
    letter-spacing: 0.2em;
    color: #2b2b2b;
    margin-bottom: 20px;
    font-weight: 600;
}

.shelf-spec__table {
    width: 100%;
    border-collapse: collapse;
    border-top: 1px solid #2b2b2b;
}

.shelf-spec__table th,
.shelf-spec__table td {
    padding: 15px 10px;
    border-bottom: 1px solid #e0e0e0;
    text-align: left;
    font-size: 0.8rem;
}

.shelf-spec__table th {
    width: 30%;
    background: #f9f9f9;
    font-weight: 600;
    color: #666;
}

.shelf-spec__table td {
    width: 70%;
    color: #2b2b2b;
    line-height: 1.6;
}

.u-text-small {
    font-size: 0.8rem;
    color: #888;
    margin-top: 4px;
    display: block;
}

/* --- レスポンシブ (スマホ) --- */
@media (max-width: 1024px) {
    .pr-usage {
        flex-direction: column; /* 縦並びに */
        gap: 40px;
    }
    
    .pr-usage__img {
        width: 100%;
        order: -1; /* 画像を文章より上にしたい場合はこれ */
    }

    .shelf-spec__table th {
        width: 35%;
    }
}

/* ============================================================
   PARTNERS SECTION
   ============================================================ */
.base-partners {
    padding: 100px 0;
    background-color: #F9F9F9; /* わずかに背景を変えて境界を作る */
}

.base-partners__header {
    text-align: center;
    margin-bottom: 60px;
}

.base-partners__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* 1行に6個 */
    gap: 30px;
    align-items: center;
}

.base-partners__item {
    display: flex;
    justify-content: center;
    align-items: center;
    filter: grayscale(100%); /* ロゴをモノクロにして統一感を出す */
    opacity: 0.6;
    transition: all 0.3s ease;
}

.base-partners__item:hover {
    filter: grayscale(0%); /* ホバーでカラーに */
    opacity: 1;
}

.base-partners__item img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

/* --- レスポンシブ調整 --- */
@media (max-width: 1024px) {
    .base-partners__grid {
        grid-template-columns: repeat(3, 1fr); /* タブレットでは1行3個 */
        gap: 40px 20px;
    }
}

@media (max-width: 768px) {
    .base-partners {
        padding: 60px 0;
    }
    
    .base-partners__grid {
        grid-template-columns: repeat(2, 1fr); /* スマホでは1行2個 */
        gap: 30px 15px;
    }
}