:root {
--bg:#0b0c10;
--fg:#f6f7fb;
--muted:rgba(246,247,251,.75);
--card:rgba(255,255,255,.06);
--line:rgba(255,255,255,.12);
--radius:18px;
--max:1100px;
}
* {
    box-sizing: border-box
}
html, body {
    margin: 0;
    padding: 0
}
body {
    font-family: system-ui, -apple-system, Segoe UI, Roboto, "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", sans-serif;
    background: var(--bg);
    color: var(--fg);
    line-height: 1.7;
}
a {
    color: inherit
}
.wrap {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 18px
}
.section {
    padding: 64px 0
}
.eyebrow {
    letter-spacing: .08em;
    font-size: 12px;
    text-transform: uppercase;
    color: var(--muted)
}
h1, h2, h3 {
    margin: 0 0 14px 0;
    line-height: 1.25
}
h2 {
    font-size: 22px
}
p {
    margin: 0 0 14px 0;
    color: var(--muted)
}
.hr {
    height: 1px;
    background: var(--line);
    margin: 22px 0
}
/* Hero */
.hero {
    position: relative;
    min-height: 72vh;
    display: flex;
    align-items: flex-end;
    padding: 72px 0 46px;
    overflow: hidden;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(to top, rgba(11,12,16,.92), rgba(11,12,16,.35) 55%, rgba(11,12,16,.15)), url("/assets/img/hero.jpg") center/cover no-repeat;/* ↑ヒーロー画像を差し替えてください */
}
.hero-inner {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 18px;
    width: 100%
}
.brandmark {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
}
.brandmark img {
    height: 42px;
    width: auto;
    display: block
}
.brandmark .fallback {
    font-weight: 700;
    letter-spacing: .08em;
    font-size: 18px;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(0,0,0,.25);
}
.hero h1 {
    font-size: 40px;
    margin-bottom: 10px
}
.hero .lead {
    max-width: 720px;
    font-size: 15px
}
.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,.06);
    text-decoration: none;
    font-size: 13px;
}
.btn:hover {
    background: rgba(255,255,255,.10)
}
.btn.primary {
    background: rgba(255,255,255,.14)
}
.btn.primary:hover {
    background: rgba(255,255,255,.18)
}
/* Cards */
.grid {
    display: grid;
    gap: 16px;
}
.grid-3 {
    grid-template-columns: repeat(3, 1fr)
}

@media (max-width: 980px) {
.grid-3 {
    grid-template-columns: repeat(2, 1fr)
}
}

@media (max-width: 620px) {
.grid-3 {
    grid-template-columns: 1fr
}
.hero h1 {
    font-size: 32px
}
.hero {
    min-height: 64vh;
}
}
.card {
    border: 1px solid var(--line);
    background: var(--card);
    border-radius: var(--radius);
    overflow: hidden;
}
.card-body {
    padding: 16px
}
.card h3 {
    font-size: 18px
}
.card p {
    margin-bottom: 0
}
/* Brand image cards */
.brand-visual {
    aspect-ratio: 16 / 9;
    position: relative;
    background: #222 center/cover no-repeat;
}
.brand-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(11,12,16,.82), rgba(11,12,16,.25), rgba(11,12,16,.10));
}
.brand-logo {
    position: absolute;
    left: 14px;
    bottom: 14px;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(0,0,0,.35);
    backdrop-filter: blur(6px);
}
.brand-logo img {
    height: 20px;
    width: auto;
    display: block
}
.brand-logo .name {
    font-weight: 700;
    letter-spacing: .06em;
    font-size: 14px
}
/* History */
.history {
    display: grid;
grid-template-columns: 1.15fr .85fr;
    gap: 18px;
    align-items: start;
}

@media (max-width: 900px) {
.history {
    grid-template-columns: 1fr
}
}
.note {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(255,255,255,.04);
    padding: 16px;
}
.note ul {
    margin: 10px 0 0 18px;
    color: var(--muted)
}
.note li {
    margin: 6px 0
}
/* News */
.news-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(3, 1fr)
}

@media (max-width: 980px) {
.news-grid {
    grid-template-columns: repeat(2, 1fr)
}
}

@media (max-width: 620px) {
.news-grid {
    grid-template-columns: 1fr
}
}
.news-card {
    text-decoration: none;
    display: block;
    border: 1px solid var(--line);
    background: rgba(255,255,255,.05);
    border-radius: var(--radius);
    overflow: hidden;
}
.news-thumb {
    aspect-ratio: 16/9;
    background: rgba(255,255,255,.06)
}
.news-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}
.news-meta {
    padding: 14px
}
.news-date {
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 6px
}
.news-title {
    font-size: 14px;
    line-height: 1.4;
    color: var(--fg)
}
.news-empty {
    border: 1px dashed rgba(255,255,255,.22);
    border-radius: var(--radius);
    padding: 16px;
    color: var(--muted);
}

/* Contact */
.contact-card{
  background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  border-color: rgba(255,255,255,.18);
}
.contact-body{
  display:flex;
  gap:18px;
  align-items:center;
  justify-content:space-between;
}
.contact-mail{
  font-size:18px;
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.22);
}
.contact-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
@media (max-width: 700px){
  .contact-body{flex-direction:column; align-items:flex-start;}
  .contact-actions{justify-content:flex-start;}
}	
	
/* Footer */
footer {
    border-top: 1px solid var(--line);
    padding: 26px 0 36px;
    color: var(--muted);
    font-size: 13px;
}
.footer-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
}
.footer-row a {
    color: var(--fg)
}
.hero{
  position: relative;
  width: 100%;
  min-height: 70vh;     /* 画面高さに合わせる */
  max-height: 820px;    /* 伸びすぎ防止（不要なら削除） */
  overflow: hidden;
  background: #0b0c10;  /* 読み込み前の背景 */
}

