/* ===== Base ===== */
:root{
  --paper:#ffffff;
  --ink:#222;
  --muted:#818181;
  --chip:#e7dfd5;
  --footer:#dcd5cc;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
  --radius: 24px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:"Noto Sans JP",system-ui,-apple-system,sans-serif;
  color:var(--ink);
  background:#ffffff;
  line-height:1.8;
  letter-spacing:.02em;
}
img{max-width:100%;display:block}
a{color:inherit}

/* Container & Sections */
.container{width:min(1060px, calc(100% - 32px)); margin-inline:auto}
.section{padding:56px 0}
.section-head{margin-bottom:22px}
.section-head h2{font-size:clamp(24px,3.6vw,24px); letter-spacing:.04em; line-height: 1.6;}
.section-head .en{color:var(--muted); font-size:12px; margin-top:4px}

/* ===== Header ===== */
.site-header{
  position:sticky; top:0; z-index:20;
  background:#fff; border-bottom:1px solid #eee;
  backdrop-filter:saturate(180%) blur(8px);
}
.header-inner{display:flex; align-items:center; gap:16px; padding:10px 0}
.brand{display:inline-flex; align-items:center}
.logo-img{height:20px; width:auto}
.nav{margin-left:auto; display:flex; align-items:center; gap:28px}
.nav a{font-size:14px; text-decoration:none}
.nav-cta{margin-left:8px}
.hamburger{
  margin-left:auto; width:44px; height:44px; border:0; background:transparent; display:none; position:relative
}
.hamburger span{
  position:absolute; left:12px; right:12px; height:2px; background:#333; border-radius:2px; transition:.25s
}
.hamburger span:nth-child(1){top:14px}
.hamburger span:nth-child(2){top:21px}
.hamburger span:nth-child(3){top:28px}
.hamburger.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.active span:nth-child(2){opacity:0}
.hamburger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.btn{display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:24px; font-weight:700; text-decoration:none}
.btn-primary{background:#000; color:#fff}
.btn-outline{border:1px solid #fff; color:#fff}
.btn-chip{background:#fff; color:#333; border-radius:20px; padding:8px 24px; font-size:13px;border:1px solid #333;}

/* Desktop nav vs Mobile drawer */
@media(min-width:900px){ .hamburger{display:none} }
@media(max-width:899px){
  .nav{display:none}
  .hamburger{display:inline-block}
  .nav.open{
    display:flex; position:fixed; inset:56px 0 0 0; background:#fff; padding:18px 20px 24px;
    flex-direction:column; gap:14px; box-shadow:var(--shadow); overflow:auto;
    height: calc(100dvh - 56px); /* 画面いっぱいの縦幅 */
  }
  .nav.open a{font-size:16px}
}

/* ===== Hero (Rounded image FV) ===== */
.hero { padding-left: 20px; box-sizing: border-box; } /* added left margin */
.hero{padding:20px 0 40px; background:#ffffff; padding-left:20px; box-sizing:border-box}
.hero { padding-left: 20px; box-sizing: border-box; } /* added left margin */
.hero-frame{
  position:relative; overflow:hidden;
  /* 左だけ角丸（上左 / 上右 / 下右 / 下左） */
  border-radius: var(--radius) 0 0 var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(24px, 4vw, 36px);
  display:grid; place-items:center; min-height:64vh; background:#000;
  /* 右端にピッタリくっつける（コンテナ右をビューポート端まで広げる） */
  width: calc(50vw + 50%);
  margin-right: calc(-50vw + 50%);
}
.hero { padding-left: 20px; box-sizing: border-box; } /* added left margin */
.hero-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.9)}
.hero { padding-left: 20px; box-sizing: border-box; } /* added left margin */
.hero-overlay{position:absolute; inset:0; background:linear-gradient(90deg, rgba(0,0,0,.40), rgba(0,0,0,.20))}
.hero { padding-left: 20px; box-sizing: border-box; } /* added left margin */
.hero-content{position:relative; color:#fff; width:100%}
.hero { padding-left: 20px; box-sizing: border-box; } /* added left margin */
.hero-title{
  font-family: font-family:'Open Sans', sans-serif;
  font-weight:normal; letter-spacing:.06em;
  font-size: clamp(28px, 8.2vw, 56px);
  line-height:1.3; margin:0 0 22px;
}
.hero-title a.btn btn-outline{
   font-weight:normal;
}
@media(min-width:900px){
.hero {width: min(1060px, calc(100% - 32px)); margin-inline: auto; padding-left: 0;} /* added left margin */
}


/* ===== About ===== */
.about{background:#fff;}
.about-text p{margin:0 0 14px; font-size:clamp(14px,3.8vw,16px)}
.about-photos{display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:start}
.about-thumb{grid-column:1 / -1; width:120px; border-radius:12px; box-shadow:0 6px 20px rgba(0,0,0,.08)}

/* ===== Services ===== */
.service{background:#fff}
.card-grid{display:grid; grid-template-columns:1fr; gap:16px}
.card{background:var(--paper); border-radius:12px; box-shadow:var(--shadow); overflow:hidden}
.card-img img{object-fit:cover}
.card h3{font-size:clamp(16px,3.8vw,18px); padding:14px 16px 4px}
.card p{color:#555; padding:0 16px 16px; font-size:clamp(13px,3.6vw,15px)}
@media(min-width:900px){ .card-grid{grid-template-columns:repeat(3, 1fr)} }

/* ===== Banner ===== */
.banner img{border-radius:16px; box-shadow:var(--shadow)}

/* ===== Gallery ===== */
.gallery{background:#fff}
.carousel{position:relative; overflow:hidden; border-radius:16px; background:#f2f2f2}
.carousel-track{display:flex; gap:8px; overflow-x:auto; scroll-behavior:smooth; padding:8px}
.carousel-track img{flex:0 0 auto; width:min(280px, 72vw); height:180px; object-fit:cover; border-radius:10px}
.carousel-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:36px; height:36px; border-radius:50%; background:#fff; border:1px solid #eee; cursor:pointer
}
.carousel .prev{left:8px} .carousel .next{right:8px}
.gallery-actions{display:flex; gap:12px; justify-content:flex-end; margin-top:12px}

/* ===== News ===== */
.news{background:#fff}
.news-list{display:grid; gap:10px; margin-top:8px}
.news-list li{display:flex; gap:14px; align-items:center; border-bottom:1px solid #eee; padding:10px 0}
.news-list time{font-variant-numeric:tabular-nums; color:#666; width:110px}
.news-list a{text-decoration:none}
.news-list a:hover{text-decoration:underline}

/* ===== Company ===== */
.company{background:#fff}
.company-card{
  background:#fff; border-radius:16px; box-shadow:var(--shadow); overflow:hidden;
  display:grid; gap:20px; padding:20px;
  margin-bottom: 48px;
}
.company-card .map iframe{width:100%; height:300px; border:0}
.company-table{width:100%; border-collapse:collapse}
.company-table th, .company-table td{border-bottom:1px solid #eee; text-align:left; padding:10px; font-size:clamp(13px,3.4vw,15px)}
.company-table th{width:28%; color:#666; font-weight:500}

/* ===== Footer ===== */
.site-footer{background: #000; color:#e6e4e4; padding:40px 0 60px}
.footer-inner{display:grid; gap:14px; justify-items:center}
.footer-logo{height:20px}
.footer-nav{display:flex; gap:18px; flex-wrap:wrap}
.copy{color:#666; font-size:12px; margin-top:8px}


/* ===== Animations (reveal) ===== */
[data-reveal], [data-stagger] {opacity:0; transform: translateY(16px); transition: opacity .7s cubic-bezier(.2,.6,.2,1), transform .7s cubic-bezier(.2,.6,.2,1)}
.in-view {opacity:1; transform:none}
[data-stagger].in-view .card {opacity:0; transform: translateY(16px)}
[data-stagger].in-view .card:nth-child(1){animation:reveal .6s .05s forwards cubic-bezier(.2,.6,.2,1)}
[data-stagger].in-view .card:nth-child(2){animation:reveal .6s .18s forwards cubic-bezier(.2,.6,.2,1)}
[data-stagger].in-view .card:nth-child(3){animation:reveal .6s .31s forwards cubic-bezier(.2,.6,.2,1)}
@keyframes reveal{to{opacity:1; transform:none}}

/* Hero scroll button arrow pulse */
.btn.btn-outline .arrow{display:inline-block; margin-left:6px; animation:floatY 1.6s ease-in-out infinite}
@keyframes floatY{0%,100%{transform:translateY(-1px)}50%{transform:translateY(2px)}}

/* Gallery edges like template */
.carousel:before, .carousel:after{
  content:""; position:absolute; top:0; bottom:0; width:40px; pointer-events:none; z-index:1;
}
.carousel:before{left:0; background:linear-gradient(90deg, rgba(255,255,255,1), rgba(255,255,255,0))}
.carousel:after{right:0; background:linear-gradient(270deg, rgba(255,255,255,1), rgba(255,255,255,0))}

/* Gallery buttons align right like template */
.carousel-btn{box-shadow: var(--shadow)}
.carousel .prev{left:auto; right:52px}
.carousel .next{right:8px}

/* Company card overlap spacing (PC) */
@media(min-width:900px){
  .company{padding-top:48px}
}

/* Fine tune headings weight & spacing similar to template */
.section-head h2{font-weight:100;}


/* ===== Global smooth scroll for keyboard/anchor (native) ===== */
html{scroll-behavior:smooth}

/* Header shrink/blur on scroll */
.site-header.scrolled{box-shadow:0 10px 30px rgba(0,0,0,.06); background:#ffffffcc; backdrop-filter:saturate(180%) blur(10px)}
.site-header.scrolled .logo-img{transform:scale(.96); opacity:.95; transition:.25s}

/* Stronger stagger for generic children */
[data-stagger].in-view > *{opacity:0; transform: translateY(16px)}
[data-stagger].in-view > *:nth-child(1){animation:reveal .6s .05s forwards cubic-bezier(.2,.6,.2,1)}
[data-stagger].in-view > *:nth-child(2){animation:reveal .6s .16s forwards cubic-bezier(.2,.6,.2,1)}
[data-stagger].in-view > *:nth-child(3){animation:reveal .6s .27s forwards cubic-bezier(.2,.6,.2,1)}
[data-stagger].in-view > *:nth-child(4){animation:reveal .6s .38s forwards cubic-bezier(.2,.6,.2,1)}
[data-stagger].in-view > *:nth-child(5){animation:reveal .6s .49s forwards cubic-bezier(.2,.6,.2,1)}

/* Hero content scroll fade */
.hero-content{will-change: transform, opacity}


/* ===== About (single photo layout) ===== */
.about{background:#ffffff}
/**.about-grid{
  display:grid; gap: clamp(18px, 3.5vw, 28px);
  grid-template-columns: 1fr;
  align-items:center;
}
.about-text{max-width: 60ch}**/
.about-text p{margin:0 0 18px; font-size:clamp(14px,3.6vw,16px)}
.about-text p.last-text {margin: 0 0 36px;}
.about-photo img{
  width:100%; height:auto; border-radius:16px; box-shadow: var(--shadow);
  object-fit: cover;
}
@media(min-width: 900px){
  .about-grid{grid-template-columns: 1fr 1.2fr}
}

/* section spacing a bit airier */
.section{padding: clamp(64px, 8vw, 0px) 0}