:root {
  --ink:#232a33;
  --accent:#C62828;     /* 扉の赤（ハイライト） */
  --accent-2:#552c65;   /* 商店会パープル（基調アクセント） */
  --soft:#F3F0FA;       /* 薄紫の背景 */
  --card:#ffffff;
  --line:#e7e4f3;
  --anchor-offset: 84px; /
  --shadow:0 10px 26px rgba(18,11,40,.08);
  --hero-img: url("../img/hero_hanachozu3.jpg");
  --bg: radial-gradient(1200px 240px at 50% -80px, rgba(107,95,182,.10), transparent),
        radial-gradient(900px 200px at 50% -40px,  rgba(47,95,167,.06), transparent),
        #faf8fc;
}

*{ box-sizing:border-box }

html {
    scroll-behavior: smooth;
}

html,body{
  margin:0;
  padding:0;
  color:var(--ink);
  background:var(--bg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic UI",Meiryo,sans-serif
}

a{
  color:inherit;
  text-decoration:none
}
a:focus-visible{ outline:2px solid var(--accent-2); outline-offset:2px }

.wrap{ max-width:1160px; margin:0 auto; padding:0 16px }
ul{ list-style:none }

.pagetop {
    height: 50px;
    width: 50px;
    position: fixed;
    right: 30px;
    bottom: 60px;
    background: #fff;
    border: solid 2px #000;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

.pagetop__arrow {
    height: 10px;
    width: 10px;
    border-top: 3px solid #000;
    border-right: 3px solid #000;
    transform: translateY(20%) rotate(-45deg);
}

@media (hover: hover) and (pointer: fine) {
    .pagetop:hover, .pagetop:hover .pagetop__arrow {
        border-color:var(--accent-2);
    }
}

.mt-5{
  margin-top:50px;
}

/* ===== Header ===== */
header{
  position:sticky; top:0; z-index:10;
  background:#fff; border-bottom:1px solid var(--line)
}
.topbar{ display:flex; align-items:center; gap:16px; padding:10px 0 }
.brand{ display:flex; align-items:center; gap:10px }
.brand__logo{ 
  width:40px; 
  height:40px; 
  border-radius:10px; 
  background:url("../img/hakusanshita_logo.png");
  background-size: cover;
}
.brand__title{ font-size:16px; font-weight:700; letter-spacing:.02em }

.lang{ margin-left:auto; display:flex; gap:10px }
.lang a{
  font-size:13px; padding:6px 10px; border:1px solid var(--line); border-radius:20px
}
.lang a[aria-current="true"]{
  border-color:var(--accent-2); color:var(--accent-2); font-weight:700
}

.nav-visitors{ border-top:1px solid var(--line) }
.nav-visitors .wrap{ display:flex; align-items:center; gap:10px }
.nav-list{ display:flex; gap:6px; flex-wrap:wrap; padding:6px 0 }
.nav-item a{
  display:block; padding:10px 14px; border-radius:12px; font-weight:600
}
.nav-item a:hover,.nav-item a:focus{ background:rgba(107,95,182,.08) }

.hamburger{
  display:none; margin-left:auto; border:1px solid var(--line);
  border-radius:10px; padding:8px 10px; background:#fff
}
.hamburger span{ display:block; width:20px; height:2px; background:var(--ink); margin:4px 0 }

@media (max-width:860px){
  .lang{ display:none }
  .hamburger{ display:block }
  .nav-visitors .wrap{ flex-wrap:wrap }
  .nav-list{ display:none; width:100% }
  .nav-list.is-open{ display:flex }
  .nav-item{ flex:1 1 48% }
}

.box-soft{
  background:#fff;
  border-radius:18px;
  padding:24px 22px;
  box-shadow:0 10px 26px rgba(18,11,40,.06);
  border:1px solid #ece9f6;
  position:relative;
  overflow:hidden;
}

.box-soft::before{
  content:""; position:absolute; inset:-20% -10% auto -10%; height:60%;
  background:radial-gradient(400px 140px at 20% 0%, rgba(155,143,216,.12), transparent 60%);
  pointer-events:none;
}

/* ===== Hero ===== */
.hero-full{
  position: relative;
  min-height: clamp(420px, 56vw, 620px);
  display: grid;
  align-items: center;
  isolation: isolate; /* overlayのにじみ防止 */
  overflow: clip;
}

.hero-full .hero-bg{
  position: absolute; inset: 0;
  background: var(--hero-img) center/cover no-repeat;
  transform: scale(1.02); /* ほんの少し拡大して端の白抜け防止 */
  z-index: -2;
}


.hero-full::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.15) 40%, rgba(0,0,0,.15) 100%);
}


.hero-vignette{
  position:absolute; inset:auto 0 0 0; height:28%;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.18));
  z-index:-1;
}

.hero-inner{
  padding: clamp(24px, 5vw, 48px) 16px;
}

.hero-title{
  margin: 0 0 10px;
  font-size: clamp(28px, 5.2vw, 56px);
  line-height: 1.12;
  color: #2f2a45;
  letter-spacing: .01em;
  text-wrap: balance;
}

.hero-title-img{
  max-width:400px;
}

.hero-title-img img{
  width: -webkit-fill-available;
}

/* スマホ最適化 */
@media (max-width: 549px){
  .hero-title-img{
    max-width:320px;
  }
}