/* 背景画像を全面に */
.hero__bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;      /* 画面にフィット（トリミングされます） */
  object-position: center;/* 必要なら "35% 60%" みたいに調整 */
  display: block;
}

/* うっすら暗くして読みやすく（不要なら消してOK） */
.hero__overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.10) 0%,
    rgba(0,0,0,0.10) 60%,
    rgba(0,0,0,0.35) 100%
  );
}

.hero__inner{
  position: relative;
  height: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 72px 18px;
  display: flex;
  align-items: flex-end; /* 文字を入れるなら下寄せ */
}

/* アクセシビリティ用（見えないh1） */
.sr-only{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.wrap{
  max-width:1100px;
  margin:0 auto;
  padding:0 18px;
}

.section-title{
  margin:0 0 16px;
  font-size:22px;
}

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

.brand-card{
  display:block;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:#0b0c10;
  transform: translateZ(0);
}

.brand-card img{
  width:100%;
  height:auto;
  display:block;
  aspect-ratio:16/9;     /* ここで16:9固定 */
  object-fit:cover;
}

.brand-card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.22);
}

@media (max-width: 980px){
  .brand-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 620px){
  .brand-grid{ grid-template-columns:1fr; }
}
/* Brandsセクション全体 */
.brands{
  padding: 56px 0 72px;          /* ← 上を増やす（ここが効く） */
  background: #0b0c10;
}

/* 見出しの下も少し空ける */
.brands .section-title{
  margin: 0 0 22px;
  font-size: 22px;
}
.brand-grid{
  display:grid;
  gap:24px;
  grid-template-columns:repeat(3, 1fr);
}

.brand-card{
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:#0b0c10;
}

.brand-card img{
  width:100%;
  height:auto;
  display:block;
  aspect-ratio:16/9;
  object-fit:cover;
}

@media (max-width: 980px){
  .brand-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 620px){
  .brand-grid{ grid-template-columns:1fr; }
}
.contact-body{
  display:block;          /* ← flexをやめる */
}

.contact-title{
  margin: 8px 0 10px;
}

.contact-org{
  color: rgba(255,255,255,.72);
  margin-bottom: 10px;
}

.contact-mail{
  display:inline-block;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.22);
}
.contact-mail:hover{
  opacity:.92;
}
/* 既存カードに合わせて調整OK */
.card{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  border-radius: 22px;
  overflow:hidden;
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
}
.card-body{ padding: 22px; }

.eyebrow{
  color: rgba(255,255,255,.62);
  letter-spacing: .14em;
  font-size: 12px;
}
.contact-title{
  margin: 8px 0 16px;
  color:#fff;
  font-size: 30px;
}

/* 主役ブロック */
.lead-block{
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.07);
  border-radius: 18px;
  padding: 16px 16px;
}

.lead-badge{
  display:inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  color: rgba(255,255,255,.78);
  border:1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.18);
  padding: 6px 10px;
  border-radius: 999px;
}

.lead-title{
  margin: 10px 0 10px;
  color:#fff;
  font-size: 22px;
}

.lead-text{
  margin: 0 0 14px;
  color: rgba(255,255,255,.82);
  line-height: 1.9;
}

.info-box{
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  border-radius: 14px;
  padding: 12px 12px;
}
.info-line{
  color: rgba(255,255,255,.78);
  line-height: 1.75;
}

/* その他問い合わせ */
.sub-block{
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.12);
}

.sub-title{
  margin: 0 0 6px;
  color:#fff;
  font-size: 18px;
}
.sub-text{
  margin: 0 0 12px;
  color: rgba(255,255,255,.70);
  line-height: 1.8;
}

.sub-org{
  color: rgba(255,255,255,.72);
  margin-bottom: 8px;
}

.mail-link{
  color:#fff;
  text-decoration:none;
  border-bottom: 1px solid rgba(255,255,255,.22);
}
.mail-link:hover{ opacity:.92; }
.mail-link.big{
  display:inline-block;
  font-size: 20px;
  font-weight: 800;
}

/* HERO（背景＋ロゴ分離） */
.hero{
  position: relative;
  width: 100%;
  height: clamp(520px, 78vh, 820px);
  overflow: hidden;
  background: #000;
}

/* picture を背景として全面に */
.hero picture{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* 背景画像 */
.hero__bg{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center; /* PCはセンター */
  display: block;
}

/* 暗幕（必要なければ opacity など調整OK） */
.hero__overlay{
  position: absolute;
  inset: 0;
  background: radial-gradient(1200px 520px at 50% 45%, rgba(0,0,0,.08), rgba(0,0,0,.40));
  pointer-events: none;
}

/* ロゴ：常に中央固定 */
.hero__inner{
  position: relative;
  z-index: 1;
  height: 100%;
  display: grid;
  place-items: center; /* ロゴは動かない */
  padding: 24px;
}

.hero__logo{
  width: min(560px, 72vw);
  height: auto;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.35));
}

/* スマホだけ：背景の見せたい位置を調整（ロゴはセンターのまま） */
@media (max-width: 680px){
  .hero{
    height: 78vh;
    min-height: 560px;
  }
  .hero__bg{
    object-position: left 72%; /* ←自転車が見える位置に微調整（60〜85%） */
  }
  .hero__logo{
    width: min(440px, 80vw);
  }
}

/* PC幅(1200px〜)は常に下寄せして自転車を残す */
@media (min-width: 1200px){
  .hero__bg{
    object-position: left 90%; /* ← 88〜95%で微調整 */
  }
}
@media (min-width: 1600px){
  .hero__bg{
    object-position: left 93%;
  }
}