@charset "UTF-8";
/* ==========================================================================
   CBC 交通アクセス ページ
   - フォーマット（ヘッダー／フッター／ヒーロー／モバイルドロワー）のみ CBC。
     本文（地図・電車・車・駐車場）は東京ハンドメイドマルシェ版の細部デザインを踏襲。
   - 本文の SP 調整は従来どおり /css/sp/access.css（media max-width:767）を併用。
   - 英字タイトル: Akshar / 本文: Zen Kaku Gothic New（Google Fonts）
   ========================================================================== */

#pageAccess {
  --cbc-ink: #333333;
  --cbc-ink-2: #4a4a4a;
  --cbc-muted: #9a9a9a;
  --cbc-line: #e2e2e2;
  --cbc-bg: #ffffff;
  --cbc-bg-soft: #f4f3f1;
  --cbc-yellow: #f5cf3d;
  --cbc-yellow-soft: #fbe79f;
  --cbc-teal: #56b0ac;
  --cbc-teal-soft: #cfe9e7;
  --cbc-footer: #3d3b39;
  --cbc-bar: #736f6b;
  --cbc-bar-dark: #6b6763;
  --cbc-link: #3f9c98;

  margin: 0;
  padding: 0;
  color: var(--cbc-ink);
  background: var(--cbc-bg);
  font-family: 'Zen Kaku Gothic New', -apple-system, 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif;
  font-size: 1.6rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

#pageAccess *,
#pageAccess *::before,
#pageAccess *::after {
  box-sizing: border-box;
}

#pageAccess a {
  text-decoration: none;
}

/* ============ HERO（CBC） ============ */
.accessHero {
  background: linear-gradient(100deg, #ffffff 0%, #ffffff 24%, var(--cbc-yellow-soft) 62%, var(--cbc-yellow) 100%);
}
.accessHeroInner {
  max-width: var(--cbc-hero-max);
  margin: 0 auto;
  padding: 40px 32px;
  padding-left: var(--cbc-hero-pad-l);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: 173px;
  gap: 6px;
}
/* HERO英字見出しの左端はヘッダーのCBCロゴ左端に追従する。
   帯幅・内寄せは :root の --cbc-hero-max / --cbc-hero-pad-l（1280px→1100px で線形に縮む）に統合済み。
   ≥1280px では従来と同じ max-width:1280px / padding-left:134px になる。 */
.accessHeroTitle {
  font-family: 'Akshar', sans-serif;
  font-weight: 600;
  /* ヒーロー英字見出しをENTRY（6.4rem/1.05）に統一 */
  font-size: 6.4rem;
  line-height: 1.05;
  letter-spacing: 0.02em;
  color: var(--cbc-ink);
  margin: 0;
}
.accessHeroSub {
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--cbc-ink-2);
  margin: 0;
}

/* ============ 本文コンテナ ============ */
.accessBody {
  background: var(--cbc-bg);
  padding: 20px 20px 56px;
}
.accessInner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 30px;
}

/* ==========================================================================
   ここから下は 東京ハンドメイドマルシェ版 access.css の踏襲（本文デザイン）
   固定幅は max-width 化してレスポンシブ対応。SP 微調整は sp/access.css を併用。
   ========================================================================== */

.pc { display: block; }
.sp { display: none; }

/* ---- Googleマップ ---- */
#map_canvas {
  width: 100%;
  max-width: 1100px;
  height: 550px;
  margin: 40px auto 5px;
  border: 15px solid #E2E2E2;
  border-radius: 10px;
}
#map_canvas iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
.linkMapContainer {
  margin: 0 0 15px 0;
  text-align: right;
}
.linkMapContainer .link {
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--cbc-link);
  border-bottom: 1px solid #9dd0cd;
  transition: opacity .2s;
}
.linkMapContainer .link:hover { opacity: .75; }
.linkMapContainer .link .labelPc { display: inline; }
.linkMapContainer .link .labelSp { display: none; }
.mapAddress {
  margin: 0 0 60px 0;
}
/* 住所・TEL の地の文は太字にして視認性を上げる（色は #333=--cbc-ink のまま） */
.mapAddress p {
  font-weight: 700;
}
.mapAddress .place {
  font-size: 2rem;
  font-weight: 700;
}
/* 会場名はカンプに合わせて濃色（リンクでもティールにしない） */
.mapAddress .place a {
  color: var(--cbc-ink);
}
/* 公式サイト等の本文リンクはティール */
.mapAddress a {
  color: var(--cbc-link);
}

