/* ── SETOFUSA COMMON STYLES ── */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;400;500;600&family=Shippori+Mincho+B1:wght@400;600;800&family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&display=swap');

:root {
  --ink: #1e1a16;
  --deep: #2c251d;
  --bark: #5c4a34;
  --warm: #8b6f52;
  --gold: #c4a35a;
  --gold-lt: #d9bc84;
  --cream: #f7f3ee;
  --paper: #faf8f4;
  --white: #ffffff;
  --rule: rgba(92,74,52,0.18);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Noto Serif JP', serif;
  background: var(--paper);
  color: var(--ink);
  overflow-x: hidden;
}

/* ── UTILITY ── */
.label {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  font-style: normal;
}
.section-title {
  font-family: 'Shippori Mincho B1', serif;
  font-size: clamp(1.6rem,4vw,2.4rem);
  font-weight: 600;
  line-height: 1.4;
  color: var(--deep);
}
.section-title .en-title {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.4rem,6vw,4rem);
  font-weight: 300;
  font-style: italic;
  letter-spacing: 0.04em;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 0.2em;
}
.divider {
  width: 40px; height: 1px;
  background: var(--gold);
  margin: 1.2rem 0 1.6rem;
}
.divider.center { margin: 1.2rem auto 1.6rem; }

.btn {
  display: inline-block;
  padding: 0.8em 2.2em;
  border: 1px solid var(--bark);
  color: var(--bark);
  text-decoration: none;
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  font-family: 'Noto Serif JP', serif;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--bark);
  transform: translateX(-101%);
  transition: transform 0.3s ease;
  z-index: 0;
}
.btn:hover::before { transform: translateX(0); }
.btn:hover { color: var(--cream); }
.btn span { position: relative; z-index: 1; }
.btn-gold { border-color: var(--gold); color: var(--gold); }
.btn-gold::before { background: var(--gold); }
.btn-gold:hover { color: var(--deep); }

/* ── HEADER ── */
#header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 3vw;
  height: 72px;
  background: rgba(250,248,244,0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
  transition: box-shadow 0.4s ease;
}
.logo { display: flex; flex-direction: column; line-height: 1; text-decoration: none; }
.logo-en { font-family: 'Cormorant Garamond', serif; font-size: 1.45rem; font-weight: 300; font-style: italic; color: var(--bark); letter-spacing: 0.06em; }
.logo-ja { font-family: 'Shippori Mincho B1', serif; font-size: 0.6rem; letter-spacing: 0.3em; color: var(--warm); margin-top: 2px; }
.logo-est { font-family: 'Cormorant Garamond', serif; font-size: 0.55rem; letter-spacing: 0.2em; color: var(--gold); font-style: normal; }

header nav { display: flex; align-items: center; gap: 1.8rem; }
header nav a {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  color: var(--bark);
  text-decoration: none;
  transition: color 0.2s;
  font-family: 'Noto Serif JP', serif;
  position: relative;
}
header nav a::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0;
  width: 0; height: 1px;
  background: var(--gold);
  transition: width 0.3s;
}
header nav a:hover { color: var(--gold); }
header nav a:hover::after,
header nav a.active::after { width: 100%; }
header nav a.active { color: var(--gold); }
.nav-contact {
  padding: 0.45em 1.2em;
  border: 1px solid var(--gold);
  color: var(--gold) !important;
  transition: all 0.3s !important;
}
.nav-contact::after { display: none !important; }
.nav-contact:hover { background: var(--gold); color: var(--deep) !important; }

.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; }
.hamburger span { display: block; width: 24px; height: 1px; background: var(--bark); transition: all 0.3s; }

/* ── MOBILE MENU ── */
.mobile-menu {
  position: fixed; inset: 0;
  background: var(--deep);
  z-index: 99;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.mobile-menu.open { opacity: 1; pointer-events: all; }
.mobile-menu a {
  font-family: 'Shippori Mincho B1', serif;
  font-size: 1.2rem;
  letter-spacing: 0.15em;
  color: rgba(255,255,255,0.8);
  text-decoration: none;
  transition: color 0.2s;
}
.mobile-menu a:hover { color: var(--gold); }
.mobile-close {
  position: absolute; top: 1.2rem; right: 3vw;
  font-size: 1.5rem; color: rgba(255,255,255,0.5);
  cursor: pointer; background: none; border: none; font-family: inherit;
}

/* ── PAGE BANNER (inner pages) ── */
.page-banner {
  padding-top: 72px;
  height: 320px;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.page-banner-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(0.55);
}
.page-banner-content {
  position: relative; z-index: 2;
  padding: 0 6vw;
  animation: fadeUp 0.8s 0.2s both;
}
.page-banner h1 {
  font-family: 'Shippori Mincho B1', serif;
  font-size: clamp(1.8rem,5vw,3.2rem);
  font-weight: 800;
  color: var(--white);
  letter-spacing: 0.06em;
  line-height: 1.2;
}
.page-banner .banner-en {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(3rem,8vw,6rem);
  font-weight: 300;
  font-style: italic;
  color: rgba(196,163,90,0.35);
  letter-spacing: 0.04em;
  position: absolute;
  bottom: -0.15em; right: 6vw;
  line-height: 1;
  pointer-events: none;
}

/* ── BREADCRUMB ── */
.breadcrumb {
  padding: 0.8rem 6vw;
  background: var(--cream);
  border-bottom: 1px solid var(--rule);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--warm);
}
.breadcrumb a { color: var(--warm); text-decoration: none; }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb span { margin: 0 0.5em; color: var(--gold); }

