/* ========================
   CSS Variables
======================== */
:root {
    --teal:         #8C7022;
    --tag-color:    #8C7022;
    --page-band:    #242220;
    --teal-dark:    #6A5018;
    --teal-light:   #A88828;
    --teal-pale:    #E0C870;
    --rose:         #9A6272;
    --rose-pale:    #E4D4D8;
    --gold:         #6A5018;
    --gold-pale:    #D8BE60;
    --sand:         #A09078;
    --dark:         #242220;
    --dark-2:       #3A3630;
    --bg:           #f0f0ec;
    --bg-2:         #e8e8e2;
    --off-white:    #f8f8f4;
    --white:        #FAFAF8;
    --gray:         #726E66;
    --gray-light:   #D0CCBC;
    --text:         #282420;
    --radius:       5px;
    --radius-md:    9px;
    --shadow:       0 2px 14px rgba(36,34,32,0.10);
    --shadow-hover: 0 6px 26px rgba(36,34,32,0.16);
    --tx:           all 0.22s ease;
}

/* ========================
   Reset & Base
======================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
    font-family: 'Noto Sans JP', sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.75;
    overflow-x: hidden;
}
body::after {
    content: '';
    position: fixed; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='250' height='250' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    opacity: 0.04;
    pointer-events: none;
    z-index: 9998;
}
a { color: inherit; text-decoration: none; transition: var(--tx); }
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; }

.container { max-width: 1100px; margin: 0 auto; padding: 0 32px; }

/* WordPress アラインメント */
.alignleft   { float: left;  margin: 4px 24px 16px 0; }
.alignright  { float: right; margin: 4px 0 16px 24px; }
.aligncenter { margin: 0 auto 24px; display: block; }
.alignwide   { max-width: 1200px; margin-left: auto; margin-right: auto; }
.alignfull   { width: 100%; max-width: none; }

