/* about.css — このページ固有のCSS。共通部分は assets/css/shared/*.css に分離。 */

:root {
            
            --slate: #2e3a3e;                 
            --paper: #f7f4f0;                 
            --cream: #f6f1ee;                 
            --gold: #c19a5e;                  
            --gold-pastel: #e3bf8d;           
            --vermilion: #b08a57;             
            --sumi: #2e3a3e;
            --ink: #2e3a3e;
            --slate-soft: rgba(46,58,62,.66); 
            --line: rgba(46,58,62,.14);       
            --nav-height: 78px;
            --padding-container: 20px;
        }
@media (min-width: 768px)  { :root { --padding-container: 40px; } }
@media (min-width: 1024px) { :root { --nav-height: 102px; --padding-container: 64px; } }
* { box-sizing: border-box; }
*, *::before, *::after { border-radius: 0 !important; }
html { scroll-behavior: smooth; scrollbar-gutter: stable; }
body {
            margin: 0; background: var(--paper); color: var(--slate); overflow-x: hidden;
            font-family: "Lato", "Noto Serif JP", sans-serif; font-weight: 400;
            -webkit-font-smoothing: antialiased;
        }
::selection { background: var(--gold-pastel); color: var(--slate); }
.mono { font-family: "Lato", sans-serif; }
.font-display { font-family: "Vollkorn", serif; font-weight: 500; }
.pad { padding-left: var(--padding-container); padding-right: var(--padding-container); }
img { display: block; max-width: 100%; height: auto; }
.hero { position: relative; height: 100svh; min-height: 560px; overflow: hidden; background: #e7e3dc; }
.kv-slideshow {
            position: absolute; inset: 0; z-index: 0; overflow: hidden;
            filter: saturate(.94) contrast(1.02);
        }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; display: block; max-width: none; }
.hero-content {
            position: absolute; z-index: 3; top: 50%; left: 50%; transform: translate(-50%,-50%);
            width: min(92vw, 760px); text-align: center;
            display: flex; flex-direction: column; align-items: center;
            opacity: 0; transition: opacity 1s ease .1s, transform 1s cubic-bezier(.2,.8,.2,1) .1s;
        }
.hero.is-ready .hero-content { opacity: 1; }
.hero-brand {
            width: clamp(120px, 15vw, 190px); height: auto; margin-bottom: clamp(1.4rem, 2.6vw, 2.2rem);
            filter: brightness(0) invert(1) drop-shadow(0 2px 18px rgba(20,26,30,.35));
            opacity: .96;
        }
.kv-kicker {
            font-family: "Lato", sans-serif;
            font-size: 10px; letter-spacing: .3em; font-weight: 700;
            color: var(--paper); opacity: .8; text-transform: uppercase;
        }
.hero-content .kv-kicker { margin-bottom: clamp(1.1rem, 2.2vw, 1.7rem); }
.hero-next {
            position: absolute; z-index: 3; right: clamp(1.5rem, 5vw, 5rem); bottom: clamp(1.5rem, 5vh, 3rem);
            display: flex; align-items: center; gap: 1.1rem; text-decoration: none;
            color: #fff; font-family: "Vollkorn", serif; font-weight: 400; letter-spacing: .16em;
            font-size: clamp(.72rem, 1vw, .9rem);
        }
.hero-next-label { white-space: nowrap; opacity: .92; transition: opacity .3s; display: inline-block; min-width: 9.5em; text-align: right; }
.hero-next-label .cx-word { display: inline-block; transition: opacity .35s ease, transform .35s ease; }
@media (max-width: 640px) { .hero-next { left: var(--padding-container); right: var(--padding-container); justify-content: center; } }
@media (prefers-reduced-motion: reduce) {
            .hero-slide { transition: none; }
            .hero-next:hover .hero-next-arrow { animation: none; }
            .hero-scroll::after { animation: none; }
        }
