/* ===== ヘッダー ===== */
.site-header{
  border-bottom:1px solid var(--hairline);
  background:var(--cream);
  position:sticky; top:0; z-index:50;
}
.site-header-row{
  display:flex; align-items:center; gap:18px;
  padding: 16px 4vw;
  max-width:1600px; margin:0 auto;
}
.brand{
  display:flex; align-items:center; gap:10px;
  text-decoration:none; color:var(--plum-deep); flex:none;
}
.brand-mark{ display:flex; align-items:center; justify-content:center; }
.brand-text{
  font-family:'Shippori Mincho', serif; font-size:18px; font-weight:600; letter-spacing:.02em;
  display:flex; flex-direction:column; line-height:1.25; white-space:nowrap;
}
.brand-text small{ font-family:'Zen Kaku Gothic New', sans-serif; font-size:10px; color:var(--ink-soft); font-weight:400; letter-spacing:.02em; }

.nav-links{ display:flex; gap:14px; flex:1 1 auto; min-width:0; }
.nav-links a{
  font-size:13px; color:var(--ink); text-decoration:none; white-space:nowrap;
  padding:6px 0; border-bottom:2px solid transparent;
}
.nav-links a:hover{ color:var(--plum-deep); border-bottom-color:var(--gold); }

.header-search{
  display:flex; align-items:center; background:var(--white);
  border:1px solid var(--hairline); border-radius:20px; padding:6px 12px; gap:6px;
  flex:0 1 170px; min-width:110px;
}
.header-search input{
  border:none; outline:none; background:none; font-size:12.5px; width:100%; min-width:0;
  font-family:'Zen Kaku Gothic New', sans-serif;
}
.header-search button{ border:none; background:none; color:var(--ink-soft); cursor:pointer; display:flex; flex:none; }

.header-actions{ display:flex; gap:8px; align-items:center; flex:none; }
.header-actions .btn{ padding:10px 16px; font-size:13.5px; white-space:nowrap; }

.hamburger-btn{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:38px; height:38px; border:none; background:none; cursor:pointer; flex:none;
}
.hamburger-btn span{ display:block; width:22px; height:2px; background:var(--plum-deep); margin:0 auto; }

.mobile-menu{
  display:none; flex-direction:column; gap:18px;
  padding:20px 6vw 28px; border-top:1px solid var(--hairline);
  background:var(--cream);
}
.mobile-menu.is-open{ display:flex; }
.mobile-menu-links{ display:flex; flex-direction:column; gap:14px; }
.mobile-menu-links a{ font-size:15px; color:var(--ink); text-decoration:none; }
.mobile-menu-search{ display:flex; gap:8px; }
.mobile-menu-search input{
  flex:1; padding:10px 14px; border:1px solid var(--hairline); border-radius:20px; font-size:14px;
}
.mobile-menu-actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* ===== スマホ下部固定タブバー ===== */
.bottom-tab-bar{
  display:none;
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:var(--white); border-top:1px solid var(--hairline);
  padding:8px 4px calc(8px + env(safe-area-inset-bottom));
  justify-content:space-around; align-items:center;
}
.bottom-tab-item{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  color:var(--ink-soft); text-decoration:none; font-size:10.5px;
  background:none; border:none; cursor:pointer; font-family:'Zen Kaku Gothic New', sans-serif;
}
.bottom-tab-icon{ font-size:19px; line-height:1; }

/* ===== ヒーロー（トップページ）：写真1枚に左寄せテキストが重なる構成 ===== */
.hero-full{
  position:relative; overflow:hidden;
  background-color:var(--cream);
}
.hero-photo-layer{
  position:absolute; inset:0;
  background-color:var(--cream);
  background-image:
    linear-gradient(to right,
      var(--cream) 0%,
      var(--cream) 30%,
      rgba(251,247,241,.86) 42%,
      rgba(251,247,241,.35) 58%,
      rgba(251,247,241,0) 74%
    ),
    url('/assets/img/hero.jpg');
  background-size: cover, cover;
  background-position: center, 78% center;
  background-repeat: no-repeat, no-repeat;
}
.hero-inner{
  position:relative; z-index:2;
  max-width:1600px; margin:0 auto;
  padding: 0 5vw;
  min-height:600px;
  display:flex; align-items:center;
}
.hero-content{
  max-width:560px;
  padding: 90px 0;
}
.hero-ribbon{ font-size:13px; color:var(--plum); letter-spacing:.03em; margin:0 0 16px; font-weight:500; }
.hero-content h1{ font-size: clamp(28px, 3.2vw, 42px); line-height:1.5; font-weight:600; color:var(--ink); margin:0 0 22px; }
.hero-content p{ font-size:15px; color:var(--ink-soft); max-width:44ch; margin:0 0 32px; }
.hero-ctas{ display:flex; gap:16px; flex-wrap:wrap; align-items:center; }

.hero-script{
  position:absolute; z-index:2; right:5vw; bottom:34px;
  font-family:'Shippori Mincho', serif; font-style:italic; color:var(--white);
  text-shadow:0 2px 10px rgba(0,0,0,.35); font-size:14px; line-height:1.6; text-align:right; margin:0;
}

.hero-decor{ position:absolute; z-index:1; pointer-events:none; opacity:.9; }
.hero-decor-left{ left:0; bottom:0; }
.hero-decor-right{ right:0; bottom:0; }

/* ===== 植物クラスター（枝を複数・自然な間隔で配置） ===== */
.botanical-cluster{
  position:absolute; top:0; bottom:0; width:70px;
  z-index:1; pointer-events:none;
}
.botanical-cluster-left{ left:-6px; }
.botanical-cluster-right{ right:-6px; }
.botanical-sprig{
  position:absolute; left:0; display:block;
  transform-origin:center top;
}