/* ========================
   Buttons
======================== */
.btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 26px; border-radius: var(--radius);
    font-weight: 700; font-size: 0.84rem; letter-spacing: 0.07em;
    cursor: pointer; border: 1.5px solid transparent; transition: var(--tx);
    font-family: 'Noto Sans JP', sans-serif;
}
.btn-teal    { background: var(--teal);  color: #fff; border-color: var(--teal); }
.btn-teal:hover { background: var(--teal-dark); border-color: var(--teal-dark); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(74,126,140,0.3); }
.btn-dark    { background: var(--dark);  color: #fff; border-color: var(--dark); }
.btn-dark:hover { background: var(--dark-2); transform: translateY(-1px); }
.btn-outline { background: transparent; color: var(--teal); border-color: var(--teal); transition: background 0.22s ease, color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease; }
.btn-outline:hover { background: var(--dark); color: #fff; border-color: var(--dark); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(36,34,32,0.18); }

/* ========================
   Tags
======================== */
.tag {
    display: inline-block; padding: 3px 9px; border-radius: 3px;
    font-size: 0.70rem; font-weight: 700; letter-spacing: 0.06em;
}
.tag-platform { background: var(--tag-color);  color: #fff; }
.tag-genre    { background: var(--gold-pale);  color: var(--dark-2); }
.tag-news     { background: var(--teal-pale);  color: var(--teal-dark); }
.tag-info     { background: var(--rose-pale);  color: var(--rose); }
.tag-wip      { background: var(--bg-2);       color: var(--gray); }

/* ========================
   Section
======================== */
.section { padding: 64px 0; }

.sec-head { margin-bottom: 52px; }
.sec-head.center { text-align: center; }

.sec-en {
    display: block;
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: 2.4rem; font-weight: 700;
    letter-spacing: 0.08em; color: var(--dark); margin-bottom: 6px;
}
.sec-ja { display: block; font-size: 0.78rem; color: var(--gray); letter-spacing: 0.12em; }

/* Triangle decorations */
.tri-row { display: flex; gap: 4px; align-items: center; margin-top: 14px; }
.tri-row.center { justify-content: center; }
.tri { width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; }
.tri.t   { border-top: 11px solid; }
.tri.sm  { border-left-width: 5px; border-right-width: 5px; }
.tri.t.sm { border-top-width: 8px; }
.tri-teal { border-top-color: var(--teal); }
.tri-sand { border-top-color: var(--sand); }
.tri-rose { border-top-color: var(--rose); }
.tri-gold { border-top-color: var(--gold); }

/* ========================
   Page Header Band
======================== */
.page-band {
    padding: 134px 0 60px;
    position: relative; overflow: hidden;
}
.page-band.dark  { background: var(--page-band); }
.page-band.teal  { background: var(--teal); }
.page-band.dark2 { background: var(--dark-2); }
.page-band-inner {
    max-width: 1100px; margin: 0 auto; padding: 0 32px; position: relative; z-index: 1;
}
.page-band-label {
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em;
    color: rgba(255,255,255,0.38); margin-bottom: 12px; display: block;
}
.page-band h1 {
    font-family: 'Zen Maru Gothic', sans-serif; font-weight: 900;
    font-size: 3rem; color: #fff; margin-bottom: 12px;
    background: none !important;
    background-color: transparent !important;
    padding: 0 !important;
    border: none !important;
}
.page-band p { color: rgba(255,255,255,0.55); font-size: 0.85rem; letter-spacing: 0.09em; }
.page-band-ghost {
    display: none;
}

/* ========================
   HEADER
======================== */
.site-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 500;
    transition: var(--tx);
    background: rgba(237,234,216,0.35);
    backdrop-filter: blur(4px);
}
.site-header.scrolled {
    background: rgba(237,234,216,0.95);
    backdrop-filter: blur(10px);
}
.hdr-inner {
    width: 100%; padding: 0 40px;
    height: 84px; display: flex; align-items: center; justify-content: space-between;
}
.hdr-logo {
    font-family: 'Zen Maru Gothic', sans-serif; font-weight: 900;
    font-size: 1.2rem; letter-spacing: 0.06em; color: var(--dark);
}
.hdr-logo .ac { color: var(--teal); }
.hdr-logo {
    display: flex !important;
    align-items: center;
    gap: 0;
    line-height: 0;
    transform-origin: left center;
    transition: transform 0.3s ease;
}
.site-header.scrolled .hdr-logo {
    transform: scale(0.8);
}
.hdr-logo .custom-logo { display: block; width: auto; }
.hdr-site-name-img { display: block; width: auto; }

/* WordPress nav_menu が生成するリスト */
.nav-list { display: flex; align-items: center; list-style: none; }
.nav-list li a {
    font-size: 0.76rem; font-weight: 700; letter-spacing: 0.1em;
    color: var(--dark-2); padding: 10px 13px; display: block;
    position: relative; transition: var(--tx);
}
.nav-list li a::after {
    content: ''; position: absolute; bottom: 5px; left: 13px; right: 13px;
    height: 1.5px; background: var(--dark-2);
    transform: scaleX(0); transition: transform 0.2s ease; transform-origin: left;
}
.nav-list li a:hover::after,
.nav-list li.current-menu-item a::after { transform: scaleX(1); }

/* お問い合わせボタン */
.nav-list li.menu-item-contact a,
.nav-list li:last-child a {
    background: var(--dark); color: #fff !important;
    border-radius: var(--radius); margin-left: 8px;
    padding: 10px 13px !important;
    position: relative; overflow: hidden; isolation: isolate;
}
.nav-list li.menu-item-contact a::before,
.nav-list li:last-child a::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(135deg, #1a1816 0%, #4a3820 100%);
    opacity: 0; transition: opacity 0.35s ease;
    border-radius: var(--radius);
}
.nav-list li.menu-item-contact a:hover::before,
.nav-list li:last-child a:hover::before { opacity: 1; }
.nav-list li.menu-item-contact a::after,
.nav-list li:last-child a::after { display: none !important; }

/* Hamburger */
.hamburger {
    display: none; flex-direction: column; gap: 5px;
    cursor: pointer; padding: 8px; background: none; border: none;
}
.hamburger span { display: block; width: 22px; height: 1.5px; background: var(--dark); transition: var(--tx); }

/* ========================
   Mobile Menu
======================== */
.mobile-menu {
    position: fixed; top: 0; right: -100%; width: min(300px, 88vw); height: 100vh;
    background: var(--dark); z-index: 600; padding: 76px 28px 40px;
    transition: right 0.3s ease; overflow-y: auto;
}
.mobile-menu.open { right: 0; }
.mobile-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.5);
    z-index: 590; opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
.mobile-overlay.open { opacity: 1; pointer-events: auto; }
.mobile-menu-close {
    position: absolute; top: 18px; right: 18px;
    background: none; border: none; color: rgba(255,255,255,0.6);
    font-size: 1.1rem; cursor: pointer; padding: 8px; line-height: 1;
}
.mobile-nav-list { list-style: none; }
.mobile-nav-list li { border-bottom: 1px solid rgba(255,255,255,0.07); }
.mobile-nav-list li a {
    display: block; padding: 15px 0; color: rgba(255,255,255,0.75);
    font-size: 0.88rem; font-weight: 700; letter-spacing: 0.1em; transition: var(--tx);
}
.mobile-nav-list li a:hover { color: var(--teal-light); }

/* ========================
   HERO
======================== */
.hero {
    min-height: 100vh; background: var(--bg);
    position: relative; display: flex; align-items: center; overflow: hidden;
}
.hero-panel {
    position: absolute; top: 0; right: 0; width: 44%; height: 100%;
    background: var(--teal);
    clip-path: polygon(12% 0%, 100% 0%, 100% 100%, 0% 100%);
    z-index: 0;
}
.hero-tris {
    position: absolute; bottom: 24px; right: 0;
    width: 44%; display: flex; justify-content: center; gap: 0; z-index: 1;
}
.hero-tri {
    width: 0; height: 0;
    border-left: 15px solid transparent; border-right: 15px solid transparent; border-top: 18px solid;
}
.hero-tri:nth-child(odd)  { border-top-color: rgba(255,255,255,0.15); }
.hero-tri:nth-child(even) { border-top-color: rgba(255,255,255,0.07); }

.hero-inner {
    position: relative; z-index: 2;
    max-width: 1100px; margin: 0 auto; padding: 128px 32px 80px; width: 100%;
    display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center;
}

/* Catchphrase */
.hero-catch { margin-bottom: 20px; }
.hero-catch-1 {
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: 1.6rem; font-weight: 700; color: var(--dark); line-height: 1.35; margin-bottom: 4px;
}
.hero-catch-2 {
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: 2.8rem; font-weight: 900; color: var(--dark); line-height: 1.2;
}
.hero-highlight { color: var(--teal); }
.hero-desc { font-size: 0.88rem; color: var(--gray); line-height: 1.95; margin: 14px 0 28px; }

/* Hero with background image */
.hero--with-bg {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    width: 100%;
}
.hero--with-bg::before {
    content: ''; position: absolute; inset: 0;
    background: rgba(0,0,0,0.58); z-index: 1;
}
.hero--with-bg .hero-inner  { z-index: 3; }
.hero--with-bg .hero-catch-1,
.hero--with-bg .hero-catch-2,
.hero--with-bg .hero-sub    { color: #fff; }
.hero--with-bg .hero-desc   { color: rgba(255,255,255,0.75); }
.hero--with-bg .hero-label  { color: rgba(255,255,255,0.65); }
.hero--with-bg .hero-panel,
.hero--with-bg .hero-tris   { display: none; }
.hero--with-bg .char-ph     { border-color: rgba(255,255,255,0.2); color: rgba(255,255,255,0.4); }

.hero-label {
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.18em;
    color: var(--teal); display: flex; align-items: center; gap: 10px; margin-bottom: 20px;
}
.hero-label::before { content: ''; width: 30px; height: 1.5px; background: var(--teal); }
.hero-title {
    font-family: 'Zen Maru Gothic', sans-serif; font-weight: 900;
    font-size: 4.4rem; color: var(--dark); line-height: 1.05;
    letter-spacing: 0.02em; margin-bottom: 18px;
}
.hero-sub { font-size: 0.9rem; color: var(--gray); letter-spacing: 0.12em; margin-bottom: 44px; }
.hero-btns { display: flex; gap: 12px; flex-wrap: wrap; }

.hero-char { display: flex; justify-content: center; align-items: flex-end; position: relative; }
.hero-char-inner { width: 100%; max-width: 370px; }
.hero-char-inner img {
    width: 100%;
    filter: drop-shadow(0 10px 36px rgba(36,34,32,0.22));
    animation: chara-float 5s ease-in-out infinite;
}
.char-ph {
    aspect-ratio: 3/4; border: 1.5px dashed rgba(255,255,255,0.3);
    border-radius: var(--radius-md);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px; color: rgba(255,255,255,0.5); font-size: 0.8rem;
    text-align: center; line-height: 1.7;
}
.char-ph-icon { font-size: 2.6rem; opacity: 0.4; }
@keyframes chara-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ========================
   Works Grid
======================== */
.works-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; overflow: hidden; }

.work-card {
    display: block; width: 100%; cursor: pointer !important;
    background: var(--white); border-radius: var(--radius-md); overflow: hidden;
    box-shadow: var(--shadow); transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease; border: 1px solid var(--gray-light);
}
.work-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); border-color: var(--teal-light); }
.work-card * { cursor: pointer !important; }
.wc-img {
    width: 100%; aspect-ratio: 16/9; overflow: hidden;
    background: linear-gradient(135deg, var(--teal-pale), var(--gold-pale));
    display: flex; align-items: center; justify-content: center;
    color: var(--gray); font-size: 0.78rem;
}
.wc-img img { width: 100%; height: 100%; object-fit: cover; }
.wc-body { padding: 17px 19px 21px; display: flex; flex-direction: column; gap: 6px; }
.wc-body h3 { font-size: 0.98rem; font-weight: 700; color: var(--dark); margin: 0; }
.wc-tags { display: flex; gap: 5px; flex-wrap: wrap; }
.wc-role { font-size: 0.82rem; color: var(--gray); line-height: 1.55; }
.wc-publisher { font-size: 0.80rem; color: var(--dark); font-weight: 600; }
.wc-copyright { font-size: 0.72rem; color: var(--gray-light); }
.wc-info { font-size: 0.76rem; color: var(--gray); }
.wc-extlink {
    display: inline-block; margin-top: 4px;
    font-size: 0.76rem; font-weight: 700; letter-spacing: 0.04em;
    color: var(--teal); border-bottom: 1px solid var(--teal-light);
    transition: color 0.2s ease; text-decoration: none;
}
.wc-extlink:hover { color: var(--teal-dark); }