.site-header { transition: background-color .4s ease, box-shadow .4s ease, backdrop-filter .4s ease; }
.site-header .site-logo { filter: brightness(0) invert(1); transition: filter .4s ease; }
.site-header .navbtn, .site-header .site-social { color: #fff; }
.site-header.is-scrolled { background: rgba(247,244,240,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
            box-shadow: 0 1px 0 rgba(46,58,62,.10); }
.site-header.is-scrolled .site-logo { filter: brightness(0); }
.site-header.is-scrolled .navbtn, .site-header.is-scrolled .site-social { color: var(--slate); }
.navbtn {
            display: flex; align-items: center; gap: 12px;
            background: none; border: 0; color: #fff; cursor: pointer;
            font-family: "Lato", sans-serif;
            font-size: 12px; letter-spacing: .3em; text-transform: uppercase;
            padding: 8px 0; min-height: 44px;   /* タップ領域の確保 */ transition: color .4s ease;
        }
.navbtn .bars { display: inline-flex; flex-direction: column; gap: 5px; width: 26px; }
.navbtn .bars i { height: 1.5px; background: currentColor; display: block; }
.navbtn .bars i:nth-child(1) { width: 26px; }
.navbtn .bars i:nth-child(2) { width: 18px; margin-left: auto; }
.rp { position: fixed; top: 0; left: 0; height: 2px; width: 0%; background: var(--gold); z-index: 60; transition: width .12s linear; }
.menu { position: fixed; inset: 0; z-index: 150; visibility: hidden; }
.menu.open { visibility: visible; }
.menu__bg { position: absolute; inset: 0; background: rgba(15,12,12,.6); opacity: 0; transition: opacity .5s ease; }
.menu.open .menu__bg { opacity: 1; }
.menu.open .menu__panel { transform: translateX(0); }
.menu__kick {
            font-family: "Lato", sans-serif; letter-spacing: .36em; font-size: 11px; font-weight: 700;
            color: var(--gold-pastel); text-transform: uppercase; margin-bottom: 22px;
        }
.menu__nav a {
            display: flex; align-items: baseline; gap: 16px; padding: 15px 0;
            border-bottom: 1px solid rgba(255,255,255,.1); text-decoration: none; color: inherit;
            font-family: "Vollkorn", serif; font-size: 24px; font-weight: 600;
            transition: color .3s, padding-left .3s;
        }
.menu__nav a:hover, .menu__nav a[aria-current="page"] { color: var(--gold-pastel); padding-left: 8px; }
.menu__nav a .idx { font-family: "Lato", sans-serif; font-size: 12px; letter-spacing: .1em; opacity: .5; }
.menu__cta { margin-top: auto; display: flex; gap: 14px; flex-wrap: wrap; padding-top: 26px; }
.menu__cta a {
            font-family: "Lato", sans-serif; letter-spacing: .2em; font-size: 12px; text-transform: uppercase; text-decoration: none; color: inherit;
            border: 1px solid rgba(255,255,255,.4); padding: 14px 26px; transition: background .3s, color .3s, border-color .3s;
        }
.menu__cta a.fill { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.menu__cta a:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }
body.menu-open { overflow: hidden; }
.btn-exp {
            position: relative; overflow: hidden; isolation: isolate;
            display: inline-flex; align-items: center; gap: .75rem;
            padding: .95rem 2.25rem; border: 1px solid rgba(46,58,62,.35); color: var(--slate); text-decoration: none;
            font-family: "Lato", sans-serif; font-weight: 500; letter-spacing: .2em; font-size: .72rem; text-transform: uppercase;
            transition: color .35s ease, border-color .35s ease;
        }
.btn-exp:hover { color: var(--paper); border-color: var(--gold); }
.btn-line {
            display: inline-flex; align-items: center; gap: .8em; border: 1px solid rgba(46,58,62,.35); color: var(--slate); padding: .95rem 2.25rem;
            font-family: "Lato", sans-serif; font-weight: 500; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; text-decoration: none;
            transition: border-color .35s ease, color .35s ease;
        }
.btn-line:hover { border-color: var(--gold); color: var(--gold); }
.sec { padding-top: clamp(80px, 12vh, 150px); padding-bottom: clamp(80px, 12vh, 150px); }
.sec-rule { border-top: 1px solid var(--line); }
.lbl, .kicker { font-family: "Lato", sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); }
.lbl .idx, .kicker .idx { opacity: .6; margin-right: .9em; letter-spacing: .1em; color: rgba(46,58,62,.5); }
.h2 { font-family: "Vollkorn", serif; font-weight: 600; letter-spacing: .005em; line-height: 1.08; font-size: clamp(1.8rem, 3.6vw + .6rem, 3.4rem); color: var(--slate); }
.body-l { font-family: "Vollkorn", serif; font-size: clamp(1.05rem, 1.7vw, 1.38rem); line-height: 1.72; color: var(--slate); font-weight: 400; }
.body-m { font-family: "Lato", "Noto Serif JP", sans-serif; font-size: clamp(.92rem, 1.2vw, 1.02rem); line-height: 1.95; color: var(--slate-soft); font-weight: 300; }
.sec-light { background: var(--cream); color: var(--slate); }
.stat { border-top: 1px solid var(--line); padding-top: 1.6rem; }
.stat-n { font-family: "Vollkorn", serif; font-weight: 500; letter-spacing: -.01em; line-height: 1; font-size: clamp(2.6rem, 6vw, 4.4rem); color: var(--slate); }
.stat-n .u { font-family: "Lato", sans-serif; font-size: .3em; font-weight: 700; letter-spacing: .1em; margin-left: .4em; color: var(--gold); vertical-align: super; }
.stat-t { margin-top: 1rem; font-family: "Lato", sans-serif; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: rgba(46,58,62,.5); line-height: 1.8; }
.years { position: relative; background: var(--cream); }
.years-sticky { position: relative; }
.years-kicker { font-family: "Lato", sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); }
.years-kicker .idx { color: rgba(46,58,62,.5); opacity: .6; margin-right: .9em; letter-spacing: .1em; }
.years-title { font-family: "Vollkorn", serif; font-weight: 500; letter-spacing: .005em; line-height: 1.04; font-size: clamp(2.4rem, 6.4vw, 5rem); margin: 1rem 0 1.6rem; color: var(--slate); }
.yr-lead-sub { font-family: "Lato", sans-serif; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--slate-soft); display: inline-flex; align-items: center; gap: .7em; }
.yr-lead-sub .ar { color: var(--gold); animation: hint-slide 1.8s ease-in-out infinite; }
@keyframes hint-slide { 0%,100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
.yr-panel { position: relative; }
.yr-era  { font-family: "Lato", sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); margin-bottom: .8rem; }
.yr-h    { font-family: "Vollkorn", serif; font-weight: 600; letter-spacing: .005em; line-height: 1.12; font-size: clamp(1.3rem, 2.5vw, 2rem); margin-bottom: 1.2rem; color: var(--slate); }
.yr-p    { font-family: "Lato", "Noto Serif JP", sans-serif; font-size: clamp(.92rem, 1.15vw, 1rem); line-height: 1.85; color: var(--slate-soft); font-weight: 300; }
.yr-fig  { position: relative; margin-top: 2rem; }
.yr-fig img { width: 100%; object-fit: cover; filter: grayscale(.2) contrast(1.03); }
.yr-fig.is-archive img { filter: grayscale(1) contrast(.98) brightness(1.08); }
.yr-tag  { position: absolute; top: -1.6rem; left: 0; font-family: "Lato", sans-serif; font-size: 11px; letter-spacing: .2em; color: rgba(46,58,62,.5); }
.yr-big  { font-family: "Vollkorn", serif; font-weight: 400; letter-spacing: -.01em; line-height: 1; color: rgba(46,58,62,.16); }
.yr-node { color: var(--gold); font-family: "Lato", sans-serif; }
@media (max-width: 1023px) {
            .years { padding: clamp(80px,12vh,150px) 0; }
            .yr-lead { padding: 0 var(--padding-container); margin-bottom: 3rem; }
            .years-track { display: flex; flex-direction: column; }
            .yr-panel { padding: 2.6rem var(--padding-container) 2.8rem var(--padding-container); margin-left: var(--padding-container); border-left: 1px solid var(--line); }
            .yr-panel::before { content: ""; position: absolute; left: -5px; top: 3.1rem; width: 9px; height: 9px; background: var(--gold); }
            .yr-panel .yr-big { position: absolute; right: var(--padding-container); top: 2rem; font-size: clamp(2rem, 9vw, 3.2rem); }
            .yr-node { display: none; }
            .yr-fig { max-width: 460px; }
            .yr-fig img { aspect-ratio: 16 / 10; }
        }