.hero-kicker{
  display: block;
  margin-top: clamp(6px, .8vw, 10px);
  font-size: clamp(16px, 2.2vw, 22px);
  font-weight: 800;
  color: var(--accent-2); /* 商店会の紫でブランド感 */
  text-shadow: 2px 2px 10px #fff,
  -2px 2px 10px #fff,
  2px -2px 10px #fff,
  -2px -2px 10px #fff;
}

.hero-sub{
  margin: 8px 0 18px;
  font-size: clamp(15px, 2vw, 20px);
  font-weight: 800;
  color: var(--accent-2); /* 商店会の紫でブランド感 */
  text-shadow: 2px 2px 10px #fff,
  -2px 2px 10px #fff,
  2px -2px 10px #fff,
  -2px -2px 10px #fff;
}

.btn{
  display:inline-block;
  padding: 12px 18px;
  border-radius: 999px;
  font-weight: 800;
  text-decoration:none;
  transition: transform .08s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
  box-shadow: 0 10px 26px rgba(18,11,40,.10);
}
.btn:active{ transform: translateY(1px); }

.btn-primary{ /* 基本は紫 */
  background: var(--accent-2);
  color:#fff;
}
.btn-primary:hover{ box-shadow: 0 16px 30px rgba(107,95,182,.25); }

.btn-accent{ /* 強調で赤を使う場合はこちらに付け替え */
  background: var(--accent);
  color:#fff;
}
.btn-accent:hover{ box-shadow: 0 16px 30px rgba(198,40,40,.25); }

@media (max-width: 640px){
  .hero-sub{ margin-bottom: 14px; }
}

