@charset "UTF-8";
/* CSS Document */

    /* ===============================
       Scoped CSS: #event_page 内のみ
       =============================== */
    #event_page{
      --bg:#ffffff;
      --text:#111827;
      --muted:#6b7280;
      --line:#e5e7eb;
      --card:#f9fafb;

      /* 指定色 */
      --cta:#F67600;
      --ext:#9ca3af;   /* 外部リンクボタン背景(グレー) */
      --extText:#fff;  /* 外部リンクボタン文字(白) */

      --radius:16px;
      --shadow: 0 10px 30px rgba(0,0,0,.08);
      --shadow2: 0 6px 18px rgba(0,0,0,.10);
      --max: 1040px;

      color:var(--text);
      background:var(--bg);
      line-height:1.8;
      font-family: ui-sans-serif, system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
    }
	  #event_page header{
	  height:auto!important;
	  }
    #event_page *{box-sizing:border-box}
    #event_page a{color:inherit}

    #event_page .container{
      width:min(100%, var(--max));
      margin:0 auto;
      padding:0;
    }

    /* ===== Hero ===== */
    #event_page .hero{
      position:relative;
      overflow:hidden;
      border-bottom:1px solid var(--line);
      background:linear-gradient(180deg, #fff, #fff 60%, #f8fafc);
    }
    #event_page .hero-inner{padding:26px 0 18px}

    #event_page .breadcrumb{
      font-size:12px;
      color:var(--muted);
      display:flex;
      gap:8px;
      flex-wrap:wrap;
      margin:0 0 10px;
      padding:0;
      list-style:none;
    }
    #event_page .breadcrumb a{
      text-decoration:none;
      border-bottom:1px solid transparent;
    }
    #event_page .breadcrumb a:hover{border-bottom-color:var(--muted)}

    #event_page .hero-grid{
      display:grid;
      grid-template-columns: 1.2fr .8fr;
      gap:18px;
      align-items:start;
    }
    @media (max-width: 900px){
      #event_page .hero-grid{grid-template-columns:1fr}
    }
#event_page .eyebrow{
      display:none;
   }	