/* ── SECTION WRAP ── */
.section-inner { max-width: 1100px; margin: 0 auto; padding: 0 6vw; }
section { position: relative; }

/* ── MARQUEE ── */
.marquee-wrap { background: var(--bark); overflow: hidden; padding: 0.7rem 0; }
.marquee-inner { display: flex; gap: 3rem; width: max-content; animation: marquee 28s linear infinite; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-inner span { font-family: 'Cormorant Garamond', serif; font-size: 0.78rem; letter-spacing: 0.22em; color: var(--gold-lt); white-space: nowrap; font-style: italic; }
.marquee-inner .dot { color: var(--gold); font-style: normal; letter-spacing: 0; }

/* ── FOOTER ── */
footer { background: #120f0c; padding: 50px 0 30px; }
.footer-inner { max-width: 1100px; margin: 0 auto; padding: 0 6vw; }
.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  margin-bottom: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.footer-logo .logo-en { color: var(--gold-lt); font-size: 1.3rem; }
.footer-logo .logo-ja { color: rgba(255,255,255,0.4); }
.footer-logo .logo-est { color: var(--gold); }
.footer-nav { display: flex; gap: 1.6rem; flex-wrap: wrap; }
.footer-nav a { font-size: 0.72rem; letter-spacing: 0.12em; color: rgba(255,255,255,0.4); text-decoration: none; transition: color 0.2s; }
.footer-nav a:hover { color: var(--gold-lt); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }
.footer-copy { font-size: 0.62rem; letter-spacing: 0.14em; color: rgba(255,255,255,0.22); font-family: 'Cormorant Garamond', serif; }
.sns-links { display: flex; gap: 1rem; }
.sns-link { width: 36px; height: 36px; border: 1px solid rgba(255,255,255,0.12); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.35); text-decoration: none; font-size: 0.7rem; transition: all 0.3s; }
.sns-link:hover { border-color: var(--gold); color: var(--gold); }

/* ── REVEAL ── */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ── ANIMATIONS ── */
@keyframes fadeUp { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  header nav { display: none; }
  .hamburger { display: flex; }
  .footer-top { flex-direction: column; }
}
@media (max-width: 600px) {
  #header { height: 60px; }
  .page-banner { height: 240px; }
}
  /* ─── HERO ── */
  #hero {
    height: 100svh; min-height: 600px;
    position: relative; display: flex; align-items: flex-end; overflow: hidden;
  }
  .hero-bg {
    position: absolute; inset: 0;
    background-image: url('https://images.unsplash.com/photo-1555041469-a586c61ea9bc?w=1800&q=85');
    background-size: cover; background-position: center 30%;
    transform: scale(1.05);
    animation: heroZoom 14s ease-out forwards;
  }
  @keyframes heroZoom { from{transform:scale(1.05)} to{transform:scale(1.00)} }
  .hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(30,26,22,0.08) 0%, rgba(30,26,22,0) 40%, rgba(30,26,22,0.55) 75%, rgba(30,26,22,0.82) 100%);
  }
  .hero-content {
    position: relative; z-index: 2;
    padding: 0 6vw 7vh; max-width: 900px;
    animation: fadeUp 1.2s 0.4s both ease-out;
  }
  .hero-est { font-family:'Cormorant Garamond',serif; font-size:0.72rem; letter-spacing:0.28em; color:var(--gold-lt); margin-bottom:1rem; font-style:normal; }
  .hero-h1 { font-family:'Shippori Mincho B1',serif; font-size:clamp(2rem,6vw,4.2rem); font-weight:800; color:var(--white); line-height:1.25; letter-spacing:0.04em; margin-bottom:0.6em; text-shadow:0 2px 24px rgba(0,0,0,0.3); }
  .hero-sub { font-size:clamp(0.8rem,2vw,1rem); color:rgba(255,255,255,0.85); line-height:2; font-weight:300; letter-spacing:0.1em; margin-bottom:2rem; max-width:500px; }
  .hero-scroll { position:absolute; right:4vw; bottom:5vh; display:flex; flex-direction:column; align-items:center; gap:0.5rem; color:rgba(255,255,255,0.6); font-family:'Cormorant Garamond',serif; font-size:0.6rem; letter-spacing:0.2em; animation:fadeUp 1.2s 1.2s both; }
  .scroll-line { width:1px; height:60px; background:linear-gradient(to bottom,transparent,rgba(255,255,255,0.5)); animation:scrollLine 2s ease-in-out infinite; }
  @keyframes scrollLine { 0%{transform:scaleY(0);transform-origin:top} 50%{transform:scaleY(1);transform-origin:top} 51%{transform:scaleY(1);transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} }

  /* ─── ABOUT ── */
  #about { padding:100px 0 90px; background:var(--paper); }
  .about-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
  .about-image { position:relative; }
  .about-image img { width:100%; height:480px; object-fit:cover; display:block; position:relative; z-index:1; }
  .about-image::before { content:''; position:absolute; top:-16px; left:-16px; right:16px; bottom:16px; border:1px solid var(--gold); z-index:0; }
  .about-badge { position:absolute; bottom:-20px; right:-20px; width:96px; height:96px; background:var(--bark); border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:2; border:3px solid var(--paper); }
  .about-badge .y { font-family:'Cormorant Garamond',serif; font-size:1.5rem; font-weight:300; color:var(--gold-lt); line-height:1; }
  .about-badge .s { font-size:0.38rem; letter-spacing:0.15em; color:rgba(255,255,255,0.6); }
  .about-text p { font-size:0.9rem; line-height:2.1; color:#4a3d2f; margin-bottom:1.2em; font-weight:300; }
  .about-features { display:flex; flex-wrap:wrap; gap:0.6rem; margin-top:1.8rem; }
  .feature-tag { font-size:0.72rem; letter-spacing:0.1em; padding:0.35em 0.9em; border:1px solid var(--gold); color:var(--bark); }

  /* ─── SERVICES PREVIEW ── */
  #services-preview { padding:90px 0; background:var(--cream); }
  .services-header { text-align:center; margin-bottom:60px; }
  .services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--rule); }
  .service-card { background:var(--paper); padding:48px 36px; transition:background 0.3s; }
  .service-card:hover { background:var(--white); }
  .service-icon { font-size:2rem; margin-bottom:1rem; display:block; }
  .service-card h3 { font-family:'Shippori Mincho B1',serif; font-size:1.05rem; letter-spacing:0.1em; color:var(--deep); margin-bottom:0.6rem; }
  .service-card p { font-size:0.8rem; line-height:1.9; color:#6b5a47; font-weight:300; }
  .service-en { font-family:'Cormorant Garamond',serif; font-size:0.65rem; letter-spacing:0.2em; color:var(--gold); font-style:italic; margin-bottom:0.8rem; display:block; }

  /* ─── GALLERY ── */
  #gallery-preview { padding:90px 0; background:var(--paper); }
  .gallery-grid { display:grid; grid-template-columns:repeat(12,1fr); grid-template-rows:280px 280px; gap:3px; }
  .g-item { overflow:hidden; }
  .g-item img { width:100%; height:100%; object-fit:cover; transition:transform 0.6s ease; display:block; }
  .g-item:hover img { transform:scale(1.05); }
  .g-1{grid-column:1/6;grid-row:1/2} .g-2{grid-column:6/9;grid-row:1/2} .g-3{grid-column:9/13;grid-row:1/2}
  .g-4{grid-column:1/4;grid-row:2/3} .g-5{grid-column:4/8;grid-row:2/3} .g-6{grid-column:8/13;grid-row:2/3}

  /* ─── BRANDS ── */
  #brands { padding:70px 0; background:var(--deep); text-align:center; }
  .brands-label { font-family:'Cormorant Garamond',serif; font-size:0.68rem; letter-spacing:0.3em; color:var(--gold); font-style:normal; margin-bottom:1rem; }
  .brands-title { font-family:'Shippori Mincho B1',serif; font-size:1.1rem; color:rgba(255,255,255,0.8); letter-spacing:0.1em; margin-bottom:3rem; }
  .brands-row { display:flex; justify-content:center; align-items:center; gap:5rem; flex-wrap:wrap; }
  .brand-name { font-family:'Cormorant Garamond',serif; font-size:2.2rem; font-weight:300; font-style:italic; color:var(--gold-lt); letter-spacing:0.06em; }
  .brand-sep { width:1px; height:40px; background:rgba(196,163,90,0.3); }

  /* ─── INSTAGRAM ── */
  #instagram { padding:90px 0; background:var(--cream); }
  .insta-header { text-align:center; margin-bottom:48px; }
  .insta-handle { font-family:'Cormorant Garamond',serif; font-size:1rem; font-style:italic; color:var(--warm); letter-spacing:0.1em; margin-top:0.5rem; }
  .insta-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:4px; }
  .insta-item { aspect-ratio:1; overflow:hidden; position:relative; }
  .insta-item img { width:100%; height:100%; object-fit:cover; transition:transform 0.5s; display:block; }
  .insta-item::after { content:''; position:absolute; inset:0; background:rgba(92,74,52,0.5); opacity:0; transition:opacity 0.3s; }
  .insta-item:hover img { transform:scale(1.08); }
  .insta-item:hover::after { opacity:1; }

  /* ─── CTA ── */
  #contact-cta { padding:90px 0; background:var(--deep); text-align:center; position:relative; overflow:hidden; }
  #contact-cta::before { content:'SETOFUSA'; position:absolute; font-family:'Cormorant Garamond',serif; font-size:14vw; font-style:italic; color:rgba(255,255,255,0.03); top:50%; left:50%; transform:translate(-50%,-50%); white-space:nowrap; pointer-events:none; }
  .cta-label { color:var(--gold); margin-bottom:0.8rem; }
  .cta-title { font-family:'Shippori Mincho B1',serif; font-size:clamp(1.4rem,3vw,2.2rem); color:var(--white); letter-spacing:0.08em; margin-bottom:0.8rem; }
  .cta-sub { font-size:0.82rem; color:rgba(255,255,255,0.5); letter-spacing:0.1em; font-weight:300; line-height:2; margin-bottom:2.4rem; }
  .cta-btns { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

  @media(max-width:900px){
    .about-grid { grid-template-columns:1fr; gap:40px; }
    .about-image { max-width:480px; }
    .services-grid { grid-template-columns:1fr; gap:2px; }
    .gallery-grid { grid-template-columns:1fr 1fr; grid-template-rows:auto; }
    .g-1,.g-2,.g-3,.g-4,.g-5,.g-6 { grid-column:auto; grid-row:auto; height:200px; }
    .insta-grid { grid-template-columns:repeat(3,1fr); }
    .insta-item:nth-child(n+4) { display:none; }
  }
  @media(max-width:600px){
    .gallery-grid { grid-template-columns:1fr; }
    .g-1,.g-2,.g-3,.g-4,.g-5,.g-6 { height:220px; }
    .cta-btns { flex-direction:column; align-items:center; }
  }
.l-content {
    max-width: 100% !important;
    padding: 0 !important;
}

#main_content {
    max-width: 100% !important;
    padding: 0 !important;
}