.kv{ display:grid; grid-template-columns:1.1fr 1fr; gap:24px; align-items:center }
.kv .visual{ position:relative; border-radius:20px; overflow:hidden; height:360px; background:#ddd }
.kv .visual img{ width:100%; height:100%; object-fit:cover; display:block }

.kv .copy h1{ margin:0 0 8px; font-size:36px; line-height:1.2; color:#2f2a45 }
.kv .copy .date{ font-weight:800; letter-spacing:.02em; margin-bottom:16px; color:#3f325f }
.kv .copy .rotator{ min-height:28px; color:#4a3d7a; font-weight:700 }

/* Rotator text */
.rotator span{ display:none }
.rotator span.active{ display:inline }

/* Hero info bar */
.event-info{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px; margin-top:16px; padding:12px;
  border:1px solid var(--line); border-radius:14px; background:#fff
}
.event-info__item{ font-size:14px; color:#424a57 }
@media (max-width:980px){
  .kv{ grid-template-columns:1fr }
  .kv .visual{ height:260px }
}
@media (max-width:860px){ .event-info{ grid-template-columns:1fr } }

/* ===== Infobar  ===== */
.infobar{
  background: #f9f7fa;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 10px 0;
}
.infobar .wrap{ padding-top: 8px; padding-bottom: 8px; }
.infobar-list{
  margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 16px 24px;
  list-style: none;
  align-items: center;
  font-size: 15px; line-height: 1.7;
}
.infobar-item{ color:#3f4250; }

.infobar-label{
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  border-radius: 999px;
  padding: 2px 10px !important;
  margin-right: 6px;
  font-size: 13px;
  letter-spacing: 0.5px;
}

/* スマホ最適化 */
@media (max-width: 860px){
  .infobar-list{ gap: 10px 16px; font-size: 14px; }
  .infobar-label{ font-size: 12px; padding: 2px 8px; }
}


/* ===== 3 messages ===== */
.section{ padding:28px 0 }
.section-title{ 
  font-size:22px;
  margin-bottom:16px;
  color:var(--accent-2);
  margin: 6px auto 10px;
  text-align: center;
  background: url(../img/ttl_bg.png);
  background-size: contain;
  height: 150px;
  width: 240px;
  padding-top: 60px; 
}
.kicker{ display:block; text-align:center; color:#6b6b7a; margin-bottom:24px }

.msg-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:18px }
.msg{
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px; position:relative;
  box-shadow:0 8px 24px rgba(18,11,40,.04)
}
.msg::before{
  content:""; position:absolute; inset:0; border-radius:16px;
  background:linear-gradient(135deg, rgba(107,95,182,.08), rgba(47,95,167,.08));
  mix-blend-mode:multiply; opacity:.6; pointer-events:none
}
.msg h3{ position:relative; margin:0 0 6px; font-size:18px; color:#3f325f }
.msg p{ position:relative; margin:0; color:#555; line-height:1.7; font-size:14px }
.msg small{
  display:inline-block; margin-top:8px; padding:4px 10px; border-radius:999px;
  background:#f6f2fd; color:#5c5a7a; font-size:12px
}

/* ===== Highlight red door ===== */
.highlight{
  margin-top:30px; background:#fff; border:1px solid var(--line);
  border-radius:18px; padding:22px; box-shadow:0 8px 24px rgba(18,11,40,.04)
}
.hl-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:22px; align-items:center }
.hl-visual{ position:relative; border-radius:18px; overflow:hidden; min-height:280px }
.hl-visual img{ width:100%; height:100%; object-fit:cover; display:block }

.hl-body h3{ margin:0 0 8px; color:#3f325f }
.hl-body p{ margin:0 0 10px; color:#555; line-height:1.8 }
.hl-meta{ font-size:13px; color:#6b6b7a }
.hash{
  display:inline-block; margin-top:8px; font-size:12px; color:#fff;
  background:var(--accent); border-radius:999px; padding:4px 10px; margin-right:6px
}

/* スマホ最適化 */
@media (max-width: 549px){
.hl-grid{ display:block; grid-template-columns:1.1fr 1fr; gap:22px; align-items:center }
}

/* ===== Sustainability ===== */
.sus{
  margin-top:18px; background:#fff; border:1px solid var(--line); border-radius:18px; padding:22px
}

.sus ul{ margin:0; padding-left:20px; color:#555; line-height:1.9 }

.sus ul{ padding-left:0; margin:16px 0 0 }
.sus li{
  list-style:none; margin:10px 0; padding-left:22px; color:#444;
  position:relative;
}
.sus li::before{
  content:""; position:absolute; left:0; top:.35em; width:14px; height:14px;
  -webkit-mask: url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 13c7 0 9-6 16-6-2 7-9 9-16 6zm6 7c-1-4 2-7 6-8' /></svg>") center/contain no-repeat;
  mask:       url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 13c7 0 9-6 16-6-2 7-9 9-16 6zm6 7c-1-4 2-7 6-8' /></svg>") center/contain no-repeat;
  background:#9a8fd8;
  opacity:.9;
}
.sus.box-soft{ margin-top:32px; }

/* ===== 開催概要 ===== */
.overview{
  margin-top:50px;
  background:#fff;
  border-radius:16px;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  padding:28px 24px;
}

.overview.box-soft{ margin-top:28px; }

.ov-dl{ display:grid; grid-template-columns:1fr 1fr; gap:12px 20px; }
.ov-dl > div{ display:flex; gap:10px; align-items:flex-start; }
.ov-dl dt{
  flex:0 0 auto; min-width:72px;
  background:#efeafd; color:#433a7d; font-weight:800;
  border-radius:999px; padding:4px 12px; font-size:13px;
  text-align: center;
}
.ov-dl dd{ margin:0; color:#3f3f47; }
@media (max-width: 900px){ .ov-dl{ grid-template-columns:1fr; } }

/* 右下リンクを“幽霊ボタン”で上品に */
.btn-ghost{
  display:inline-block; padding:10px 14px; border-radius:999px;
  border:1px solid #dcd6f5; color:#5b52a9; font-weight:700; text-decoration:none;
}
.btn-ghost:hover{ background:#f5f2fc }
.more-link{ text-align:right; margin-top:16px }


footer{ 
  border-top:1px solid var(--line); 
  padding:20px 0; 
  margin-top:40px; 
  font-size:13px; 
  color:#5b6470
}

.hero-effects{
  position:absolute; inset:0;
  z-index:10; pointer-events:none;
}
.hero-inner{ position:relative; z-index:20; padding-top:5%;}

@media (max-width: 1024px){
  .hero-inner{ padding-top:15%;}
}
@media (max-width: 768px){
  .hero-inner{ padding-top:30%;}
}

.petal{
  --x: 50%;     
  --size: 32px; 
  --delay: 0s;  
  --dur: 20s;   
  --rot: 0deg;  
  --h: 330;     

  position:absolute;
  left: var(--x);
  top: -40px;
  width: var(--size);
  height: calc(var(--size) * 1.25); 
  transform: rotate(var(--rot));
  opacity:.9;

  background:
    radial-gradient(closest-side at 50% 30%,
      rgba(255,255,255,.95),
      rgba(255,255,255,.60) 65%,
      rgba(255,255,255,0)   68%),
    radial-gradient(80% 65% at 50% 75%,
      hsl(var(--h) 70% 92% / .55),
      transparent 60%);

  clip-path: polygon(
    50% 0%,   66% 6%,  82% 20%, 90% 38%,
    88% 58%, 77% 78%, 60% 92%, 50% 100%,
    40% 92%, 23% 78%, 12% 58%, 10% 38%,
    18% 20%, 34% 6%
  );


  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.55),
    0 6px 10px rgba(0,0,0,.08);

  animation:
    petal-float-y var(--dur) linear infinite var(--delay),
    petal-sway-x  6s         ease-in-out infinite alternate var(--delay);
}

@keyframes petal-float-y{
  0%   { top:-40px;  opacity:0 }
  8%   {             opacity:.9 }
  92%  {             opacity:.9 }
  100% { top:110%;   opacity:0 }
}

@keyframes petal-sway-x{
  from { transform: translateX(-8px) rotate(calc(var(--rot) - 6deg)); }
  to   { transform: translateX( 8px) rotate(calc(var(--rot) + 6deg)); }
}

.petal--sharp{
  height: calc(var(--size) * 1.32); /* 縦長でシャープ感UP */
  clip-path: polygon(
    50% 0%,
    64% 5%,  78% 15%, 88% 30%, 92% 46%,
    86% 68%, 68% 88%, 50% 100%,
    32% 88%, 14% 68%, 8% 46%,
    12% 30%, 22% 15%, 36% 5%
  );
  background:
    radial-gradient(closest-side at 50% 25%,
      rgba(255,255,255,.96),
      rgba(255,255,255,.60) 62%,
      rgba(255,255,255,0)   66%),
    radial-gradient(80% 65% at 50% 78%,
      hsl(var(--h) 70% 92% / .55),
      transparent 60%);
}


.petal--very{
  height: calc(var(--size) * 1.38);
  clip-path: polygon(
    50% 0%,
    60% 4%,  74% 12%, 86% 26%, 92% 44%,
    86% 70%, 66% 90%, 50% 100%,
    34% 90%, 14% 70%, 8% 44%,
    14% 26%, 26% 12%, 40% 4%
  );
  background:
    radial-gradient(closest-side at 50% 22%,
      rgba(255,255,255,.97),
      rgba(255,255,255,.58) 60%,
      rgba(255,255,255,0)   64%),
    radial-gradient(78% 60% at 50% 80%,
      hsl(var(--h) 68% 92% / .52),
      transparent 58%);

      --shine: linear-gradient(180deg, rgba(255,255,255,.25), transparent 40%) ;
  background-image: var(--shine), radial-gradient(closest-side at 50% 22%, rgba(255,255,255,.97), rgba(255,255,255,.58) 60%, rgba(255,255,255,0) 64%), radial-gradient(78% 60% at 50% 80%, hsl(var(--h) 68% 92% / .52), transparent 58%);
  background-repeat: no-repeat;
  background-size: 18% 70%, 100% 100%, 100% 100%;
  background-position: 52% 8%, center, center;
}


.lang-switch{ display:none; }

@media (max-width: 860px){
  .lang-desktop{ display:none !important; }

  .lang-switch{
    display:block; position:fixed; right:14px; bottom:14px; z-index:9999;
  }
  .lang-btn{
    display:flex; align-items:center; gap:.5em;
    background:#fff; color:#333; border:1px solid #e3def5;
    border-radius:999px; padding:10px 14px; font-weight:700;
    box-shadow:0 10px 24px rgba(18,11,40,.12);
  }
  .lang-current{ font-size:12px; color:#5b52a9; }

  .lang-menu{
    position:absolute; right:0; bottom:calc(100% + 8px);
    background:#fff; border:1px solid #e3def5; border-radius:12px;
    box-shadow:0 16px 36px rgba(18,11,40,.18);
    padding:6px; list-style:none; margin:0; min-width:160px; display:none;
  }
  .lang-menu a{
    display:block; padding:10px 12px; border-radius:8px; text-decoration:none; color:#333;
  }
  .lang-menu a:hover{ background:#f5f2fc; color:#3f325f; }

  /* 開いた状態 */
  .lang-switch.is-open .lang-menu{ display:block; }
}


.lead{color:#555;line-height:1.9;margin:8px 0 12px}

.tl {
  list-style: none;
  padding: 0;
  margin: 16px 0;
}

.tl li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin: 12px 0;
}

.tl time {
  flex: 0 0 100px;
  text-align: center;
  background: #f2edfd;
  color: #4b3d82;
  font-weight: 700;
  border-radius: 10px;
  padding: 5px 8px;
  box-shadow: inset 0 0 0 1px #e0daf8;
}

.tl div {
  flex: 1;
  color: #3f3f47;
  line-height: 1.7;
}

.tl strong {
  color: #3f2f6d;
}

.note{background:#fff8f8;border:1px solid #f2d7da;color:#5b2a2a;border-radius:12px;padding:12px 14px;font-size:14px}

/* CTA row */
.btn--primary{background:var(--accent-2);color:#fff}
.btn--ghost{background:#fff;border:1px solid #dcd6f5;color:#5b52a9}
.btn--accent{background:var(--accent);color:#fff}

/* 地図 */
.map{border:0;border-radius:12px;inline-size:100%;block-size:320px}

/* ===== Page hero (小さめ) ===== */
/* 2カラム化（PC） */
.p-hero-wrap{ padding-top:28px; padding-bottom:22px; }
.p-hero-grid{
  display:grid;
  grid-template-columns: 1.15fr 0.85fr; /* 左広め・右やや細め */
  gap:24px;
  align-items:center;
}

/* 右側の写真カード */
.p-hero-media{
  position: relative;
  margin:0;
  background:#fff;
  border-radius:16px;
  border:1px solid #ebe7f7;
  box-shadow:0 10px 26px rgba(107, 95, 182, 0.15)
  overflow:hidden;
}

.p-hero-media::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.6) 0%,   /* 上をしっかり白っぽく */
    rgba(255, 255, 255, 0.3) 40%,  /* 中間でやや透明 */
    rgba(255, 255, 255, 0.15) 100% /* 下に向かって自然に */
  );
  pointer-events: none;
}


.p-hero-media img{
  display:block; width:100%; height:100%;
  aspect-ratio: 5 / 4;          /* お好みで 4/3 や 1/1 に */
  object-fit:cover;
}
.p-hero-media figcaption{
  font-size:12px; color:#6a6790; padding:8px 10px;
  background:linear-gradient(180deg, #fff, #f7f5fc);
}

/* 左の内容（見出しやナビの間隔を少し詰める） */
.p-hero-main .p-title{ 
  margin:0 0 4px;
  padding: 50px 60px;
}
.p-hero-main .p-title2{ 
  margin:0 0 4px;
  padding: 50px 40px;
}

.p-hero-main .p-title3{ 
  margin:0 0 4px;
}

.p-hero-main .p-title4{ 
  margin:0 0 4px;
}

.p-hero-main .p-sub{ margin:4px 0 10px; color:#6a6790; }
.p-hero-main .lnb{ margin-top:10px; }

.p-hero-media{
  border-radius:16px; overflow:hidden;
  border:1px solid #ece8f6; box-shadow:0 12px 28px rgba(18,11,40,.08);
}
.p-hero-media img{ aspect-ratio: 4/3; object-fit:cover; }

/* モバイル：縦積み（写真は下に） */
@media (max-width: 900px){
  .p-hero-grid{ grid-template-columns: 1fr; gap:14px; }
  .p-hero-media{ 
    order:2; 
  }
  .p-hero-main{ 
    order:1;
  }
  .p-hero-media img{ aspect-ratio: 4 / 2.5; } /* 少し横長に */
}

.breadcrumbs{
  font-size:13px;
  color:#6a6790;
  margin-bottom:10px;
  padding-top:20px;
  font-weight: 400;
  margin-bottom:12px;
}
.breadcrumbs a{color:#6a6790}
.p-title, .p-title2, .p-title3{
  margin: 0;
  color: var(--accent-2);
  font-size: clamp(22px, 4.2vw, 32px);
  letter-spacing: .02em;
  background: url(../img/page_ttl.png);
  background-size: contain;
  width: 260px;
  height: 120px;
  background-repeat: no-repeat;
  background-position-y: bottom;
  background-repeat: no-repeat;
  margin-bottom: 30px !important;  
}

.p-title4{
  margin: 0;
  color: var(--accent-2);
  font-size: clamp(22px, 4.2vw, 32px);
  letter-spacing: .02em;
  background: url(../img/page_ttl.png);
  background-size: contain;
  width: 320px;
  height: 120px;
  background-repeat: no-repeat;
  background-position-y: bottom;
  background-repeat: no-repeat;
  margin-bottom: 30px !important;  
}

.p-sub{
  margin:6px 0 0;color:#6a6790
}

/* ===== Local nav ===== */
.lnb{margin:16px 0 6px}
.lnb ul{display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:0;list-style:none}
.lnb a{display:inline-block;padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:#fff;font-weight:700}
.lnb a:hover{background:#f3effc}

@media (min-width: 961px){
  .lnb{ position: sticky; top:72px; z-index:5; }
}

#about, #info, #schedule, #access, #notes, #hakusanshita,
#hanachozu, #map, #booths, #kitchen, #kids, #lottery, #vehicles, #concert,
#paypay_eats, #paypay_service, #paypay_merchandise, #paypay_shop
{ scroll-margin-top: 96px; }

.note{
  background:#fff7f8; border:1px solid #f1d8dd;
  color:#5b2a2a; border-radius:12px; padding:12px 14px; line-height:1.8;
}

/* おトク情報 */
.deals { margin-bottom:60px }
.deals-grid{
  display:grid; gap:18px;
}
@media (max-width: 980px){ .deals-grid{ grid-template-columns:1fr; } }

.promo-card{
  display:grid; grid-template-columns: .9fr 1.1fr; gap:18px;
  align-items:center;padding:16px;
}
@media (max-width: 720px){ .promo-card{ grid-template-columns:1fr; } }

.promo-media{
  padding:30px;
  text-align: center;
}
.promo-media img{
  width:100%; object-fit:cover;
  border-radius:12px; box-shadow:0 4px 16px rgba(0,0,0,.08);
}

.promo-media2{
  text-align: center;
}
.promo-media2 img{
  width:70%; object-fit:cover;
  border-radius:12px;
  padding-top:30px;
}

/* 本文 */
.promo-body h3{ margin:0 0 6px; font-size:18px; color:#3f325f }
.promo-body p{ margin:6px 0; color:#3f3f47; line-height:1.8 }
.note-xxs{ font-size:12px; color:#6a6790 }

/* 小タイムライン */
.mini-tl{ list-style:none; margin:6px 0; padding:0 }
.mini-tl li{ display:block; margin:6px 0 }
.time{
  flex:0 0 92px; text-align:center; background:#efeafd; color:#4a3d7a;
  font-weight:800; padding:3px 6px; border-radius:8px; box-shadow:inset 0 0 0 1px #e3def5;
  padding: 10px;
  font-size: larger;
}

/* ボタン */
.btn{ display:inline-block; padding:10px 14px; border-radius:999px; font-weight:700; text-decoration:none }
.btn--ghost{ border:1px solid #dcd6f5; color:#5b52a9; background:#fff }
.btn--ghost:hover{ background:#f5f2fc }
.btn--paypay{ background:#e60012; color:#fff }
.btn--paypay:hover{ background:#c00010 }

/* PayPayカードだけ赤のアクセントを強調 */
.accent-red{ color:#e60012 }
.promo-paypay{ --edge: rgba(230,0,18,.07); position:relative; overflow:hidden }
.promo-paypay::before{
  content:""; position:absolute; inset:-20% -10% auto -10%; height:56%;
  background: radial-gradient(420px 150px at 20% 0%, var(--edge), transparent 60%);
  pointer-events:none;
}


/* ========== Program 2カラム 基本 ========== */
.program-layout{
  display: grid;
  grid-template-columns: 1fr; /* モバイルは1カラム */
  gap: 24px;
  padding-top: 8px;           /* ← margin-collapse対策（重要） */
}

/* モバイル：マップは先頭に来る */
.program-layout .map-col { order: -1; }

/* PC：2カラム化し、左=データ / 右=マップ を固定 */
@media (min-width: 960px){
  .program-layout{
    grid-template-columns: 1fr minmax(320px, 440px);
    align-items: start;
  }
  .program-layout .program-main { grid-column: 1; }
  .program-layout .map-col     { grid-column: 2; order: 0; } /* order解除 */

  /* 右カラムのマップを追従スクロールに */
  .program-layout .map-col{
    position: sticky;
    top: 96px;                        /* ヘッダーの高さに合わせて調整 */
    max-height: calc(100vh - 120px);
    overflow: auto;
    padding-right: 2px;               /* スクロールバー余白 */
  }
}

/* 箱と見出しの先頭余白をゼロに（左右で高さを揃える） */
.program-layout .program-main > .p-section:first-child { margin-top: 0; }
.program-layout .map-col .section-title { margin-top: 0; }

.section-title2{ 
    padding-top: 45px !important; 
}

/* マップの見た目（既存トンマナに合わせて） */
.program-layout .map-fig{
  background:#fff; border:1px solid #eee; border-radius:12px; padding:10px; margin:0;
}
.program-layout .map-fig img{ width:100%; height:auto; border-radius:8px; }

/* ========== Program: booth list polish ========== */
.list { margin: 10px 0 0; border: 0; }

/* 1アイテムをカード風に（陰影は弱め） */
.list--booth .booth-item{
  display:grid;
  grid-template-columns: 40px 1fr auto;
  gap:12px;
  align-items:center;
  padding:10px 12px;
  border-radius:12px;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  margin-bottom:8px;
}

.list--booth .booth-item2{
  grid-template-columns: 100px 1fr auto;
}

/* 番号の丸バッジ */
.list--booth .booth-no{
  width:44px;height:44px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;
  background: #f1eef7;              /* 概要の紫トーンに寄せる */
  color:#5b4f81;
}

/* 本文 */
#boothList li a{
  color:var(--theme-ink);
} 
.list--booth .booth-main{
  min-width:0;
}
.list--booth .booth-title{
  font-weight:700;
  font-size:1.05rem;
  line-height:1.3;
}
.list--booth .booth-meta{
  display:flex; gap:8px; flex-wrap:wrap;
  margin-top:4px;
}

/* 右端のステータス（調整中など） */
.list--booth .booth-status{
  justify-self:end;
  font-size:.85rem;
  padding:.25em .6em; border-radius:999px;
  background:#fff3cd; color:#8a6d3b; border:1px solid #f7e1a7;
}
.list--booth .booth-status.is-cancel{
  background:#fde2e1; color:#8a3b3b; border:1px solid #f7b4b1;
}

/* 汎用バッジ（カテゴリなど） */
.badge{
  display:inline-flex; font-size:.82rem;
  padding:.2em .6em; border-radius:999px;
  background:var(--theme);
  color:#ffffff; font-weight:800; padding:10px 16px; border-radius:14px;
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px)
}

/* 行内の補足ノート（“昨年実績”など） */
.inline-note{
  font-size:.85rem; color:#6b6b6b;
  padding:.25em .6em; border-radius:8px;
  background:#faf7ff; border:1px solid #efe8ff;
}

.inline-note2{
  font-size:.85rem; color:#6b6b6b;
  padding:.25em .6em; 
}

/* セクション下の注意枠（既存 .note を強化） */
.box-soft .note{
  background:#fff7f7; border:1px solid #f1d9d9;
  padding:10px 12px; border-radius:10px;
}

/* レスポンシブ：モバイルは3列レイアウト→2列に圧縮 */
@media (max-width: 480px){
  .list--booth .booth-item{ grid-template-columns: 74px 1fr; }
  .list--booth .booth-item_s{ grid-template-columns: 44px 1fr; }
  .list--booth .booth-status{ grid-column: 1 / -1; justify-self:start; margin-top:4px; }
  .list--booth .booth-no{ width:34px; height:34px; font-size:.95rem; }
}

.list--booth .booth-title .vendor{ color:#666; font-weight:600; }
.list--booth .booth-title a{ text-decoration: underline; text-underline-offset: 2px; }

.list--hana .hana-no{
  width:44px;height:44px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  background:var(--theme-bg);color:var(--theme-ink);
  border:1px solid color-mix(in oklab, var(--theme) 35%, transparent);
  font-weight:700;
}

.list--hana .hana-title{ font-weight:700; font-size:1.05rem; line-height:1.3; }
.list--hana .hana-meta{ display:flex; gap:8px; flex-wrap:wrap; margin-top:4px; }

.list--hana .hana-status{
  justify-self:end;
  font-size:.85rem; padding:.25em .6em; border-radius:999px;
  background:#fde2e1; color:#8a3b3b; border:1px solid #f7b4b1;
}
.list--hana .hana-thumb img{
  width:84px; height:64px; object-fit:cover; border-radius:10px;
  border:1px solid #eee; display:block;
}
@media (max-width:540px){
  .list--hana .hana-item{ grid-template-columns: 44px 1fr; }
  .list--hana .hana-thumb{ grid-column:1 / -1; justify-self:start; }
  .list--hana .hana-status{ grid-column:1 / -1; justify-self:start; margin-top:4px; }
}

/* ベンダ表記とリンク */
.list--hana .vendor{ color:#6b6b6b; font-weight:600; }
.list--hana a{ color:var(--theme-ink); text-decoration:underline; text-underline-offset:2px; }



/* カード風ボックスの縁取りを淡くテーマ化（控えめ） */
.box-soft{
  border:1px solid color-mix(in oklab, var(--theme) 15%, transparent);
}

/* ブース番号の丸バッジ（renderBooths で使っている .booth-no） */
.list--booth .booth-no{
  background: var(--theme-bg);
  color: var(--theme-ink);
  border:1px solid color-mix(in oklab, var(--theme) 35%, transparent);
}

/* 汎用バッジ（カテゴリなど）は中立のまま。必要なら下の1行を有効化 */
/* .badge{ border-color: color-mix(in oklab, var(--theme) 20%, #e7e7ee); } */
/* セクション内の注意枠（.note）をやさしくテーマ寄せ */
.p-section .note{
  border:1px solid color-mix(in oklab, var(--theme) 22%, #f1d9d9);
  background: color-mix(in oklab, var(--theme-bg) 70%, #fff);
}

/* ==============================
   各セクションテーマカラー設定
   ============================== */

/* 汎用デフォルト */
.p-section{
  --theme: #9b87bd;         
  --theme-ink: #4b4161;
  --theme-bg: #f6f2ff;
}

/* ブース・店舗出店 */
.theme-booths{
  --theme: #f4aa51;
  --theme-ink:#ef8126;
  --theme-bg:#fbdebd;
}

/* キッチンカー */
.theme-kitchen{
  --theme: #93b75a;          /* amber-500 */
  --theme-ink:#8ec63f;
  --theme-bg:#d5e7ba;  
}

/* こども広場  */
.theme-kids{
  --theme: #32a6d7;
  --theme-ink:#5ec2dd;
  --theme-bg:#d0eaec;
}

/* お楽しみ抽選会 */
.theme-lottery{
  --theme: #ae7bb7;
  --theme-ink:#a64298;
  --theme-bg:#d7d2e7;
}

/* のりもの大集合  */
.theme-vehicles{
  --theme: #759ef9;
  --theme-ink:#567efc;
  --theme-bg:#c3dff3;
}

/* 街角コンサート → 紫 */
.theme-concert{
  --theme: #e593c2;
  --theme-ink:#e54198;
  --theme-bg:#f4d6df;
}
#concertList .no{
  min-width:76px !important;
}

/* 花手水のテーマカラー */
.theme-hanachozu{
  --theme:    #efd35e;  
  --theme-ink:#fcbb03;
  --theme-bg: #fdf7c3;
}
/* ==============================
   各テーマ適用先（共通スタイル）
   ============================== */
.section-title::after{
  content:"";
  display:block;
  width:64px; height:4px;
  margin-top:8px; border-radius:999px;
  background: var(--theme);
  opacity:.35;
}

#schedule .section-title::after{
  background: none;
}

/* 枠線・背景（カードや箱） */
.box-soft{
  border:1px solid color-mix(in oklab, var(--theme) 15%, transparent);
  background: #fff;
}

/* 番号バッジ（.booth-no, .noなど） */
.list { margin:10px 0 0; border:0; padding:0 !important}
.list li{ display:flex; gap:12px; align-items:flex-start; padding:8px 4px; border-bottom:0; }
.list--booth .booth-no,
.list li .no{
  background: var(--theme-bg);
  color: var(--theme-ink);
  border:1px solid color-mix(in oklab, var(--theme) 35%, transparent);
  border-radius:999px;
}

/* セクション内の注意枠 */
.p-section .note{
  border:1px solid color-mix(in oklab, var(--theme) 22%, #f1d9d9);
  background: color-mix(in oklab, var(--theme-bg) 70%, #fff);
}

/* ドットリスト調整（こども広場など） */
.list li .no::before{
  content:"";
  display:inline-block;
  width:.6em; height:.6em; margin-right:.25em;
  border-radius:999px;
  background: var(--theme);
  vertical-align:middle;
}
#vehicleList.list li .no::before{
  content:"";
  display:inline-block;
  width:0; height:0; margin-right:0;
  border-radius:999px;
  background: var(--theme);
  vertical-align:middle;
}

/* レスポンシブ調整 */
@media (max-width:480px){
  .list--booth .booth-no{
    width:44px; height:44px; font-size:.95rem;
  }
}

/* ========== kids: ドット箇条書き ========== */
.list--dot .no{
  width:44px; height:44px; flex:0 0 44px;
  position:relative; text-indent:-9999px; /* テキストは隠す（JSで•を出してもOK） */
}
.list--dot .no::before{
  content:""; position:relative; top:.45em; left:.2em;
  display:inline-block; width:.5em; height:.5em; border-radius:999px; background:var(--theme);
}
.message{
  color:var(--theme);
  font-weight: 800;
}

/* ========== kv: ラベル付き説明（抽選会） ========== */
.list--kv .no{
  flex:0 0 auto; align-self:flex-start;
  font-size:.85rem; padding:.2em .6em; border-radius:999px;
  background: var(--theme-bg);
  color: var(--theme-ink);
  border:1px solid color-mix(in oklab, var(--theme) 35%, transparent);
}
.list--kv li{ padding:6px 0; }

/* ========== num: 番号バッジ（のりもの） ========== */
.list--num .no{
  width:44px; height:44px; flex:0 0 34px;
  display:flex; align-items:center; justify-content:center;
  border-radius:999px;
  background: var(--theme-bg);
  color: var(--theme-ink);
  border:1px solid color-mix(in oklab, var(--theme) 35%, transparent);
  font-weight:700;
}

/* ========== time: 時刻バッジ（コンサート） ========== */
.list--time .no{
  min-width:60px; padding:.25em .6em; text-align:center; border-radius:999px;
  background: var(--theme-bg);
  color: var(--theme-ink);
  border:1px solid color-mix(in oklab, var(--theme) 35%, transparent);
  font-weight:700;
}

/* 各セクションの注意枠はテーマ色に寄せる（そのまま） */
.p-section .note{
  border:1px solid color-mix(in oklab, var(--theme) 22%, #f1d9d9);
  background: color-mix(in oklab, var(--theme-bg) 70%, #fff);
}

/* 「調整中」バッジは全セクションで非表示（中止だけ許可） */
.badge[data-status="tentative"],
.booth-status:not(.is-cancel){ display:none !important; }

/* 抽選会：賞のカード（お楽しみ抽選会は theme-lottery の赤トーンが効く） */
.list--prize .prize-item{
  display:grid;
  grid-template-columns: 120px 1fr;
  gap:12px;
  align-items:start;
  padding:10px 12px;
  border-radius:12px;
  background:#fff;
  border:1px solid color-mix(in oklab, var(--theme) 20%, #eee);
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  margin-top:10px;
}
.list--prize .prize-tier{
  justify-self:start;
  font-weight:800;
  color: var(--theme-ink);
  background: var(--theme-bg);
  border:1px solid color-mix(in oklab, var(--theme) 40%, transparent);
  padding:.35em .8em;
  border-radius:999px;
  text-align:center;
}
.list--prize .prize-line{
  display:flex; gap:8px; align-items:baseline; margin:2px 0;
}
.list--prize .label{
  font-size:.85rem;
  padding:.1em .55em; border-radius:999px;
  background: var(--theme-bg);
  color: var(--theme-ink);
  border:1px solid color-mix(in oklab, var(--theme) 35%, transparent);
  width: 60px;
  text-align: center;
}
.list--prize .providers{ font-weight:600; }
.list--prize .providers a{
  color: var(--theme-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.list--prize .providers a:hover{ text-decoration-thickness: 2px; }
.list--prize .prize-name{
  font-weight:600;
  padding:.15em .5em; border-radius:8px;
  background: color-mix(in oklab, var(--theme-bg) 75%, #fff);
  border:1px dashed color-mix(in oklab, var(--theme) 35%, transparent);
}

.list--prize .prize-item.is-empty{
  opacity:.65;
}
.list--prize .prize-item.is-empty .prize-name{
  background:#fafafa; border-color:#e6e6e6; color:#777;
}

.list--prize .prize-item.is-consolation .prize-tier{
  background: color-mix(in oklab, var(--theme-bg) 60%, #fff);
}
@media (max-width: 520px){
  .list--prize .prize-item{
    grid-template-columns: 1fr;
  }
  .list--prize .prize-tier{ justify-self:stretch; text-align:center; }
}

.list--prize a {
  color: var(--theme-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.list--prize a:hover {
  text-decoration-thickness: 2px;
}
.legend {
  margin-top: 16px;
  background: #f9f6ff;
  border-radius: 12px;
  padding: 10px 16px;
  text-align: center;
  font-size: 14px;
  color: #5b528a;
}
.legend ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.legend li{
  border-radius: 10px;
  color:#fff;
  padding:10px;
  width:170px;
}

.legend li::before {
  content: "";
}

.legend .legend_1{
  color: #e54198;
  font-weight: 700;
  background-color: #f4d6df;
}
.legend .legend_2{
  color:#32a6d7;
  font-weight: 700;
  background-color: #d0eaec;
  
}
.legend .legend_3{
  color:#8ec63f;
  font-weight: 700;
  background-color: #d5e7ba;
}
.legend .legend_4{
  color: #a64298;
  font-weight: 700;
  background-color: #d7d2e7;
}
.legend .legend_5{
  color:#ef8126;
  font-weight: 700;
  background-color: #fbdebd;
}
.legend .legend_6{
  color:#fcbb03;
  font-weight: 700;
  background-color:#fdf7c3;
}
.legend .legend_7{
  color:#567efc;
  font-weight: 700;  
  background-color:#c3dff3;
}

.legend-title { 　 font-size: 14px; 　 color: #5a4e8b; 　 font-weight: 600; 　 text-align: center; 　 margin-bottom: 8px; 　 letter-spacing: .05em; 　} 

.kids-item {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .06);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    margin-bottom: 8px;
}

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

.paypay-list{
  padding:20px;
}

.col_4{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
  color: #FFF; /* 文字の色 */
  text-align: center; /* 内容は中央配置 */
}
.col_4 > div{
	width: 25%;
	padding: 10px;
}
@media screen and (max-width: 1090px) {
	.col_4 > div{
		width: 33.33333%;
	}
}
@media screen and (max-width: 480px) {
	.col_4 > div{
		width: 50%;
	}
}


#baner_img{
  text-align: center;
}

#baner_img img{
  width:100%;
  max-width: 728px;
}