/**
    #event_page .eyebrow{
      display:flex;
      gap:10px;
      align-items:center;
      flex-wrap:wrap;
      margin:0 0 8px;
    }
**/	  
    #event_page .date-pill{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:6px 10px;
      border-radius:999px;
      background:#111827;
      color:#fff;
      font-size:12px;
      letter-spacing:.02em;
    }
    #event_page .tag{
      display:inline-flex;
      align-items:center;
      padding:6px 10px;
      border-radius:999px;
      background:#eef2ff;
      color:#3730a3;
      font-size:12px;
      font-weight:600;
    }

    #event_page h1{
      font-size: clamp(22px, 2.6vw, 34px);
      line-height:1.35;
      margin:0 0 10px;
      letter-spacing:.01em;
    }
    #event_page .lead{
      margin:0;
      color:var(--muted);
      font-size:15px;
    }

    #event_page .hero-media{
      overflow:hidden;
      box-shadow:var(--shadow);
      display:flex;
      align-items:center;
      justify-content:center;
      position:relative;
    }
    #event_page .hero-media img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }
    #event_page .hero-media .placeholder{
      position:absolute;
      inset:0;
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight:700;
      letter-spacing:.04em;
    }

    /* ===== Buttons ===== */
    #event_page .btn-row{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      margin-top:14px;
    }
    #event_page .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      padding:12px 16px;
      border-radius:14px;
      text-decoration:none;
      font-weight:800;
      letter-spacing:.02em;
      border:1px solid transparent;
      box-shadow: var(--shadow2);
      transition: transform .06s ease, box-shadow .12s ease, opacity .12s ease;
      user-select:none;
      white-space:nowrap;
    }
    #event_page .btn:active{transform: translateY(1px)}
    #event_page .btn:hover{opacity:.95}

    /* 申込みボタン：指定色 */
    #event_page .btn-cta{
      background:var(--cta);
      color:#fff;
	  width: 100%;
    }

    /* 外部リンクボタン：背景グレー・文字白 */
    #event_page .btn-ext{
      background:var(--ext);
      color:var(--extText);
    }

    #event_page .btn-ghost{
      background:#fff;
      border-color:var(--line);
      color:var(--text);
      box-shadow:none;
    }

    /*  申込みボタン幅を大きく（PCはフィット、SPは全幅） */
    #event_page .btn-cta.is-wide{
      padding:14px 22px;
     font-size: 1.0rem;
    }
    @media (max-width: 520px){
      #event_page .btn-cta.is-wide{
        width:100%;
        min-width: 0;
      }
    }
    /* 右カラムなど「確実に全幅」にしたい時用 */
    #event_page .btn-full{
      width:100%;
    }

    /* ===== Content layout ===== */
    #event_page .main{ padding-top:10px!important;}
    #event_page .layout{
      display:grid;
      grid-template-columns: 1fr 340px;
      gap:20px;
      align-items:start;
    }
    @media (max-width: 980px){
      #event_page .layout{grid-template-columns:1fr}
    }

    #event_page .card{
      background:#fff;
      border:1px solid var(--line);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      overflow:hidden;
    }
    #event_page .card-body{padding:16px}

    /* ===== Event info (right) ===== */
    #event_page .info{
      position:sticky;
      top:14px;
    }
    @media (max-width: 980px){
      #event_page .info{position:static}
    }

    #event_page .info-title{
      margin:0 0 8px;
      font-size:16px;
      font-weight:900;
      letter-spacing:.02em;
    }

    #event_page .dl{
      display:grid;
      grid-template-columns: 92px 1fr;
      gap:10px 12px;
      margin:0;
    }
    #event_page .dl dt{
      color:var(--muted);
      font-weight:700;
      font-size:13px;
    }
    #event_page .dl dd{
      margin:0;
      font-weight:700;
      font-size:13px;
      color:#111827;
    }

    #event_page .divider{
      height:1px;
      background:var(--line);
      margin:14px 0;
    }

    /* ===== Article content ===== */
    #event_page .content h2{
      font-size:20px;
      margin:0 0 8px;
      letter-spacing:.02em;
    }
    #event_page .content h3{
      font-size:16px;
      margin:18px 0 6px;
      letter-spacing:.02em;
    }
    #event_page .content p{margin:0 0 12px}
    #event_page .content ul{
      margin:0 0 12px;
      padding-left: 1.2em;
    }
    #event_page .content li{margin:.2em 0}
    #event_page .note{
      background:var(--card);
      border:1px solid var(--line);
      padding:12px 14px;
      border-radius:14px;
      margin:14px 0;
    }
    #event_page .small{
      font-size:12px;
      color:var(--muted);
      margin:10px 0 0;
    }

    /* =====  Section image (途中セクション用) ===== */
    #event_page .section-image{
      margin:36px 0;  
      overflow:hidden;
      display:flex;
      align-items:center;
      justify-content:center;
      position:relative;
    }
    #event_page .section-image img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }
    #event_page .section-image .placeholder{
      position:absolute;
      inset:0;
      display:flex;
      align-items:center;
      justify-content:center;
      color:#374151;
      font-weight:800;
      letter-spacing:.06em;
    }

    /* ===== Mobile floating CTA ===== */
    #event_page .floating-cta{
      position:fixed;
      left:0; right:0; bottom:0;
      background:rgba(255,255,255,.9);
      backdrop-filter: blur(10px);
      border-top:1px solid var(--line);
      padding:10px 12px;
      display:none;
      z-index:50;
    }
    #event_page .floating-cta .container{
      display:flex;
      gap:10px;
      align-items:center;
      justify-content:space-between;
    }
    #event_page .floating-cta .btn{
      width:100%;
      box-shadow:var(--shadow2);
    }
    @media (max-width: 980px){
      #event_page .floating-cta{display:block}
    }
/* =========================
   SPで MAIN IMAGE と本文カードの幅を揃える
   ＋ MAIN IMAGEのシャドウを消す
   ========================= */

/* MAIN IMAGE：シャドウ不要 */
#event_page .hero-media{
  box-shadow: none !important;
}

/* スマホ時：MAIN IMAGE を本文カードと同じ見た目・幅に寄せる */
@media (max-width: 980px){
  /* 本文カード（イベント概要）側の幅基準 */
  #event_page #event_page_detail{
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0 !important;	  
  }

  /* MAIN IMAGE を本文カードと同じ幅・中央寄せ */
  #event_page .hero-media{
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  /* HEROエリア全体の左右余白がズレる場合の保険 */
  #event_page .hero-inner .hero-grid{
    gap: 14px;
  }
}
/* ===== MAIN IMAGE：画像を100%表示にする（placeholderにimgが入っている前提） ===== */
#event_page .hero-media .placeholder{
  position: static !important;   /* absoluteを解除 */
  inset: auto !important;
  display: block !important;     /* flex中央寄せを解除 */
  width: 100%;
  height: 100%;
}