.c-container {
    max-width: 100% !important;
    padding: 0 !important;
}
/* 固定ヘッダー */
#header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
}

/* ヘッダー分だけ下げる */
#hero{
    padding-top: 92px;
}
/* ヒーローをフルスクリーン */
#hero{
    min-height:100vh;
    width:100%;
    overflow:hidden;
}

.hero-bg{
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
}

.hero-content{
    position:relative;
    z-index:2;
}
/* ==========================
   CONCEPT
========================== */

.concept-hero{
    position:relative;
    min-height:65vh;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:#fff;
    background:url('https://images.unsplash.com/photo-1505693416388-ac5ce068fe85?w=1800&q=80') center/cover no-repeat;
}

.concept-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.45);
}

.concept-inner{
    position:relative;
    z-index:2;
    max-width:900px;
    padding:0 30px;
}

.concept-en{
    letter-spacing:.3em;
    color:#d6b36a;
    margin-bottom:20px;
}

.concept-hero h1{
    font-size:clamp(2.2rem,5vw,4.5rem);
    line-height:1.3;
    margin-bottom:30px;
}

.concept-lead{
    max-width:700px;
    margin:0 auto;
    line-height:2;
}

.concept-message{
    padding:120px 0;
}
/*==========================
  HISTORY
==========================*/

