/* ===== Base ===== */
:root{
  --red:#c0392b;
  --dark:#1a1a1a;
  --dark2:#222;
  --text:#2b2b2b;
  --muted:#888;
  --line:#e6e6e6;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:"Noto Sans JP",sans-serif;
  color:var(--text);
  line-height:1.9;
  font-size:15px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
.container{width:90%;max-width:1120px;margin:0 auto}
.center{text-align:center;margin-top:48px}

/* ===== Buttons ===== */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-size:14px;font-weight:500;letter-spacing:.04em;
  padding:14px 30px;border-radius:999px;transition:.25s;
}
.btn--contact{background:var(--dark);color:#fff}
.btn--contact:hover{background:var(--red)}
.btn--ghost{border:1px solid rgba(255,255,255,.5);color:#fff;border-radius:999px}
.btn--ghost:hover{background:#fff;color:var(--dark)}
.btn--ghost-dark{border-color:var(--text);color:var(--text)}
.btn--ghost-dark:hover{background:var(--dark);color:#fff;border-color:var(--dark)}
.btn--cta{background:var(--dark);color:#fff;padding:16px 34px}
.btn--cta:hover{background:var(--red)}
.btn span{font-size:18px;line-height:1}

/* ===== Logo ===== */
.logo{display:flex;align-items:center;gap:10px}
.logo__mark{display:flex;align-items:center}
.logo__img{height:40px;width:auto;display:block}
.logo__img--sm{height:30px}
.logo__text{font-weight:900;font-size:20px;letter-spacing:.12em}
.logo__text--light{color:#fff;font-size:16px}

/* ===== Demo Banner ===== */
.demo-banner{
  position:fixed;top:0;left:0;width:100%;z-index:200;height:36px;
  display:flex;align-items:center;justify-content:center;gap:8px;
  background:linear-gradient(90deg,#ff7a18,#f25c05);color:#fff;
  font-size:13px;font-weight:700;letter-spacing:.06em;
  box-shadow:0 1px 6px rgba(0,0,0,.2);
  text-decoration:none;cursor:pointer;transition:filter .2s;
}
.demo-banner:hover{filter:brightness(1.08)}
.demo-banner:hover .demo-banner__by{background:rgba(255,255,255,.35)}
.demo-banner__by{transition:background .2s}
.demo-banner__icon{font-size:14px}
.demo-banner__by{
  margin-left:6px;padding:2px 10px;border-radius:999px;
  background:rgba(255,255,255,.22);font-size:12px;font-weight:700;letter-spacing:.04em;
}
@media(max-width:520px){
  .demo-banner{font-size:11px;gap:5px;padding:0 8px;text-align:center}
  .demo-banner__by{font-size:10px;padding:1px 7px;margin-left:3px}
}

/* ===== Header ===== */
.header{
  position:fixed;top:36px;left:0;width:100%;z-index:100;
  background:rgba(255,255,255,.96);backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.header__inner{
  display:flex;align-items:center;justify-content:space-between;
  width:92%;max-width:1200px;margin:0 auto;height:68px;
}
.nav{display:flex;align-items:center;gap:34px}
.nav__list{display:flex;gap:28px}
.nav__list a{font-size:14px;font-weight:500;transition:.2s}
.nav__list a:hover{color:var(--red)}

/* ===== Section heads ===== */
.section__en{
  color:var(--red);font-size:13px;font-weight:700;
  letter-spacing:.2em;margin-bottom:8px;
}
.section__ja{
  font-family:"Noto Serif JP",serif;font-weight:600;
  font-size:30px;letter-spacing:.04em;margin-bottom:18px;
}
.section__desc{color:var(--muted);font-size:14px;margin-bottom:40px}
.section--dark{background:var(--dark);color:#fff}
.section--dark .section__desc{color:#aaa}

/* ===== Hero ===== */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;padding-top:104px}
.hero__bg{
  position:absolute;inset:0;
  background:url('https://images.unsplash.com/photo-1497366811353-6870744d04b2?auto=format&fit=crop&w=1600&q=80') center/cover;
}
.hero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.7) 40%,rgba(255,255,255,0) 75%)}
.hero__inner{position:relative;width:90%;max-width:1120px;margin:0 auto}
.hero__copy{max-width:520px}
.hero__title{
  font-family:"Noto Serif JP",serif;font-weight:700;
  font-size:clamp(40px,6vw,68px);line-height:1.3;letter-spacing:.04em;
}
.hero__title .accent{color:var(--red)}
.hero__lead{margin-top:28px;font-size:16px;font-weight:500;line-height:2}
.hero__sign{display:flex;align-items:center;gap:10px;margin-top:56px;font-weight:700;letter-spacing:.08em}

/* ===== About ===== */
.about{padding:96px 0}
.about__body p{margin-bottom:22px;line-height:2.2}
.about__body .btn{margin-top:14px}

/* ===== Service ===== */
.service{padding:96px 0;background:#fafafa}
.service__grid{
  display:grid;grid-template-columns:repeat(6,1fr);gap:18px;
}
.service__card{text-align:center}
.service__img{
  aspect-ratio:1/1;background-size:cover;background-position:center;
  border-radius:4px;margin-bottom:12px;transition:.3s;
}
.service__card:hover .service__img{transform:translateY(-4px);box-shadow:0 12px 28px rgba(0,0,0,.12)}
.service__img--empty{
  background:#f0f0f0;border:1px dashed #cfcfcf;
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;
  color:#b5b5b5;
}
.service__img--empty::before{content:"🖼";font-size:30px;filter:grayscale(1);opacity:.55}
.service__img--empty::after{content:"写真準備中";font-size:11px;letter-spacing:.05em}
.service__card:hover .service__img--empty{box-shadow:none;transform:none}
.service__card figcaption{font-size:13px;font-weight:500}

/* ===== Works ===== */
.works{padding:96px 0}
.works__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.works__card{display:block;transition:.3s}
.works__img{aspect-ratio:16/10;background-size:cover;background-position:center;border-radius:4px;transition:.4s}
.works__card:hover .works__img{filter:brightness(1.08)}
.works__img--empty{
  background:rgba(255,255,255,.09);border:2px dashed rgba(255,255,255,.4);
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;
  color:rgba(255,255,255,.6);
}
.works__img--empty::before{content:"🖼";font-size:38px;filter:grayscale(1);opacity:.7}
.works__img--empty::after{content:"写真準備中";font-size:13px;letter-spacing:.05em}
.works__card:hover .works__img--empty{filter:none}
.works__cap{padding-top:14px}
.works__title{font-weight:700;font-size:15px}
.works__tag{color:#999;font-size:12px;margin-top:2px}

/* ===== Strength ===== */
.strength{padding:96px 0;background:#fafafa}
.strength__grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border-top:1px solid var(--line);
}
.strength__item{
  text-align:center;padding:46px 24px;
  border-right:1px solid var(--line);
}
.strength__item:first-child{border-left:1px solid var(--line)}
.strength__icon{font-size:34px;margin-bottom:18px;filter:saturate(0)}
.strength__item h3{font-size:15px;font-weight:700;margin-bottom:12px}
.strength__item p{font-size:13px;color:#777;line-height:1.9}

/* ===== CTA ===== */
.cta{position:relative;padding:88px 0;color:#fff;overflow:hidden}
.cta__bg{
  position:absolute;inset:0;
  background:url('https://images.unsplash.com/photo-1604014237800-1c9102c219da?auto=format&fit=crop&w=1600&q=80') center/cover;
}
.cta__bg::after{content:"";position:absolute;inset:0;background:rgba(40,30,20,.72)}
.cta__inner{position:relative;display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap}
.cta__title{font-family:"Noto Serif JP",serif;font-weight:600;font-size:clamp(28px,4vw,40px);line-height:1.5}
.cta__action{text-align:right}
.cta__action p{margin-bottom:18px;font-size:14px;line-height:1.9}

/* ===== Footer ===== */
.footer{background:#161616;color:#bbb;padding:64px 0 0}
.footer__inner{display:grid;grid-template-columns:1.6fr 1fr 1.4fr 1.2fr;gap:40px}
.footer__address{font-size:12.5px;line-height:1.9;margin-top:16px;color:#9a9a9a}
.footer__head{color:#fff;font-weight:700;font-size:14px;margin-bottom:18px;position:relative;padding-left:12px}
.footer__head::before{content:"";position:absolute;left:0;top:6px;width:3px;height:14px;background:var(--red)}
.footer__col ul li{font-size:13px;margin-bottom:10px;color:#9a9a9a}
.footer__col a:hover{color:#fff}
.footer__two{display:grid;grid-template-columns:1fr 1fr;column-gap:16px}
.footer__sns{display:flex;gap:12px;margin-top:18px}
.footer__sns a{
  width:34px;height:34px;border:1px solid #444;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:14px;transition:.2s;
}
.footer__sns a:hover{background:var(--red);border-color:var(--red);color:#fff}
.footer__copy{
  text-align:center;font-size:12px;color:#777;
  margin-top:56px;padding:22px 0;border-top:1px solid #2a2a2a;
}

/* ===== Hamburger ===== */
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
.hamburger span{width:24px;height:2px;background:var(--text);transition:.3s}
.hamburger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.is-open span:nth-child(2){opacity:0}
.hamburger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ===== Responsive ===== */
@media(max-width:920px){
  .service__grid{grid-template-columns:repeat(3,1fr)}
  .footer__inner{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  .hamburger{display:flex}
  .nav{
    position:fixed;top:104px;right:0;width:70%;max-width:300px;height:calc(100vh - 104px);
    background:#fff;flex-direction:column;align-items:flex-start;gap:0;padding:24px;
    transform:translateX(100%);transition:.3s;box-shadow:-8px 0 24px rgba(0,0,0,.08);
  }
  .nav.is-open{transform:translateX(0)}
  .nav__list{flex-direction:column;gap:0;width:100%}
  .nav__list li{width:100%;border-bottom:1px solid var(--line)}
  .nav__list a{display:block;padding:16px 4px}
  .btn--contact{margin-top:20px}
  .works__grid{grid-template-columns:1fr}
  .strength__grid{grid-template-columns:1fr 1fr}
  .strength__item:nth-child(3),.strength__item:nth-child(4){border-bottom:0}
  .cta__inner{flex-direction:column;align-items:flex-start}
  .cta__action{text-align:left}
}
@media(max-width:520px){
  .service__grid{grid-template-columns:repeat(2,1fr)}
  .footer__inner{grid-template-columns:1fr}
  .footer__two{grid-template-columns:1fr 1fr}
}