@media (min-width: 1024px) {
            
            .years { --yr-foot: 150px; }
            .years-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
            .yr-lead { flex: 0 0 auto; width: 44vw; min-width: 460px; height: 100vh;
                padding: var(--nav-height) 60px var(--yr-foot); display: flex; flex-direction: column; justify-content: center; }
            .years-track { display: flex; align-items: center; height: 100vh; will-change: transform; }
            
            .years-track::after { content: ""; position: absolute; left: 0; bottom: 118px; width: 100%; height: 1px; background: var(--line); }
            .yr-panel { flex: 0 0 auto; width: 560px; height: 100vh;
                padding: var(--nav-height) 60px var(--yr-foot);
                display: flex; flex-direction: column; justify-content: center; }
            .yr-panel > .yr-body { max-width: 420px; flex: 0 0 auto; }
            
            .yr-fig { max-width: 340px; flex: 0 1 auto; min-height: 0;
                height: clamp(150px, calc(100vh - var(--nav-height) - 466px), 425px); }
            .yr-fig img { width: 100%; height: 100%; object-fit: cover; }
            
            .yr-panel:nth-child(even) { flex-direction: column-reverse; justify-content: center; }
            .yr-panel:nth-child(even) .yr-fig { margin-top: 0; margin-bottom: 2rem; }
            
            .yr-mark { position: absolute; left: 60px; bottom: 96px; }
            .yr-mark .yr-big { font-size: clamp(2.4rem, 4vw, 3.4rem); }
            .yr-node { position: absolute; left: 61px; bottom: 106px; font-size: 15px; line-height: 1; transform: translateY(50%); }
        }