.concept-history{
    padding:120px 0;
    background:#f8f6f2;
}

.history-list{
    max-width:900px;
    margin:70px auto 0;
    position:relative;
}

.history-list::before{
    content:"";
    position:absolute;
    left:110px;
    top:0;
    bottom:0;
    width:2px;
    background:#c8a96a;
}

.history-item{
    display:flex;
    gap:50px;
    position:relative;
    padding:0 0 70px;
}

.year{
    width:110px;
    flex-shrink:0;
    font-size:28px;
    font-weight:700;
    color:#b28b47;
    text-align:right;
}

.text{
    flex:1;
    background:#fff;
    padding:30px;
    border-radius:12px;
    box-shadow:0 10px 30px rgba(0,0,0,.06);
}

.text h3{
    margin:0 0 15px;
}

.text p{
    margin:0;
    line-height:2;
}
/*==========================
PHILOSOPHY
==========================*/

.concept-philosophy{
    padding:120px 0;
}

.philosophy-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:35px;
    margin-top:70px;
}

.philosophy-card{
    background:#fff;
    border-radius:16px;
    padding:45px 35px;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    transition:.35s;
}

.philosophy-card:hover{
    transform:translateY(-8px);
}

.philosophy-card span{
    display:inline-block;
    font-size:46px;
    font-weight:700;
    color:#c6a15b;
    margin-bottom:20px;
}

