/* ========== LOG TRUST — Shared Design Tokens & Components ========== */

/* --- Variables --- */
:root {
  --clr-primary: #5b6447;
  --clr-primary-dark: #485134;
  --clr-primary-light: #727e58;
  --clr-accent: #e3642e;
  --clr-bg-01: #f7f7f4;
  --clr-bg-02: #f3f0ed;
  --clr-wht: #fff;
  --clr-text: #252222;
  --clr-text-sub: #727171;
  --clr-text-light: #f7f7f7;
  --clr-sub-green: #9ea27d;
  --clr-sub-brown: #c8b29d;
  --clr-gold: #ffeca0;
  --clr-mono: #eeeeee;
  --clr-line: #06C755;
  --ff-en: "EB Garamond", serif;
  --ff-jp-head: "Noto Serif JP", serif;
  --ff-jp: "Noto Sans JP", sans-serif;
  --r-lg: 16px;
  --r-sm: 8px;
  --r-full: 9999px;
  --w-lg: 1600px;
  --w-md: 1040px;
  --w-sm: 720px;
  --sp-sm: 104px;
  --sp-md: 160px;
}

/* --- Reset --- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--ff-jp);font-size:16px;line-height:1.8;letter-spacing:.08em;color:var(--clr-text);background-color:var(--clr-wht);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}
ul,ol{list-style:none}

/* --- Layout --- */
.inner{max-width:var(--w-lg);margin:0 auto;padding:0 40px}
.inner--md{max-width:var(--w-md);margin:0 auto;padding:0 40px}
.inner--sm{max-width:var(--w-sm);margin:0 auto;padding:0 40px}

/* --- Section Title --- */
.sec-label{font-family:var(--ff-en);font-size:14px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--clr-primary);margin-bottom:8px}
.sec-en{font-family:var(--ff-en);font-size:72px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;line-height:1;color:var(--clr-text);margin-bottom:16px}
.sec-jp{font-family:var(--ff-jp-head);font-size:20px;font-weight:500;letter-spacing:.1em;line-height:1.6}

/* --- Buttons --- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:.875rem 2rem;border-radius:var(--r-full);font-family:var(--ff-jp);font-size:15px;font-weight:500;letter-spacing:.08em;cursor:pointer;border:none;transition:opacity .3s;min-width:min(13.375rem,100%);text-align:center}
.btn:hover{opacity:.85}
.btn--primary{background-color:var(--clr-primary);color:var(--clr-wht)}
.btn--dark{background-color:var(--clr-text);color:var(--clr-wht)}
.btn--outline{background-color:transparent;color:var(--clr-primary);border:1px solid var(--clr-primary)}
.btn--white{background-color:var(--clr-wht);color:var(--clr-text)}
.btn--sm{padding:.625rem 1.5rem;font-size:14px;min-width:auto}

/* --- Header --- */
.header{position:fixed;top:0;left:0;width:100%;z-index:1200;background-color:rgba(255,255,255,.97);border-bottom:1px solid var(--clr-mono);transition:box-shadow .3s,border-color .3s}
.header.scrolled{box-shadow:0 2px 20px rgba(0,0,0,.08);border-bottom-color:transparent}
.header-inner{max-width:100%;margin:0;padding:0 40px;display:flex;align-items:center;height:100px}
.header-logo{display:flex;align-items:center;gap:12px;margin-right:auto}
.header-logo-img{height:60px;width:auto}
.header-logo-text{display:flex;flex-direction:column;gap:2px}
.header-logo-main{font-family:var(--ff-en);font-size:28px;font-weight:400;letter-spacing:.12em;color:var(--clr-text)}
.header-logo-sub{font-family:var(--ff-jp);font-size:10px;letter-spacing:.08em;color:var(--clr-text-sub)}
.header-logo-main{font-family:var(--ff-en);font-size:28px;font-weight:400;letter-spacing:.12em;color:var(--clr-text)}
.header-logo-sub{font-family:var(--ff-en);font-size:10px;letter-spacing:.15em;color:var(--clr-text-sub);text-transform:uppercase}
.header-nav{display:flex;align-items:center;gap:24px;margin-right:24px}
.header-nav a{font-size:13px;font-weight:500;letter-spacing:.08em;color:var(--clr-text);transition:color .3s;white-space:nowrap}
.header-nav a:hover{color:var(--clr-primary)}
.header-nav a.is-current{color:var(--clr-primary);border-bottom:2px solid var(--clr-primary);padding-bottom:2px}
.header-tel{display:flex;flex-direction:column;align-items:flex-end;gap:2px;margin-right:16px}
.header-tel-num{font-family:var(--ff-en);font-size:22px;font-weight:400;letter-spacing:.05em;color:var(--clr-text)}
.header-tel-time{font-size:11px;color:var(--clr-text-sub)}
.header-sns{display:flex;align-items:center;gap:12px}
.header-sns a{display:flex;align-items:center;justify-content:center;width:32px;height:32px;color:var(--clr-text-sub);transition:color .3s}
.header-sns a:hover{color:var(--clr-primary)}
.header-tel-cta{display:flex;align-items:center;gap:16px;margin-left:24px;padding:12px 28px;background-color:var(--clr-primary);color:var(--clr-wht);flex-shrink:0}
.header-tel-cta-num{font-family:var(--ff-en);font-size:20px;font-weight:400;letter-spacing:.05em;line-height:1.2}
.header-tel-cta-time{font-size:10px;letter-spacing:.04em;opacity:.8}
.hamburger{display:none;flex-direction:column;gap:6px;cursor:pointer;padding:8px;z-index:1200;margin-left:auto;background:none;border:none;position:relative}
.hamburger span{display:block;width:28px;height:2px;background-color:var(--clr-text);transition:all .3s;transform-origin:center}
.hamburger.active span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.hamburger.active span:nth-child(2){opacity:0}
.hamburger.active span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* --- Mobile Menu Overlay --- */
.mobile-menu{position:fixed;inset:0;z-index:1050;background-color:rgba(255,255,255,.98);display:flex;flex-direction:column;align-items:center;opacity:0;pointer-events:none;transition:opacity .3s;overflow-y:auto;padding:72px 24px 24px}
.mobile-menu.open{opacity:1;pointer-events:auto}
.mobile-menu-nav{display:flex;flex-direction:column;align-items:center;gap:0;margin-bottom:16px;width:100%;max-width:300px}
.mobile-menu-nav a{display:block;width:100%;text-align:center;font-family:var(--ff-jp);font-size:14px;font-weight:500;letter-spacing:.08em;color:var(--clr-text);padding:11px 0;border-bottom:1px solid var(--clr-mono);transition:color .3s,background-color .3s}
.mobile-menu-nav a:hover,.mobile-menu-nav a:active{color:var(--clr-primary);background-color:var(--clr-bg-01)}
.mobile-menu-tel{text-align:center;margin-bottom:14px}
.mobile-menu-tel-num{font-family:var(--ff-en);font-size:22px;font-weight:400;letter-spacing:.05em;color:var(--clr-text);display:block;margin-bottom:2px}
.mobile-menu-tel-time{font-size:10px;color:var(--clr-text-sub)}
.mobile-menu-buttons{display:flex;flex-direction:column;gap:8px;width:100%;max-width:260px;align-items:center}
.mobile-menu-buttons .btn{width:100%;padding:.6rem 1.2rem;font-size:13px;min-width:auto}
.mobile-menu-sns{display:flex;gap:14px;margin-top:16px}
.mobile-menu-sns a{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid var(--clr-mono);border-radius:50%;color:var(--clr-text-sub);transition:all .3s}
.mobile-menu-sns a:hover{border-color:var(--clr-primary);color:var(--clr-primary)}