/* ===== クロージングタグライン帯 ===== */
.closing-band{
  position:relative; overflow:hidden;
  padding:64px 6vw; text-align:center;
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream-deep) 100%);
  border-top:1px solid var(--hairline);
}
.closing-tagline{
  position:relative; z-index:2; margin:0 auto; max-width:640px;
  font-family:'Shippori Mincho', serif; font-size:15px; color:var(--plum-deep);
  display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap;
}

/* ===== 4つの柱（GIFT MARKET / WORKS / ITEM / EXPERT / HELP） ===== */
.pillars{ max-width:1600px; margin:0 auto; padding: 0 5vw 6vw; }
.pillar-grid{ display:grid; grid-template-columns: 1fr repeat(4, 1.3fr); gap:20px; }
.pillar-card{
  background:var(--white); border:1px solid var(--hairline); border-radius:10px;
  padding:26px 20px; text-align:center;
}
.pillar-card.is-intro{ background:transparent; border:none; text-align:left; display:flex; flex-direction:column; justify-content:center; }
.pillar-icon{
  width:64px; height:64px; border-radius:50%; margin:0 auto 16px;
  display:flex; align-items:center; justify-content:center;
}
.pillar-card h3{ font-size:16px; margin:0 0 4px; color:var(--ink); font-weight:700; }
.pillar-card .pillar-sub{ font-size:12px; color:var(--ink-soft); margin:0 0 12px; }
.pillar-card p.pillar-desc{ font-size:13px; color:var(--ink-soft); margin:0 0 16px; }
.pillar-arrow{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%; text-decoration:none;
  font-size:16px; color:var(--white);
}

/* ===== 立場（3種の会員）セクション ===== */
.roles{
  max-width:1200px; margin:0 auto; padding: 0 6vw 8vw;
  border-top:1px solid var(--hairline); padding-top:6vw;
}
.roles h2{ font-size:26px; color:var(--plum-deep); margin:0 0 12px; font-weight:600; }
.roles > p{ color:var(--ink-soft); max-width:60ch; margin:0 0 44px; }
.role-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:28px; margin-bottom:40px; }
.role-card{ background:var(--white); border:1px solid var(--hairline); border-radius: var(--radius-card); padding:30px 26px; }
.role-card .role-tag{
  display:inline-block; font-size:12px; color:var(--gold);
  border:1px solid var(--gold); border-radius:20px; padding:3px 12px; margin-bottom:16px;
}
.role-card h3{ font-size:18px; margin:0 0 10px; color:var(--ink); font-weight:600; }
.role-card p{ font-size:14px; color:var(--ink-soft); margin:0; }

/* ===== 「今、贈られているもの」 ===== */
.highlights{ max-width:1600px; margin:0 auto; padding: 0 5vw 7vw; }
.highlights-head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:26px; flex-wrap:wrap; }
.highlights-head h2{ font-size:22px; color:var(--ink); margin:0; font-weight:700; }
.highlights-head p{ font-size:13px; color:var(--ink-soft); margin:4px 0 0; }
.highlights-head a{ font-size:13px; color:var(--plum-deep); text-decoration:underline; white-space:nowrap; }
.highlights-scroll{
  display:grid; grid-template-columns:repeat(5, minmax(220px, 1fr)); gap:20px;
  overflow-x:auto; padding-bottom:6px;
}

/* ===== ページ共通ヒーロー見出し（browse等の下位ページ） ===== */
.page-hero{ max-width:1200px; margin:0 auto; padding: 5vw 6vw 2vw; }
.page-hero h1{ font-size:clamp(26px, 3vw, 34px); color:var(--plum-deep); margin:0 0 14px; }
.page-hero p{ color:var(--ink-soft); max-width:60ch; margin:0; font-size:15px; }

/* ===== フッター ===== */
.site-footer{
  border-top:1px solid var(--hairline);
  padding: 36px 6vw;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  color:var(--ink-soft); font-size:13px;
}
.site-footer a{ color:var(--ink-soft); text-decoration:none; margin-left:18px; }
.site-footer a:hover{ color:var(--plum-deep); }

@media (max-width: 1220px){
  .nav-links, .header-search{ display:none; }
  .hamburger-btn{ display:flex; }
  .pillar-grid{ grid-template-columns: repeat(2, 1fr); }
  .highlights-scroll{ grid-auto-flow:column; grid-template-columns:none; }
  .highlights-scroll .listing-card{ width:230px; }
}

@media (max-width: 860px){
  .hero-full{ min-height:640px; }
  .hero-photo-layer{
    background-image:
      linear-gradient(to bottom,
        rgba(253,250,246,0) 0%,
        rgba(253,250,246,.55) 58%,
        var(--cream) 82%,
        var(--cream) 100%
      ),
      url('/assets/img/hero.jpg');
    background-size: cover, cover;
    background-position: center, center 22%;
  }
  .hero-inner{
    display:flex; align-items:flex-end;
    min-height:640px; max-width:none; padding:0 6vw;
  }
  .hero-content{ max-width:none; padding:0 0 36px; }
  .hero-content h1{ font-size:clamp(24px, 6vw, 30px); }
  .hero-content p{ font-size:14px; }
  .hero-script{ top:18px; right:5vw; bottom:auto; left:auto; text-align:right; }
  .hero-decor, .botanical-cluster{ display:none; }
  .role-grid{ grid-template-columns:1fr; }
  body{ padding-bottom:64px; } /* 下部タブバー分の余白 */
  .bottom-tab-bar{ display:flex; }
  .site-footer{ padding-bottom:80px; }
}

@media (max-width: 560px){
  .pillar-grid{ grid-template-columns: 1fr 1fr; }
  .pillar-card.is-intro{ grid-column: 1 / -1; text-align:center; align-items:center; }
}