.philosophy-card h3{
    margin-bottom:20px;
    font-size:24px;
}

.philosophy-card p{
    line-height:2;
    color:#666;
}

@media(max-width:900px){

.philosophy-grid{
    grid-template-columns:1fr;
}

}
/*==========================
OWNER MESSAGE
==========================*/

.owner-message{
    padding:120px 0;
    background:#f8f6f2;
}

.owner-grid{
    display:grid;
    grid-template-columns:420px 1fr;
    gap:80px;
    align-items:center;
}

.owner-photo img{
    width:100%;
    display:block;
    border-radius:16px;
    box-shadow:0 20px 50px rgba(0,0,0,.12);
}

.owner-text p{
    line-height:2;
    margin-bottom:24px;
}

@media(max-width:900px){

.owner-grid{
    grid-template-columns:1fr;
    gap:40px;
}

}
/*==========================
CTA
==========================*/

.concept-cta{
    padding:120px 20px;
    background:#2f2b27;
    color:#fff;
    text-align:center;
}

.concept-cta h2{
    font-size:42px;
    margin-bottom:25px;
    font-weight:500;
}

.concept-cta p{
    max-width:700px;
    margin:0 auto 45px;
    line-height:2;
    color:rgba(255,255,255,.85);
}

.cta-buttons{
    display:flex;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap;
}

.btn-primary,
.btn-secondary{
    display:inline-block;
    min-width:240px;
    padding:18px 40px;
    border-radius:50px;
    text-decoration:none;
    transition:.3s;
    font-weight:600;
}

.btn-primary{
    background:#c7a35d;
    color:#fff;
}

.btn-primary:hover{
    background:#b18d49;
    transform:translateY(-3px);
}

.btn-secondary{
    border:2px solid #fff;
    color:#fff;
}

.btn-secondary:hover{
    background:#fff;
    color:#2f2b27;
}
/*==========================
PRODUCTS HERO
==========================*/

.products-hero{
    padding:140px 20px 120px;
    background:#f8f6f2;
    text-align:center;
}

.products-hero .section-inner{
    max-width:900px;
    margin:0 auto;
}

.products-hero .hero-title{
    font-size:clamp(38px,5vw,64px);
    line-height:1.3;
    font-weight:500;
    margin:25px 0;
    color:#2f2b27;
}

.products-hero .hero-text{
    max-width:700px;
    margin:35px auto 0;
    line-height:2;
    color:#666;
    font-size:17px;
}
/*==========================
PRODUCT CATEGORY
==========================*/

.product-category{
    padding:120px 20px;
}

.category-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
    margin-top:70px;
}

.category-card{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    min-height:220px;
    background:#fff;
    border:1px solid #e8e3d9;
    border-radius:16px;
    text-decoration:none;
    transition:.3s;
    box-shadow:0 10px 30px rgba(0,0,0,.05);
}

.category-card:hover{
    transform:translateY(-6px);
    box-shadow:0 20px 40px rgba(0,0,0,.10);
    border-color:#c7a35d;
}

.category-card h3{
    margin:0 0 10px;
    font-size:28px;
    letter-spacing:.08em;
    color:#2f2b27;
}

.category-card p{
    margin:0;
    color:#777;
    font-size:16px;
}

@media(max-width:900px){

.category-grid{
    grid-template-columns:1fr;
}

}
/*==========================
FEATURED PRODUCTS
==========================*/

.featured-products{
    padding:120px 20px;
    background:#f8f6f2;
}

.featured-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:40px;
    margin-top:70px;
}

.product-card{
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    transition:.35s;
}

.product-card:hover{
    transform:translateY(-8px);
    box-shadow:0 25px 60px rgba(0,0,0,.12);
}

.product-image{
    aspect-ratio:4/3;
    overflow:hidden;
}

.product-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:.5s;
}

.product-card:hover .product-image img{
    transform:scale(1.05);
}

.product-body{
    padding:35px;
}