/* --- Side Fixed Tab (見学予約) --- */
.side-tab{position:fixed;right:0;top:40%;transform:translateY(-50%);z-index:900;writing-mode:vertical-rl;background-color:var(--clr-primary);color:var(--clr-wht);padding:48px 20px;font-size:18px;font-weight:600;letter-spacing:.2em;transition:opacity .3s;border-radius:var(--r-sm) 0 0 var(--r-sm);box-shadow:-2px 2px 12px rgba(0,0,0,.15)}
.side-tab:hover{opacity:.85}

/* --- Page Hero (short) --- */
.page-hero{position:relative;width:100%;height:400px;display:flex;align-items:center;justify-content:center;overflow:hidden;margin-top:100px}
.page-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center}
.page-hero-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(37,34,34,.3) 0%,rgba(37,34,34,.5) 100%)}
.page-hero-content{position:relative;z-index:2;text-align:center;color:var(--clr-wht)}
.page-hero-en{font-family:var(--ff-en);font-size:56px;font-weight:400;letter-spacing:.12em;line-height:1;margin-bottom:16px}
.page-hero-jp{font-family:var(--ff-jp-head);font-size:24px;font-weight:500;letter-spacing:.1em}

/* --- Breadcrumb --- */
.breadcrumb{padding:16px 0;background-color:var(--clr-bg-01);font-size:13px;color:var(--clr-text-sub);letter-spacing:.06em}
.breadcrumb a{color:var(--clr-text-sub);transition:color .3s}
.breadcrumb a:hover{color:var(--clr-primary)}
.breadcrumb span{margin:0 8px;opacity:.5}