#event_page .hero-media .placeholder img{
  display: block;
  width: 100% !important;
  height: 100% !important;       /* hero-mediaの枠に合わせる */
  object-fit: contain;             /* はみ出しはトリミングして全面表示 */
}
/* ===== PCでは画像を切らずに全体表示 ===== */
@media (min-width: 981px){
  #event_page .hero-media{ aspect-ratio:auto !important; height:auto !important; }
  #event_page .hero-media .placeholder img{
    width:100% !important;
    height:auto !important;
    object-fit:contain !important;
  }
}
 .base-detail-wrapper .section1 .content {
    margin-top: 0px!important;
}
	 
@media (min-width: 751px){
  /* ---- 既存：幅100%（そのまま） ---- */
  #event_page .tomio-form-embed,
  #event_page .tomio-form-embed ._form-elements,
  #event_page .tomio-form-embed .p-embed,
 #event_page .c-form,
#event_page.u-m-width-sm{
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }


  #event_page .tomio-form-embed{
    overflow: visible !important;
  }


#event_page .tomio-form-embed .p-embed table{
  display: block;
  width: max-content;
  max-width: none;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

  /* ---- 前の週 / 次の週 を横並び（候補を広めに） ---- */
  #event_page .tomio-form-embed .p-embed .week-nav,
  #event_page .tomio-form-embed .p-embed .calendar-nav,
  #event_page .tomio-form-embed .p-embed .nav,
  #event_page .tomio-form-embed .p-embed .controls,
  #event_page .tomio-form-embed .p-embed .btns{
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
  }

  /* ボタン自体がブロックで落ちるのを防ぐ */
  #event_page .tomio-form-embed .p-embed a,
  #event_page .tomio-form-embed .p-embed button{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
  }
  /* 前の週 / 次の週：横並び固定 */
  #event_page .tomio-form-embed .week-button-container{
    display: flex !important;
    gap: 12px !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
  }

  /* ボタンの幅・折返し防止 */
  #event_page .tomio-form-embed .week-button-container .c-button__changeWeek{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    min-width: 140px; /* お好みで */
  }

  /* 「必須」と重なる場合の保険（必要なら） */
  #event_page .tomio-form-embed .week-button-container{
    margin-top: 8px;
  }	


  /* フォームの外枠も100%に */
  #event_page .tomio-form-embed #form.c-form{
    width: 100% !important;
    max-width: none !important;
	display: block;
  }

  /* ← ここが本命：tableを100%表示 */
  #event_page .tomio-form-embed #form > table{
    width: 100% !important;
    max-width: none !important;
    display: table !important;      /* block化してたら戻す */
    table-layout: fixed;            /* はみ出しにくくする（必要なら外してOK） */
  }

  /* td/th内のはみ出し対策（長文がある場合） */
  #event_page .tomio-form-embed #form > table th,
  #event_page .tomio-form-embed #form > table td{
    word-break: break-word;
  }
  /* zip行（郵便番号自動入力まわり）だけ、横幅に収める */
  #event_page .tomio-form-embed td.c-form__data.is-zip{
    overflow: hidden;
  }

  #event_page .tomio-form-embed td.c-form__data.is-zip .d-flex{
    flex-wrap: wrap;     /* 収まらなければ折り返す */
    gap: 8px;
  }

  /* 自動入力ボタン：nowrapを解除して、必要なら次行へ */
  #event_page .tomio-form-embed td.c-form__data.is-zip button.c-button__zip{
    white-space: normal !important;   /* ← これが本命 */
    max-width: 100%;
  }

  /* 入力欄側も潰れないように */
  #event_page .tomio-form-embed td.c-form__data.is-zip input{
    min-width: 220px;   /* 好みで調整 */
    flex: 1 1 220px;
  }
/* 初期状態：入力フォームを隠す（カレンダーは残す） */
#event_page .tomio-form-embed .c-form{
  display:none;
}
	
}