.product-body .product-category{
    display:inline-block;
    font-size:13px;
    letter-spacing:.15em;
    color:#b38d47;
    font-weight:700;
    margin-bottom:15px;
    text-transform:uppercase;
}

.product-body h3{
    margin:0 0 15px;
    font-size:28px;
    color:#2f2b27;
}

.product-body p{
    margin:0 0 25px;
    line-height:2;
    color:#666;
}

.product-link{
    color:#b38d47;
    text-decoration:none;
    font-weight:600;
}

.product-link:hover{
    text-decoration:underline;
}

@media(max-width:900px){

.featured-grid{
    grid-template-columns:1fr;
}

}
/*==========================
GALLERY
==========================*/

.gallery-hero{
    padding:140px 20px 100px;
    background:#f8f6f2;
    text-align:center;
}

.gallery-hero .section-inner{
    max-width:900px;
    margin:0 auto;
}

.gallery-hero .hero-title{
    font-size:clamp(40px,5vw,64px);
    line-height:1.3;
    font-weight:500;
    margin:25px 0;
    color:#2f2b27;
}

.gallery-hero .hero-text{
    max-width:700px;
    margin:35px auto 0;
    line-height:2;
    color:#666;
}

.gallery-grid-section{
    padding:100px 20px 140px;
}

.gallery-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
}

.gallery-item{
    overflow:hidden;
    border-radius:16px;
    background:#f4f4f4;
    aspect-ratio:1/1;
}

.gallery-item img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:.5s;
}

.gallery-item:hover img{
    transform:scale(1.08);
}

@media(max-width:900px){

.gallery-grid{
    grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:600px){

.gallery-grid{
    grid-template-columns:1fr;
}

}
/*==========================
ACCESS
==========================*/

.access-hero{
    padding:140px 20px 100px;
    background:#f8f6f2;
    text-align:center;
}

.access-hero .section-inner{
    max-width:900px;
    margin:0 auto;
}

.access-hero .hero-title{
    font-size:clamp(40px,5vw,64px);
    line-height:1.3;
    font-weight:500;
    margin:25px 0;
    color:#2f2b27;
}

.access-hero .hero-text{
    max-width:700px;
    margin:35px auto 0;
    line-height:2;
    color:#666;
}

.access-section{
    padding:100px 20px 140px;
}

.access-grid{
    display:grid;
    grid-template-columns:1.3fr 1fr;
    gap:60px;
    align-items:start;
}

.access-map iframe{
    width:100%;
    height:500px;
    border:none;
    border-radius:18px;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
}

.access-info{
    background:#fff;
    padding:40px;
    border-radius:18px;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
}

.access-info h2{
    margin-bottom:30px;
}

.access-table{
    width:100%;
    border-collapse:collapse;
}

.access-table th,
.access-table td{
    padding:18px 0;
    border-bottom:1px solid #eee;
    text-align:left;
    vertical-align:top;
}

.access-table th{
    width:110px;
    color:#666;
    font-weight:600;
}

@media(max-width:900px){

.access-grid{
    grid-template-columns:1fr;
}

.access-map iframe{
    height:350px;
}

/*==========================
FAQ
==========================*/

.faq-hero{
    padding:140px 20px 100px;
    background:#f8f6f2;
    text-align:center;
}

.faq-hero .section-inner{
    max-width:900px;
    margin:0 auto;
}

.faq-hero .hero-title{
    font-size:clamp(40px,5vw,64px);
    line-height:1.3;
    margin:25px 0;
    font-weight:500;
    color:#2f2b27;
}

.faq-hero .hero-text{
    max-width:700px;
    margin:35px auto 0;
    line-height:2;
    color:#666;
}

.faq-section{
    padding:100px 20px 140px;
}

.faq-list{
    max-width:900px;
    margin:0 auto;
}

.faq-item{
    border-bottom:1px solid #e5e5e5;
}

.faq-item summary{
    list-style:none;
    cursor:pointer;
    padding:28px 0;
    font-size:20px;
    font-weight:600;
    position:relative;
}

.faq-item summary::-webkit-details-marker{
    display:none;
}

.faq-item summary::after{
    content:"+";
    position:absolute;
    right:0;
    font-size:28px;
    color:#b38d47;
}

.faq-item[open] summary::after{
    content:"−";
}

.faq-answer{
    padding:0 0 30px;
    line-height:2;
    color:#666;
}
}	
/*==========================
CONTACT
==========================*/

.contact-hero{
    padding:140px 20px 100px;
    background:#f8f6f2;
    text-align:center;
}

.contact-hero .section-inner{
    max-width:900px;
    margin:0 auto;
}

.contact-hero .hero-title{
    font-size:clamp(40px,5vw,64px);
    line-height:1.3;
    margin:25px 0;
    font-weight:500;
    color:#2f2b27;
}

.contact-hero .hero-text{
    max-width:700px;
    margin:35px auto 0;
    line-height:2;
    color:#666;
}

.contact-section{
    padding:100px 20px 140px;
}

.contact-grid{
    display:grid;
    grid-template-columns:380px 1fr;
    gap:60px;
}

.contact-info{
    background:#f8f6f2;
    padding:40px;
    border-radius:18px;
}

.contact-info h2{
    margin-bottom:20px;
}

.contact-info p{
    line-height:2;
    color:#666;
}

.contact-info ul{
    margin-top:30px;
    padding:0;
    list-style:none;
}

.contact-info li{
    margin-bottom:15px;
}

.contact-form{
    background:#fff;
    padding:40px;
    border-radius:18px;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
}

.contact-form input,
.contact-form textarea,
.contact-form select{
    width:100%;
    padding:14px 16px;
    border:1px solid #ddd;
    border-radius:8px;
    margin-top:8px;
    margin-bottom:20px;
    font-size:16px;
}

.contact-form textarea{
    min-height:180px;
}

.contact-form input[type="submit"]{
    background:#b38d47;
    color:#fff;
    border:none;
    cursor:pointer;
    transition:.3s;
}

.contact-form input[type="submit"]:hover{
    background:#96753a;
}

@media(max-width:900px){

.contact-grid{
    grid-template-columns:1fr;
}

}
/* ===== Header ===== */

#header {
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid #ece8e2;
    transition: all .3s ease;
}