/* --- CTA Band --- */
.cta-band{position:relative;overflow:hidden;padding:80px 0;text-align:center}
.cta-band-bg{position:absolute;inset:0;background-image:url('https://www.log-trust.com/wp-content/uploads/2021/02/20210206632.jpg');background-size:cover;background-position:center}
.cta-band-overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(72,81,52,.88) 0%,rgba(37,34,34,.85) 100%)}
.cta-band-content{position:relative;z-index:2;color:var(--clr-text-light);max-width:var(--w-sm);margin:0 auto;padding:0 40px}
.cta-band h2{font-family:var(--ff-jp-head);font-size:28px;font-weight:500;letter-spacing:.1em;line-height:1.6;margin-bottom:16px}
.cta-band p{font-size:15px;opacity:.85;margin-bottom:32px;line-height:1.8}
.cta-band-tel{font-family:var(--ff-en);font-size:32px;letter-spacing:.05em;margin-bottom:8px}
.cta-band-time{font-size:13px;opacity:.7;margin-bottom:32px}
.cta-band-buttons{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.cta-band-buttons .btn{min-width:260px}

/* --- CTA (TOP style, shared across all pages) --- */
.cta{position:relative;overflow:hidden;padding:120px 0;text-align:center}
.cta-bg{position:absolute;inset:0;background-image:url('https://www.log-trust.com/wp-content/uploads/2021/02/20210206632.jpg');background-size:cover;background-position:center}
.cta-overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(72,81,52,.88) 0%,rgba(37,34,34,.85) 100%)}
.cta-content{position:relative;z-index:2;max-width:720px;margin:0 auto;padding:0 40px;text-align:center;color:var(--clr-text-light)}
.cta-logo{font-family:var(--ff-en);font-size:32px;letter-spacing:.15em;margin-bottom:8px;opacity:.9}
.cta-logo-sub{font-size:13px;letter-spacing:.2em;opacity:.6;margin-bottom:40px;text-transform:uppercase}
.cta-heading{font-family:var(--ff-jp-head);font-size:32px;font-weight:500;letter-spacing:.1em;line-height:1.6;margin-bottom:16px}
.cta-desc{font-size:15px;line-height:2;opacity:.85;margin-bottom:32px}
.cta-address{font-size:14px;opacity:.7;margin-bottom:8px}
.cta-tel{font-family:var(--ff-en);font-size:36px;letter-spacing:.05em;margin-bottom:8px}
.cta-time{font-size:13px;opacity:.7;margin-bottom:40px}
.cta-buttons{display:flex;flex-direction:column;gap:12px;align-items:center}
.cta-buttons .btn{width:100%;max-width:400px}

/* --- Footer --- */
.footer{background-color:var(--clr-text);color:var(--clr-text-light);padding:80px 0 40px}
.footer-inner{max-width:var(--w-lg);margin:0 auto;padding:0 40px}
.footer-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:48px}
.footer-logo-img{height:48px;width:auto}
.footer-info{font-size:12px;color:rgba(247,247,247,.6);margin-top:8px;letter-spacing:.06em;line-height:1.8}
.footer-nav{display:flex;gap:24px;flex-wrap:wrap}
.footer-nav a{font-size:13px;color:rgba(247,247,247,.7);transition:color .3s;letter-spacing:.06em}
.footer-nav a:hover{color:var(--clr-text-light)}
.footer-sns{display:flex;gap:16px}
.footer-sns a{font-size:13px;color:rgba(247,247,247,.7);transition:color .3s}
.footer-sns a:hover{color:var(--clr-text-light)}
.footer-bottom{border-top:1px solid rgba(247,247,247,.15);padding-top:24px;text-align:center}
.footer-legal{display:flex;gap:24px;justify-content:center;margin-bottom:16px}
.footer-legal a{font-size:12px;color:rgba(247,247,247,.5);letter-spacing:.06em;transition:color .3s}
.footer-legal a:hover{color:var(--clr-text-light)}
.footer-copyright{font-size:12px;color:rgba(247,247,247,.5);letter-spacing:.06em}

/* --- Reveal --- */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .8s cubic-bezier(.25,.46,.45,.94),transform .8s cubic-bezier(.25,.46,.45,.94)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-d1{transition-delay:.15s}
.reveal-d2{transition-delay:.3s}
.reveal-d3{transition-delay:.45s}
.reveal-d4{transition-delay:.6s}

/* --- Responsive --- */
@media(max-width:1080px){
  .header-nav{display:none}.header-tel{display:none}.header-sns{display:none}.header-tel-cta{display:none}.hamburger{display:flex}.side-tab{display:none}
}
@media(max-width:767px){
  :root{--sp-sm:56px;--sp-md:80px}
  body{font-size:14px}
  .inner,.inner--md,.inner--sm{padding:0 20px}
  .header-inner{height:72px;padding:0 20px}
  .header-logo-main{font-size:22px}
  .sec-en{font-size:40px}
  .sec-jp{font-size:17px}
  .page-hero{height:280px;margin-top:72px}
  .page-hero-en{font-size:36px}
  .page-hero-jp{font-size:18px}
  .cta-band{padding:56px 0}
  .cta-band h2{font-size:22px}
  .cta-band-tel{font-size:26px}
  .cta-band-buttons{flex-direction:column;align-items:center}
  .cta{padding:80px 0}
  .cta-heading{font-size:24px}
  .cta-tel{font-size:28px}
  .cta-buttons .btn{max-width:100%}
  .footer-top{flex-direction:column;gap:32px}
  .footer-nav{flex-wrap:wrap;gap:16px}
}
</style>