.quote { font-family: "Vollkorn", serif; font-weight: 500; line-height: 1.34; letter-spacing: .005em; font-size: clamp(1.5rem, 4.2vw, 3rem); color: var(--slate); }
.quote .gold { color: var(--gold); }
.nx { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem;
            text-decoration: none; color: var(--slate); border-top: 1px solid var(--line); padding: 1.7rem 0; transition: color .3s ease; }
.nx:last-of-type { border-bottom: 1px solid var(--line); }
.nx:hover { color: var(--gold); }
.nx .t { font-family: "Vollkorn", serif; font-weight: 500; font-size: clamp(1.2rem, 2.4vw, 1.75rem); letter-spacing: .005em; }
.nx .d { font-family: "Lato", sans-serif; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--slate-soft); }
.nx .a { transition: transform .35s ease; }
.nx:hover .a { transform: translateX(6px); }
.kv-mark { display: inline-block; width: .5rem; height: .5rem; background: var(--gold-pastel); border-radius: 9999px !important; }
.rv { opacity: 0; transform: translateY(26px); transition: opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1); }
.rv.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
            html { scroll-behavior: auto; }
            .rv { opacity: 1; transform: none; transition: none; }
            .hero-content { transition: none; }
        }
body.is-page-loading { overflow: hidden; }
#jisaku-loader { position: fixed; inset: 0; z-index: 4000; background: #f6f1ee; display: flex; align-items: center; justify-content: center; opacity: 1; transition: opacity .6s ease; }
#jisaku-loader.is-hidden { opacity: 0; pointer-events: none; }
#jisaku-loader .jl-logo { width: clamp(112px, 16vw, 188px); height: auto; filter: brightness(0); opacity: 0; transform: translateY(10px) scale(.98); animation: jlLogoIn 1s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes jlLogoIn { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #jisaku-loader .jl-logo { animation: none; opacity: 1; transform: none; } }
.skip-link{position:absolute;left:-9999px;top:0;z-index:5000;}
.skip-link:focus{left:0;padding:14px 20px;background:#2e3a3e;color:#fff;
        font:700 12px/1 "Lato",sans-serif;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;}
.h1 { font-family: "Vollkorn", serif; font-weight: 500; line-height: 1.04; letter-spacing: .005em;
              font-size: clamp(2.6rem, 6vw + .2rem, 7rem); }
.btn-ants { position: relative; transition: border-color .35s ease, color .35s ease; }
.btn-ants:hover { border-color: #c19a5e !important; color: #c19a5e !important; }
footer .h1 { color: #f7f4f0 !important; }

/* 固定CTAバー：スクロールするまで隠す（他7ページと同一のルール）。
   about は shared/business-cuisine-index.css を読まないため、ここに持つ。
   表示の切り替えは about.js が .is-visible を付け外しする。 */
.site-footer { transform: translateY(110%); opacity: 0; pointer-events: none;
               transition: transform .35s ease, opacity .35s ease; }
.site-footer.is-visible { transform: translateY(0); opacity: 1; pointer-events: auto; }