/* ---- セクション見出し（CBC: グレーバー） ---- */
.accessh2 {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 0 0 30px;
  padding: 12px 22px;
  background: var(--cbc-bar);
  color: #ffffff;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.4;
  border: 0;
}

/* ---- 電車 ---- */
#trainBox {
  margin: 80px auto 50px;
}
.imgTrain {
  width: 100%;
  max-width: 891px;
  margin: 50px auto;
}
.imgTrain img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---- 車・駐車場 ---- */
#carBox {
  margin: 0 auto;
}
.imgCar {
  width: 100%;
  max-width: 891px;
  margin: 50px auto;
}
.imgCar img {
  display: block;
  width: 100%;
  height: auto;
}
#carBox .parkingInformation {
  width: 100%;
  max-width: 940px;
  margin: 70px auto 0;
}
/* 駐車場のご案内（東京ハンドメイドマルシェ踏襲: 区切り線見出し） */
#carBox h3 {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 0 0 6px;
  padding: 0;
  background: none;
  color: var(--cbc-ink);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
}
#carBox h3::before,
#carBox h3::after {
  content: "";
  flex-grow: 1;
  border-top: 1px solid var(--cbc-line);
}
#carBox h3::before {
  margin-right: 26px;
}
#carBox h3::after {
  margin-left: 26px;
}
/* 駐車場のリード文・注記（PCは中央寄せ、SPは左寄せ） */
.parkingLead {
  margin-top: 24px;
  text-align: center;
}
#carBox .description {
  margin-top: 16px;
  text-align: center;
}
/* 駐車場情報への外部リンクボタン（サイト標準色: ティール） */
.parkingLinkWrap {
  margin-top: 32px;
  text-align: center;
}
.parkingLink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 320px;
  padding: 16px 48px;
  background: var(--cbc-teal);
  color: #ffffff;
  font-size: 2.0rem;
  font-weight: 700;
  border-radius: 8px;
  transition: opacity .2s;
}
.parkingLink:hover {
  opacity: .85;
}

/* ============ レスポンシブ（〜767px）============
   本文の SP 調整もこのファイルに集約（旧 sp/access.css は不使用）
   ============================================== */
@media screen and (max-width: 767px) {
  #pageAccess {
    font-size: 1.4rem;
  }
  .accessHeroInner {
    padding: 12px 18px;
    min-height: 134px;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .accessHeroTitle {
    font-size: 4.8rem;
  }
  .accessHeroSub {
    font-size: 1.6rem;
  }

  /* 本文：左右ガター（16px）を全セクション共通で付与 */
  .accessBody {
    padding: 8px 0 40px;
  }
  .accessInner {
    padding: 0 16px;
  }

  /* 画像 PC/SP 切替 */
  .pc { display: none; }
  .sp { display: block; }

  /* 地図・会場情報 */
  #map_canvas {
    width: 100%;
    height: 300px;
    margin: 20px 0 12px;
    border: none;
    border-radius: 0;
  }
  .linkMapContainer {
    margin: 0 0 14px;
  }
  .linkMapContainer .link .labelPc { display: none; }
  .linkMapContainer .link .labelSp { display: inline; }
  .mapAddress {
    margin: 0 0 40px;
  }
  .mapAddress .place {
    font-size: 1.6rem;
  }
  .mapAddress span {
    display: block;
  }

  /* セクション見出しバー：下マージンを拡大、左右は .accessInner で統一 */
  .accessh2 {
    font-size: 1.6rem;
    padding: 11px 16px;
    margin: 0 0 30px;
  }

  /* 電車・車：セクション個別の左右パディングは付けない（.accessInner で統一） */
  #trainBox {
    margin: 0 auto 56px;
  }
  #carBox {
    margin: 0 auto;
  }
  .imgTrain,
  .imgCar {
    max-width: none;
    margin: 0 auto 24px;
  }

  /* 駐車場 */
  #carBox .parkingInformation {
    margin-top: 44px;
  }
  #carBox h3 {
    font-size: 1.6rem;
  }
  #carBox h3::before { margin-right: 18px; }
  #carBox h3::after { margin-left: 18px; }
  .parkingLead,
  #carBox .description {
    text-align: left;
  }
  #carBox .description {
    margin-top: 14px;
  }
  .parkingLinkWrap {
    margin-top: 26px;
  }
  .parkingLink {
    min-width: 240px;
    padding: 15px 32px;
    font-size: 1.6rem;
  }
}