/* ========================
   Works Filter
======================== */
.works-filter {
    display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 36px;
}
.works-filter-btn {
    padding: 8px 20px; border-radius: var(--radius);
    background: var(--bg-2); color: var(--gray);
    border: 1.5px solid var(--gray-light);
    font-size: 0.82rem; font-weight: 700; letter-spacing: 0.06em;
    cursor: pointer; transition: var(--tx);
    font-family: 'Noto Sans JP', sans-serif;
}
.works-filter-btn:hover { border-color: var(--tag-color); color: var(--tag-color); }
.works-filter-btn.active { background: var(--tag-color); color: #fff; border-color: var(--tag-color); }

.work-card-wrap { transition: opacity 0.3s ease; }
.work-card-wrap.hidden { display: none; }

/* News filter button（works-filter-btn と同スタイル） */
.news-filter-btn {
    padding: 8px 20px; border-radius: var(--radius);
    background: var(--bg-2); color: var(--gray);
    border: 1.5px solid var(--gray-light);
    font-size: 0.82rem; font-weight: 700; letter-spacing: 0.06em;
    cursor: pointer; transition: var(--tx);
    font-family: 'Noto Sans JP', sans-serif;
}
.news-filter-btn:hover { border-color: var(--tag-color); color: var(--tag-color); }
.news-filter-btn.active { background: var(--tag-color); color: #fff; border-color: var(--tag-color); }
.news-row-wrap.hidden { display: none; }

/* ========================
   News List
======================== */
.news-list { max-width: 740px; }
.news-list.center { margin: 0 auto; }
.news-row {
    display: grid; grid-template-columns: 98px 76px 1fr;
    align-items: baseline; gap: 14px;
    padding: 17px 0; border-bottom: 1px solid var(--gray-light); transition: var(--tx);
}
.news-row:first-child { border-top: 1px solid var(--gray-light); }
.news-row:hover .news-title-t { color: var(--teal); }
.news-dt { font-size: 0.76rem; color: var(--gold); font-weight: 700; letter-spacing: 0.04em; white-space: nowrap; }
.news-title-t { font-size: 0.88rem; font-weight: 400; color: var(--text); transition: var(--tx); }

/* ========================
   Single Works
======================== */
.works-single-header {
    background: var(--dark); padding: 100px 0 0; overflow: hidden;
}
.works-single-hero-img {
    width: 100%; max-height: 480px; object-fit: cover; display: block; margin-top: 40px;
    filter: brightness(0.85);
}
.works-single-body { background: var(--white); }
.works-info-grid {
    display: grid; grid-template-columns: 1fr 260px; gap: 52px; align-items: start;
}
.works-meta-box {
    background: var(--bg); border: 1px solid var(--gray-light);
    border-radius: var(--radius-md); padding: 24px;
}
.works-meta-box h3 { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; color: var(--gray); margin-bottom: 16px; }
.works-meta-item { padding: 10px 0; border-bottom: 1px solid var(--gray-light); font-size: 0.84rem; }
.works-meta-item:last-child { border-bottom: none; }
.works-meta-label { font-size: 0.7rem; color: var(--gray); font-weight: 700; letter-spacing: 0.06em; margin-bottom: 3px; }
.works-meta-value { color: var(--dark-2); }

/* ========================
   Single Post (News)
======================== */
.post-header { background: var(--dark-2); padding: 100px 0 48px; }
.post-header-inner { max-width: 1100px; margin: 0 auto; padding: 0 32px; }
.post-cat-label { margin-bottom: 14px; }
.post-title-h { font-family: 'Zen Maru Gothic', sans-serif; font-size: 2rem; font-weight: 700; color: #fff; line-height: 1.4; }
.post-meta { margin-top: 16px; font-size: 0.78rem; color: rgba(255,255,255,0.45); letter-spacing: 0.04em; }

.post-body { background: var(--white); }
.post-content-wrap { max-width: 780px; margin: 0 auto; }

.entry-content h2 { font-size: 1.3rem; font-weight: 700; color: var(--dark); margin: 40px 0 14px; padding-bottom: 8px; border-bottom: 2px solid var(--teal-pale); }
.entry-content h3 { font-size: 1.1rem; font-weight: 700; color: var(--dark-2); margin: 28px 0 10px; }
.entry-content p  { font-size: 0.94rem; line-height: 1.95; margin-bottom: 18px; }
.entry-content img { border-radius: var(--radius-md); margin: 22px 0; }
.entry-content a  { color: var(--teal); text-decoration: underline; }
.entry-content ul,
.entry-content ol { margin: 0 0 18px 22px; }
.entry-content li { font-size: 0.94rem; margin-bottom: 5px; }
.entry-content blockquote {
    border-left: 3px solid var(--teal); padding: 12px 20px;
    background: var(--bg); border-radius: 0 var(--radius) var(--radius) 0;
    margin: 20px 0; font-size: 0.92rem; color: var(--gray);
}

/* ========================
   Pagination
======================== */
.pagination {
    display: flex; justify-content: center; gap: 5px; margin-top: 52px;
}
.pagination a, .pagination span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 38px; height: 38px; padding: 0 6px;
    border-radius: var(--radius); font-size: 0.82rem; font-weight: 700;
    border: 1px solid var(--gray-light); color: var(--dark-2); transition: var(--tx);
}
.pagination a:hover  { border-color: var(--teal); color: var(--teal); }
.pagination .current { background: var(--teal); color: #fff; border-color: var(--teal); }

/* ========================
   Back Link
======================== */
.back-link { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 700; color: var(--gray); margin-bottom: 36px; letter-spacing: 0.04em; }
.back-link::before { content: '←'; }
.back-link:hover { color: var(--teal); }

/* ========================
   COMPANY
======================== */
.co-body { background: var(--white); }
.co-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.co-grid h2 { font-size: 1.4rem; font-weight: 700; color: var(--dark); margin-bottom: 18px; }
.co-grid p  { font-size: 0.9rem; color: var(--dark-2); line-height: 1.9; margin-bottom: 12px; }
.co-table { width: 100%; border-collapse: collapse; }
.co-table tr  { border-bottom: 1px solid var(--gray-light); }
.co-table th, .co-table td { padding: 13px 0; font-size: 0.86rem; text-align: left; vertical-align: top; }
.co-table th  { width: 110px; color: var(--gray); font-weight: 700; }
.co-table td  { color: var(--dark-2); }

/* ========================
   COMPANY (redesign)
======================== */
.co-outline-grid {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 60px;
    align-items: start;
}
.co-section-label {
    padding-top: 8px;
}
.co-section-en {
    display: block;
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: 2rem; font-weight: 900;
    color: #fff; letter-spacing: 0.08em; margin-bottom: 8px;
}
.co-section-ja {
    display: block;
    font-size: 0.75rem; color: rgba(255,255,255,0.45);
    letter-spacing: 0.12em; font-weight: 700;
}

/* 明るい背景向けレイアウト */
.co-info-grid {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 52px;
    align-items: start;
}
.co-info-label { padding-top: 6px; }
.co-info-en {
    display: block;
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: 1.8rem; font-weight: 900;
    color: var(--dark); letter-spacing: 0.08em; margin-bottom: 6px;
}
.co-info-ja {
    display: block;
    font-size: 0.72rem; color: var(--gray);
    letter-spacing: 0.12em; font-weight: 700;
}

@media (max-width: 620px) {
    .co-info-grid { grid-template-columns: 1fr; gap: 20px; }
}
.co-table--dark { width: 100%; border-collapse: collapse; }
.co-table--dark tr { border-bottom: 1px solid rgba(255,255,255,0.08); }
.co-table--dark tr:first-child { border-top: 1px solid rgba(255,255,255,0.08); }
.co-table--dark th {
    width: 130px; padding: 18px 0; font-size: 0.82rem;
    color: rgba(255,255,255,0.45); font-weight: 700;
    vertical-align: top; letter-spacing: 0.04em;
}
.co-table--dark td {
    padding: 18px 0 18px 24px; font-size: 0.88rem;
    color: rgba(255,255,255,0.85); line-height: 1.8;
    vertical-align: top;
}
.co-map-wrap { width: 100%; }

@media (max-width: 620px) {
    .co-outline-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* ========================
   CONTACT
======================== */
.ct-body { background: var(--white); }
.ct-inner { max-width: 640px; }
.ct-inner > p { font-size: 0.9rem; color: var(--dark-2); line-height: 1.9; margin-bottom: 28px; }
.ct-block {
    background: var(--bg); border: 1px solid var(--gray-light);
    border-radius: var(--radius-md); padding: 26px 28px;
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px;
}
.ct-block-label { font-size: 0.68rem; color: var(--gray); letter-spacing: 0.1em; font-weight: 700; margin-bottom: 4px; }
.ct-block-addr  { font-size: 1rem; font-weight: 700; color: var(--dark); }
.ct-note { margin-top: 22px; font-size: 0.78rem; color: var(--gray); line-height: 1.9; }

/* ========================
   Generic Page
======================== */
.page-content-wrap { max-width: 780px; margin: 0 auto; }
.page-body { background: var(--white); }

/* ========================
   404
======================== */
.not-found-body { background: var(--white); text-align: center; }
.not-found-num {
    font-family: 'Zen Maru Gothic', sans-serif; font-weight: 900;
    font-size: 9rem; color: var(--teal-pale); line-height: 1; margin-bottom: 16px;
}
.not-found-msg { font-size: 1rem; color: var(--gray); margin-bottom: 36px; }

/* ========================
   Contact Form 7
======================== */
.wpcf7 { width: 100%; }
.wpcf7-form p { margin-bottom: 20px; }
.wpcf7-form label {
    display: block; font-size: 0.84rem; font-weight: 700;
    color: var(--dark-2); margin-bottom: 6px; letter-spacing: 0.04em;
}
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
    width: 100%; padding: 12px 14px;
    border: 1.5px solid var(--gray-light); border-radius: var(--radius);
    background: var(--white); font-family: 'Noto Sans JP', sans-serif;
    font-size: 0.9rem; color: var(--text); transition: var(--tx);
    outline: none;
}
.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form textarea:focus {
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(246,195,35,0.12);
}
.wpcf7-form textarea { min-height: 160px; resize: vertical; }
.wpcf7-submit {
    display: inline-flex; align-items: center;
    padding: 12px 36px; border-radius: var(--radius);
    background: var(--teal); color: #fff;
    border: none; font-family: 'Noto Sans JP', sans-serif;
    font-size: 0.9rem; font-weight: 700; letter-spacing: 0.06em;
    cursor: pointer; transition: var(--tx);
}
.wpcf7-submit:hover { background: var(--teal-dark); transform: translateY(-1px); }
.wpcf7-not-valid-tip { font-size: 0.78rem; color: #e05050; margin-top: 4px; }
.wpcf7-response-output {
    margin-top: 20px; padding: 12px 16px; border-radius: var(--radius);
    font-size: 0.85rem; border: 1.5px solid var(--gray-light);
}

/* ========================
   FOOTER
======================== */
.site-footer { background: #191714; color: rgba(255,255,255,0.45); padding: 52px 0 26px; }
.ft-inner { max-width: 1100px; margin: 0 auto; padding: 0 32px; }
.ft-top {
    display: grid; grid-template-columns: 190px 1fr; gap: 56px;
    padding-bottom: 36px; border-bottom: 1px solid rgba(255,255,255,0.06); margin-bottom: 26px;
}
.ft-logo {
    font-family: 'Zen Maru Gothic', sans-serif; font-weight: 900;
    font-size: 1.2rem; color: #fff; margin-bottom: 9px; letter-spacing: 0.05em;
}
.ft-logo .ac { color: var(--teal-light); }
.ft-desc { font-size: 0.76rem; line-height: 1.9; }
.ft-nav { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.ft-nav-g h4 { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; color: rgba(255,255,255,0.35); margin-bottom: 11px; }
.ft-nav-g a  { display: block; font-size: 0.78rem; color: rgba(255,255,255,0.45); padding: 3px 0; transition: var(--tx); }
.ft-nav-g a:hover { color: var(--teal-light); }
.ft-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.ft-sns { display: flex; gap: 7px; }
.sns-b {
    width: 32px; height: 32px; border-radius: 4px;
    background: rgba(255,255,255,0.06); display: flex; align-items: center;
    justify-content: center; font-size: 0.74rem; color: rgba(255,255,255,0.45); transition: var(--tx);
}
.sns-b:hover { background: var(--teal); color: #fff; }
.ft-copy { font-size: 0.70rem; }

/* ========================
   Leaf Sway Overlay
======================== */
@keyframes sway-leaves {
    0%, 100% { transform: rotate(calc(var(--sway-deg, 2deg) * -1)); }
    50%       { transform: rotate(var(--sway-deg, 2deg)); }
}
.hero-sway-overlay {
    position: absolute;
    top: 0; left: 0;
    height: 100%; width: auto;
    transform-origin: left var(--sway-pivot-y, 0%);
    animation: sway-leaves var(--sway-speed, 4s) ease-in-out infinite;
    z-index: 4;
    pointer-events: none;
    user-select: none;
}

/* ========================
   Animations
======================== */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(32px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInLeft {
    from { opacity: 0; transform: translateX(-32px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
    from { opacity: 0; transform: translateX(32px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Hero load animations */
.hero-label { animation: fadeInLeft  0.6s ease both; animation-delay: 0.1s; }
.hero-sub   { animation: fadeInLeft  0.6s ease both; animation-delay: 0.3s; }
.hero-btns  { animation: fadeInUp    0.6s ease both; animation-delay: 0.55s; }
.hero-char  { animation: fadeInRight 0.8s ease both; animation-delay: 0.15s; }

/* Scroll-triggered */
.anim-up {
    opacity: 1; transform: none;
    transition: opacity 0.65s ease, transform 0.65s ease;
}
.anim-left {
    opacity: 1; transform: none;
    transition: opacity 0.65s ease, transform 0.65s ease;
}
.anim-up.visible, .anim-left.visible { opacity: 1; transform: none; }

/* ========================
   Responsive
======================== */
/* テキストボックスのカスタマイザーオフセット・幅指定を中間サイズでリセット */
@media (max-width: 1200px) {
    .hero-text-box      { transform: none !important; width: auto !important; max-width: 100% !important; margin-top: 0 !important; }
    .hero-sway-overlay  { height: 78%; }
}
@media (max-width: 900px) {
    .hero-sway-overlay  { height: 55%; }
}
@media (max-width: 620px) {
    .hero-sway-overlay  { height: 40%; }
}
@media (max-width: 900px) {
    .hero-inner         { grid-template-columns: 1fr; text-align: left; }
    .hero-panel         { width: 100%; height: 36%; top: auto; bottom: 0; clip-path: polygon(0 18%,100% 0%,100% 100%,0% 100%); }
    .hero-char          { order: -1; margin-top: 82px; }
    .hero-label         { justify-content: flex-start; }
    .hero-btns          { justify-content: flex-start; }
    .works-grid         { grid-template-columns: repeat(2, 1fr); }
    .works-info-grid    { grid-template-columns: 1fr; }
    .co-grid            { grid-template-columns: 1fr; gap: 36px; }
    .ft-top             { grid-template-columns: 1fr; gap: 28px; }
    .ft-nav             { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 620px) {
    .hero-inner         { padding: 100px 20px 60px; }
    .hero-catch-1       { font-size: 1.3rem !important; }
    .hero-catch-2       { font-size: 2rem !important; }
    .hero-text-box      { padding: 20px !important; }
    .nav-list           { display: none; }
    .hamburger          { display: flex; }
    .news-row           { grid-template-columns: 1fr; gap: 5px; }
    .page-band h1       { font-size: 2.2rem; }
    .page-band-ghost    { display: none; }
    .post-title-h       { font-size: 1.5rem; }
    .section            { padding: 48px 0; }
}

/* Editorial refresh — shared components and home page */
:root { --radius: 8px; --radius-md: 16px; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--teal); outline-offset: 5px; }
section[id] { scroll-margin-top: 100px; }
.site-header { border-bottom: 1px solid rgba(36,34,32,.09); }
.site-header.scrolled { box-shadow: 0 6px 30px rgba(36,34,32,.06); }
.hdr-inner { max-width: 1440px; margin: auto; }
.hdr-logo { line-height: 1.2; }
.btn { min-height: 50px; padding: 14px 25px; gap: 24px; }
.btn span { font-size: 1.2rem; }
.hero { min-height: 760px; min-height: min(850px, 100svh); }
.hero:not(.hero--with-bg) { background: #f6f3e9; }
.hero:not(.hero--with-bg) .hero-panel { width: 45%; background: #e8dfc7; clip-path: polygon(24% 0,100% 0,100% 100%,0 100%); }
.hero-inner { max-width: 1240px; padding-top: 164px; padding-bottom: 130px; gap: 35px; }
.hero:not(.hero--with-bg) .hero-text-box { background: transparent; padding: 0; }
.hero-catch-1, .hero-catch-2 { display: block; }
.hero--default-copy .hero-catch-1 { font-size: clamp(2rem, 3.7vw, 3.4rem); line-height: 1.65; }
.hero--default-copy .hero-catch-2 { font-size: clamp(2rem, 3.7vw, 3.4rem); line-height: 1.65; letter-spacing: -.05em; }
.hero-label { font-size: .62rem; letter-spacing: .15em; }
.hero-desc { line-height: 2.1; margin: 24px 0 32px; }
.hero-btns { align-items: center; gap: 25px; }
.hero-about-link { font-size: .8rem; font-weight: 700; display: inline-flex; gap: 16px; align-items: center; }
.hero-about-link:hover { color: var(--teal); }
.hero--with-bg .hero-about-link, .hero--with-bg .hero-scroll { color: #fff; }
.hero-scroll { position: absolute; z-index: 3; bottom: 30px; left: max(32px, calc((100% - 1176px) / 2)); font-size: .6rem; letter-spacing: .18em; display: flex; align-items: center; gap: 14px; }
.hero-scroll span { display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; width: 34px; height: 34px; font-size: 1rem; }
.play-art { width: 100%; aspect-ratio: 1; position: relative; }
.play-orbit { position: absolute; inset: -7%; border: 1px solid rgba(140,112,34,.3); border-radius: 50%; }
.play-orbit::after { content: ''; position: absolute; inset: 24px; border: 1px dashed rgba(140,112,34,.22); border-radius: 50%; }
.play-tile { position: absolute; inset: 9%; background: var(--teal); border-radius: 28px; transform: rotate(-12deg); box-shadow: 16px 22px 0 rgba(140,112,34,.13), 0 35px 60px rgba(76,61,30,.15); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; }
.play-mountain { width: 58%; height: 35%; background: #fff7df; clip-path: polygon(0 100%,38% 0,59% 55%,73% 26%,100% 100%); }
.play-caption { color: #fff7df; font-size: 1.25rem; font-weight: 700; line-height: 1.3; letter-spacing: .06em; }
.play-spark { position: absolute; z-index: 2; right: -1%; top: -12%; font-size: 5rem; color: var(--teal); }
.play-disc { position: absolute; bottom: 1%; right: -5%; width: 95px; height: 95px; border-radius: 50%; display: grid; place-items: center; background: #292921; color: #fff7df; font-size: 3.8rem; box-shadow: 0 12px 22px #24222020; transform: rotate(12deg); }
.play-note { position: absolute; bottom: -21%; width: 100%; text-align: center; font-size: .6rem; letter-spacing: .22em; color: #6b624f; }
.section { padding: 88px 0; }
.section-eyebrow { display: block; color: var(--teal); font-size: .65rem; letter-spacing: .18em; font-weight: 700; margin-bottom: 16px; }
.sec-head { margin-bottom: 36px; }
.sec-en { letter-spacing: .025em; line-height: 1.4; }
.heading-dot { color: var(--teal); padding-left: 4px; }
.sec-ja { margin-top: 14px; letter-spacing: .04em; line-height: 1.9; }
.home-news { background: var(--off-white); }
.home-news .container { display: grid; grid-template-columns: 260px minmax(0,1fr); column-gap: 64px; }
.home-news .sec-head { grid-row: span 2; }
.home-news .container > :last-child { grid-column: 2; }
.news-list { max-width: none; min-width: 0; }
.news-row { padding: 23px 30px 23px 0; position: relative; border-top: 0 !important; }
.news-list { border-top: 1px solid var(--gray-light); }
.news-row::after { content: '↗'; position: absolute; right: 3px; top: 23px; color: var(--teal); }
.news-row:hover { background: rgba(140,112,34,.045); }
.news-title-t { line-height: 1.9; }
.home-works { background: #eeece3; border-top: 1px solid rgba(36,34,32,.06); }
.works-grid { gap: 28px; overflow: visible; }
.home-works .works-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.works-grid > div { min-width: 0; }
.work-card { height: 100%; border-color: rgba(36,34,32,.1); box-shadow: 0 5px 18px rgba(36,34,32,.035); }
.wc-body { padding: 24px; gap: 10px; }
.wc-body h3 { font-size: 1.12rem; line-height: 1.6; }
.wc-img img { transition: transform .5s ease; }
.work-card:hover .wc-img img { transform: scale(1.045); }
.wc-copyright { color: var(--gray); }
.home-contact { padding: 64px 0; background: #e6d9b3; }
.contact-inner { display: flex; justify-content: space-between; align-items: center; gap: 32px; }
.contact-inner h2 { font-size: clamp(1.4rem,2.5vw,2rem); line-height: 1.6; letter-spacing: -.04em; }
.contact-inner p { font-size: .8rem; margin-top: 12px; color: #625840; }
.contact-inner .btn { flex-shrink: 0; }
.site-footer { padding-top: 65px; }
.ft-nav-g a, .ft-desc { color: rgba(255,255,255,.66); }
.ft-nav-g h4 { color: rgba(255,255,255,.55); }
.mobile-menu { visibility: hidden; transition: right .3s ease, visibility .3s; }
.mobile-menu.open { visibility: visible; }
@media (max-width: 1000px) {
    .hero-inner { gap: 25px; }
    .home-news .container { grid-template-columns: 210px minmax(0,1fr); gap: 32px; }
    .nav-list li a { padding-left: 12px; padding-right: 12px; }
}
@media (max-width: 900px) {
    .hero { min-height: auto; }
    .hero-inner { grid-template-columns: 1fr 0.75fr; padding-top: 155px; padding-bottom: 130px; }
    .hero-char { order: 0; margin-top: 0; }
    .hero:not(.hero--with-bg) .hero-panel { height: 100%; width: 45%; top: 0; }
    .play-caption { font-size: .85rem; }
    .play-disc { width: 65px; height: 65px; font-size: 2.5rem; }
    .play-spark { font-size: 3rem; }
    .hero--default-copy .hero-catch-1, .hero--default-copy .hero-catch-2 { font-size: 2rem; }
}
@media (max-width: 620px) {
    .container, .ft-inner { padding-left: 22px; padding-right: 22px; }
    .hdr-inner { padding: 0 22px; }
    .hero-inner { grid-template-columns: 1fr; gap: 54px; padding: 128px 24px 115px; }
    .hero:not(.hero--with-bg) .hero-panel { top: auto; height: 45%; width: 100%; }
    .hero:not(.hero--with-bg) .hero-text-box { padding: 0 !important; }
    .hero--default-copy .hero-catch-1, .hero--default-copy .hero-catch-2 { font-size: clamp(1.6rem,7.6vw,2.6rem) !important; }
    .hero-char-inner:has(.play-art) { max-width: 230px; }
    .hero-char:has(.hero-char-inner:empty) { display: none; }
    .hero-label { font-size: .54rem; letter-spacing: .09em; gap: 7px; }
    .hero-label::before { width: 16px; }
    .hero-btns { gap: 18px; }
    .hero-btns .btn { padding: 12px 18px; gap: 12px; }
    .hero-about-link { font-size: .74rem; gap: 6px; }
    .hero-scroll { bottom: 20px; left: 24px; }
    .section { padding: 58px 0; }
    .home-news .container { display: block; }
    .news-row { grid-template-columns: auto 1fr; gap: 10px; }
    .news-row .tag { justify-self: start; }
    .news-title-t { grid-column: 1 / -1; }
    .works-grid, .home-works .works-grid { grid-template-columns: 1fr; }
    .contact-inner { flex-direction: column; align-items: flex-start; gap: 26px; }
    .home-contact { padding: 48px 0; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* First-visit introduction: decorative, bounded, and interaction-dismissible. */
.site-intro {
    position: fixed; inset: 0; z-index: 10000;
    display: grid; place-items: center;
    background: #f6f3e9; color: #242220;
    pointer-events: none;
    animation: intro-failsafe 0s 5s forwards;
    transition: transform .7s cubic-bezier(.76,0,.24,1), visibility .7s;
}
.site-intro-content { display: flex; flex-direction: column; align-items: center; animation: intro-appear .5s ease both; }
.site-intro-mark { width: 58px; height: 42px; margin-bottom: 22px; background: #dfb313; clip-path: polygon(0 100%,38% 0,60% 58%,75% 28%,100% 100%); }
.site-intro-brand { font-family: 'Noto Sans JP', sans-serif; font-size: clamp(1.5rem,5vw,2.6rem); font-weight: 700; letter-spacing: .06em; line-height: 1.4; }
.site-intro-brand > span { color: #92731b; }
.site-intro-tagline { margin-top: 14px; font-size: .75rem; letter-spacing: .25em; }
.site-intro-track { width: 160px; height: 2px; background: #ded8c7; margin-top: 40px; overflow: hidden; }
.site-intro-track > span { display: block; width: 45%; height: 100%; background: #b18a0b; animation: intro-loading 1.1s ease-in-out infinite; }
.site-intro-label { margin-top: 14px; color: #756b50; font-size: .58rem; letter-spacing: .24em; }
.site-intro-dots { display: inline-block; width: 14px; }
.site-intro-caption { position: absolute; bottom: max(30px, env(safe-area-inset-bottom)); font-size: .55rem; letter-spacing: .24em; color: #756b50; }
.site-intro.is-complete { transform: translateY(-100%); visibility: hidden; }
.site-intro.is-complete .site-intro-track > span { animation: none; width: 100%; }
@keyframes intro-loading { from { transform: translateX(-110%); } to { transform: translateX(330%); } }
@keyframes intro-appear { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes intro-failsafe { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .site-intro { display: none; } }
.site-intro-logo { display: none; width: min(360px, 76vw); max-height: 150px; object-fit: contain; margin-bottom: 8px; }
.site-intro.has-logo .site-intro-logo { display: block; }
.site-intro.has-logo .site-intro-mark, .site-intro.has-logo .site-intro-brand { display: none; }
/* Customizer colors remain scoped to the introduction. */
.site-intro { background: var(--intro-bg, #f6f3e9); color: var(--intro-text, #756b50); }
.site-intro-mark, .site-intro-track > span { background: var(--intro-accent, #b18a0b); }
.site-intro-brand > span { color: var(--intro-accent, #92731b); }
.site-intro-label, .site-intro-caption { color: var(--intro-text, #756b50); }
.site-intro-tagline[hidden] { display: none; }