#header .c-gnav a {
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .08em;
    transition: color .25s ease;
}

#header .c-gnav a:hover {
    color: #8b6f47;
}

#header .c-headLogo__title {
    font-size: 28px;
    font-weight: 600;
    letter-spacing: .12em;
}
/* お問い合わせボタン */

#header .c-gnav > li:last-child > a{
    background:#8b6f47;
    color:#fff !important;
    padding:12px 22px;
    border-radius:999px;
    transition:.3s;
}

#header .c-gnav > li:last-child > a:hover{
    background:#6f5737;
    transform:translateY(-2px);
}
/* ヘッダーの余白調整 */

#header .l-header__inner{
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 40px;
}

#header .c-gnav{
    gap: 16px;
}
/* 共通レイアウト */

body{
    color:#333;
    line-height:1.9;
    letter-spacing:.04em;
}

section{
    padding:100px 0;
}

.l-container{
    max-width:1200px;
    margin:0 auto;
}

h2{
    font-size:clamp(32px,4vw,48px);
    font-weight:500;
    letter-spacing:.08em;
    margin-bottom:20px;
}

p{
    font-size:16px;
}
/* セクション共通 */

.top-section{
    max-width:1200px;
    margin:0 auto;
    padding:120px 40px;
}

@media (max-width:768px){

.top-section{
    padding:80px 24px;
}

}
.section{
    padding:120px 40px;
}
.section-inner{
    max-width:1200px;
    margin:0 auto;
    width:100%;
}
/* 共通ボタン */

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:16px 34px;
    border:1px solid #8b6f47;
    border-radius:999px;
    background:#fff;
    color:#8b6f47;
    text-decoration:none;
    font-weight:600;
    letter-spacing:.08em;
    transition:all .3s ease;
}

.btn:hover{
    background:#8b6f47;
    color:#fff;
    transform:translateY(-3px);
    box-shadow:0 12px 30px rgba(139,111,71,.18);
}

.btn span{
    color:inherit;
}
/* 見出しのライン */

.divider{
    width:80px;
    height:2px;
    background:#8b6f47;
    margin:24px 0 32px;
}

.divider.center{
    margin:24px auto 32px;
}
/* サービスカード */

.service-card{
    background:#fff;
    border:1px solid #ece8e2;
    border-radius:20px;
    padding:40px 32px;
    transition:all .3s ease;
}

.service-card:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 40px rgba(0,0,0,.08);
    border-color:#8b6f47;
}
/* サービスカード内の文字 */

.service-card h3{
    font-size:24px;
    font-weight:600;
    margin:16px 0 12px;
    line-height:1.4;
}

.service-card p{
    font-size:15px;
    line-height:1.9;
    color:#666;
}

.service-en{
    display:block;
    font-size:12px;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:#8b6f47;
    margin-bottom:8px;
}

.service-icon{
    font-size:40px;
    display:block;
    margin-bottom:12px;
}
/* サービスカードの高さを統一 */

.services-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:32px;
}

.service-card{
    display:flex;
    flex-direction:column;
    height:100%;
}
/* スマホ対応 */

@media (max-width: 768px){

    .services-grid{
        grid-template-columns:1fr;
        gap:20px;
    }

}
/* ギャラリー画像 */

.gallery-grid img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .5s ease;
}

.g-item{
    overflow:hidden;
    border-radius:20px;
}

.g-item:hover img{
    transform:scale(1.05);
}
/* ギャラリーカード */

.g-item{
    box-shadow:0 12px 30px rgba(0,0,0,.08);
    transition:all .35s ease;
}

.g-item:hover{
    transform:translateY(-6px);
    box-shadow:0 24px 50px rgba(0,0,0,.14);
}
/* フッター */

footer{
    background:#1f1c19;
    color:#fff;
    margin-top:120px;
}

.footer-inner{
    max-width:1200px;
    margin:0 auto;
    padding:80px 40px;
}

.footer-nav{
    display:flex;
    flex-wrap:wrap;
    gap:18px 28px;
}

.footer-nav a{
    color:rgba(255,255,255,.75);
    text-decoration:none;
    transition:.3s;
}

.footer-nav a:hover{
    color:#fff;
}

.footer-copy{
    color:rgba(255,255,255,.55);
    font-size:14px;
}
.footer-inner{
    display:flex;
    flex-direction:column;
    gap:50px;
    padding:60px 40px;
}
.footer-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:60px;
}

.footer-logo{
    flex:1;
}

.footer-nav{
    flex:2;
    justify-content:center;
}

.sns-links{
    flex:1;
    display:flex;
    justify-content:flex-end;
}
/* Footer Menu */

.footer-menu{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:30px;
    list-style:none;
    margin:0;
    padding:0;
}

.footer-menu li{
    list-style:none;
}

.footer-menu a{
    color:#fff;
    text-decoration:none;
    font-size:15px;
}

.footer-menu a:hover{
    color:#b08a58;
}
/* ==========================
   Footer
========================== */

.footer-top{
    display:grid;
    grid-template-columns:1.2fr 1fr;
    gap:80px;
    align-items:start;
}

.footer-company h3{
    font-size:32px;
    margin-bottom:8px;
    color:#fff;
}

.footer-company p{
    color:rgba(255,255,255,.75);
    line-height:2;
    margin:0 0 10px;
}

.footer-nav{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.footer-nav a{
    color:rgba(255,255,255,.75);
    text-decoration:none;
    transition:.3s;
}

.footer-nav a:hover{
    color:#b08a58;
    padding-left:8px;
}

.footer-bottom{
    margin-top:60px;
    padding-top:30px;
    border-top:1px solid rgba(255,255,255,.1);
    text-align:center;
}

.footer-copy{
    color:rgba(255,255,255,.5);
}

@media (max-width:768px){

    .footer-top{
        grid-template-columns:1fr;
        gap:40px;
    }

}
.footer-instagram{
    margin-top:24px;
}

.footer-instagram a{
    display:inline-block;
    color:#b08a58;
    text-decoration:none;
    border:1px solid #b08a58;
    padding:10px 20px;
    border-radius:999px;
    transition:.3s;
}

.footer-instagram a:hover{
    background:#b08a58;
    color:#fff;
}
.footer-company a{
    color:#d6c09a;
    text-decoration:none;
    transition:.3s;
}

.footer-company a:hover{
    color:#fff;
}

.footer-instagram{
    margin-top:24px;
}

.footer-instagram a{
    display:inline-block;
    border:1px solid #b08a58;
    padding:10px 22px;
    border-radius:999px;
    color:#b08a58;
}

.footer-instagram a:hover{
    background:#b08a58;
    color:#fff;
}
.products-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
margin:50px 0;
}

.product-card{
display:block;
background:#fff;
border-radius:18px;
overflow:hidden;
text-decoration:none;
color:#333;
box-shadow:0 10px 30px rgba(0,0,0,.08);
transition:.3s;
}

.product-card:hover{
transform:translateY(-8px);
}

.product-card img{
width:100%;
aspect-ratio:4/5;
object-fit:cover;
display:block;
}

.product-card h2{
padding:20px;
font-size:20px;
text-align:center;
}
.product-cat{
    text-align:center;
    color:#9b7b47;
    font-size:14px;
    margin:-10px 0 20px;
    letter-spacing:.08em;
}
.product-single{
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:start;
margin:60px 0;
}

.product-image img{
width:100%;
border-radius:18px;
display:block;
}

.product-info h1{
font-size:36px;
margin-bottom:10px;
}

.product-content{
margin:30px 0;
line-height:2;
}

.product-btn{
display:inline-block;
padding:16px 36px;
background:#9b7b47;
color:#fff;
text-decoration:none;
border-radius:999px;
transition:.3s;
}

.product-btn:hover{
opacity:.85;
}