body,
.form-area {
  background-color: #FBEDEA; /* 薄いピンクベージュ */
}

.sub_mv {
  margin-bottom: 50px;
}

.food-content {
  padding-top: 175px;
  text-align: center;
  padding-bottom: 150px;
}

.extra {
margin-top: 55px;
margin-bottom: 250px;
}
.extra .extra-title {
  font-size: 24px;
  line-height: 32px;
  text-align: center;
  margin-bottom: 85px;
}

.extra .extra-list {
  display: grid;
  grid-template-columns: 45% 45%;
  justify-content: space-between;
}

.extra .extra-list .extra-content {
  display: flex;
  justify-content: space-evenly;
  margin-bottom: 20px;
  position: relative;
}
.extra .extra-list .extra-content .extra-left {
  width: 120px;
  font-size: 16px;
  line-height: 30px;
}
.extra .extra-list .extra-content .extra-right {
  font-size: 18px;
  line-height: 30px;
}
.extra .extra-list .extra-content .extra-right span {
  font-size: 12px;
}
.extra .extra-list .extra-content:after {
  position: absolute;
  content: "";
  display: block;
  max-width: 440px;
  width: 100%;
  bottom: 0;
  height: 1px;
  background-color: #707070;
}
.extra .extra-body {
  font-size: 12px;
  line-height: 20px;
  list-style-type: disc;
  list-style-position: outside;
  -webkit-padding-start: 10rem;
      padding-inline-start: 10rem;
  margin-top: 60px;
  margin-bottom: 85px;
}

.extra .extra-btn {
  max-width: 1024px;
  margin: auto;
  padding: 50px 0;
  width: 100%;
  border: 1px #707070 solid;
  font-size: 24px;
  line-height: 32px;
  display: flex;
  justify-content: space-between;
  text-align: center;
  position: relative;
}

  .extra .extra-btn .btn-content {
  padding: 20px 2rem;
  margin-top: 30px;
  }
  
  .extra .extra-btn .btn-red {
  display: inline-block;
  color: white;
  background-color: #C56D72;
  }
  .extra .extra-btn > div {
  width: 50%;
  height: 155px;
  }
  .extra .extra-btn:after {
  position: absolute;
  content: "";
  display: block;
  width: 0.5px;
  height: 195px;
  background-color: #707070;
  right: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  }


.plan .plan-title {
  font-size: 24px;
  line-height: 32px;
  margin-top: 135px;
  margin-bottom: 55px;
  text-align: center;
  }
  .plan .plan-content {
  display: flex;
  margin-bottom: 25px;
  justify-content: space-between;
  }
  
  .plan .plan-content .plan-right .right-title {
  font-size: 16px;
  line-height: 21px;
  text-align: center;
  margin-bottom: 25px;
  }
  .plan .plan-content .plan-right .right-mid {
  font-size: 18px;
  line-height: 30px;
  }
  .plan .plan-content .plan-right .right-mid span {
  font-size: 12px;
  }
  .plan .plan-content .plan-right hr {
  width: 100%;
  height: 1px;
  background-color: #707070;
  margin-top: 0;
  }
  
  
  
  .plan .plan-content .plan-right .right-content {
  font-size: 16px;
  line-height: 30px;
  margin-bottom: 15px;
  width: 20%;
  }
  
  .plan .plan-content .plan-right .right-content2 {
  font-size: 16px;
  line-height: 30px;
  margin-bottom: 15px;
  }

  
  .plan .plan-content .plan-right .plan-wrap {
  display: flex;
  margin-bottom: 20px;
  }
  
  .plan .plan-content .plan-right .right-body {
  font-size: 14px;
  line-height: 30px;
  width: 80%;
  }
  
  .plan .plan-content .plan-right .right-body .cuisineTitle::before {
  display: inline-block;
  margin: 0 3px 0 8px;
  width: 10px;
  height: 10px;
  content: '';
  border-radius: 100%;
  background:#c0c0c0;
  }
  
  .plan .plan-content .plan-right .right-body .cuisineImage {
  display: flex;
  flex-direction: row-reverse;
  font-size: 11px;
  }
  
  .plan .plan-content .plan-right .right-body2 {
  font-size: 14px;
  line-height: 30px;
  }
  
  .plan .plan-content .plan-right .right-sub {
    font-size: 13px;
    line-height: 25px;
    margin-top: 26px;
  }
  
  .plan .plan-content .plan-right {
  width: calc(50% - 20px);
  }
  
  .plan .plan-content .plan-left {
  width: calc(50% - 20px);
  }

/* ▼追加：サイト全体のフォント指定（洋風） */
  
  body {
      font-family: "EB Garamond", "Times New Roman", "游明朝体", "Yu Mincho", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
    }
    
    /* ▼追加：お名前以降のみ背景を白に */
    
    .form-area .form-fields {
      background-color: #ffffff;
      padding: 50px 40px;
      max-width: 780px;
      margin: 0 auto;
    }
    
    /* ▼追加：フォームメーラー風スタイル */
    
    .form-area form {
      max-width: 700px;
      margin: 0 auto;
    }
    
    /* ラベル（*お名前 などの見出し文字）を左寄せに */
    .form-area form p {
      text-align: left;
      font-size: 15px;
      letter-spacing: 0.05em;
      margin-top: 25px;
      margin-bottom: 8px;
      margin-top: 20px;    /* labelなしの p (姓・名など) にも余白を追加 */
      margin-bottom: 10px;
    }
    
    .form-area .form-label {
      font-weight: bold;
      font-size: 16px;
      margin-top: 30px;
      margin-bottom: 10px;
    }
    
    .form-area .required-badge {
      background-color: #e53935;
      color: #fff;
      font-size: 12px;
      padding: 3px 8px;
      border-radius: 3px;
      margin-left: 5px;
      vertical-align: middle;
    }
    
    .form-area .optional-badge {
      background-color: #e0e0e0;
      color: #666;
      font-size: 12px;
      padding: 3px 8px;
      border-radius: 3px;
      margin-left: 5px;
      vertical-align: middle;
    }
    
    .form-area input[type="text"],
    .form-area textarea {
      width: 100%;
      box-sizing: border-box;
      padding: 12px 14px;
      border: 1px solid #ccc;
      border-radius: 4px;
      font-size: 15px;
      margin-bottom: 15px;
    }
    
    .form-area textarea {
      min-height: 120px;
      resize: vertical;
    }
    
    /* 姓・名を横並びに */
    .form-area p:has(+ p input[name$="_sei"]) {
      margin-bottom: 5px;
    }
    
    /* ボタン */
    .form-area input[type="submit"] {
      display: block;
      width: 100%;
      background-color: #1f3a5f;
      color: #fff;
      border: none;
      padding: 18px;
      font-size: 17px;
      letter-spacing: 0.1em;
      border-radius: 2px;
      cursor: pointer;
      margin-top: 30px;
      font-family: inherit;
    }
    
    .form-area input[type="submit"]:hover {
      background-color: #1565c0;
    }
    
    .form-area hr {
      border: none;
      border-top: 1px solid #ddd;
      margin: 30px 0;
    }


  /* ▼追加：必須バッジ */
  
  .form-area .required-badge {
    display: inline-block;
    background-color: #c0603a;
    color: #ffffff;
    font-size: 13px;
    font-weight: bold;
    padding: 2px 14px;
    border-radius: 20px;
    margin-left: 8px;
    vertical-align: middle;
    letter-spacing: 0.05em;
  }
  
 /* ▼修正：項目間の余白を広げる */
 
 .form-area form p:has(> .required-badge),
 .form-area form p:has(> .optional-badge) {
   padding-bottom: 10px;
   border-bottom: 1px solid #e0e0e0;
   margin-top: 45px;   /* 40px→45pxに拡大 */
 }

/* ▼追加：参加人数の入力欄を狭く、「名」を横に */
 
 .form-area input[name="field_6209478"] {
   width: 250px !important;
   display: inline-block;
   margin-right: 10px;
   margin-bottom: 0;
 }
 
 .form-area p:has(> input[name="field_6209478"]) {
   display: flex;
   align-items: center;
 }

@charset "UTF-8";
 
 /* ==========================================
    共通リンク・ベーススタイル
    ========================================== */
 a:visited {
   color: #fff;
 }
 
 a:hover {
   color: #fff;
   text-decoration: none;
   opacity: 0.5;
   transition: all 0.3s;
 }
 
 /* ==========================================
    イベント概要・ヘッダー部分
    ========================================== */
 .event-title-sub {
   text-align: center;
 }
 
 .event-title-sub .large-text {
   font-size: 30px;
 }
 
 .event-details {
   text-align: left;
 }
 
 /* 開催日時 */
 .event-date {
   font-size: 24px;
 }
 
 .event-date-strong {
   font-size: 24px;
   font-weight: bold;
 }
 
 .event-time {
   font-size: 24px;
 }
 
 .event-time-sub {
   font-size: 16px;
   color: rgb(38, 50, 56);
   margin-left: 8px;
 }

 /* 会場・料金・定員 */
 .event-venue,
 .event-price-label {
   font-size: 18px;
   color: rgb(38, 50, 56);
 }
 
.event-price-value {
   font-size: 24px;
   color: #000000;
 }
 
.event-price-tax {
   font-size: 18px;
   color: #000000;
 }
 
 .event-capacity-num {
   font-size: 24px;
   color: #000000;
 }
 
.event-capacity-unit {
   font-size: 18px;
   color: #000000;
 }
 
 /* 参加費・定員・対象年齢などのリスト */
 .event-info-list {
   text-align: left;
   margin: 20px 0;
   color: #000000;
 }
 
 .event-info-list .info-heading {
   font-weight: bold;
   font-size: 18px;
   color: #000000;
   margin-top: 20px;
   margin-bottom: 6px;
 }
 
 .event-info-list .info-body {
   font-size: 16px;
   color: #000000;
   margin: 2px 0 2px 1em;
 }
 
 /* ==========================================
    フォーム入力エリア（白背景にしたい範囲）
    ========================================== */
 .form-fields {
   background-color: #ffffff; /* 白背景を適用 */
   padding: 20px;            /* 余白の調整（お好みで変更可） */
   border-radius: 8px;        /* 角丸（お好みで変更可） */
 }
 
 /* 必須バッジの装飾例（必要に応じて調整） */
 .required-badge {
   background-color: #e53935;
   color: #ffffff;
   font-size: 12px;
   padding: 2px 6px;
   border-radius: 3px;
   margin-left: 5px;
 }


/* 追加テキスト用のスタイル */
 .event-intro {
   margin: 20px 0;
   text-align: center; /* 中央揃え（左寄せにしたい場合は left に変更してください） */
 }
 
 .event-intro-title {
   font-size: 18.5px;
   font-weight: bold;
   margin-bottom: 10px;
 }
 
 .event-intro-text {
   font-size: 15px;
   line-height: 1.6;
   color: #333;
 }
 
 /* ==========================================
    イベントタイトル部分
    ========================================== */
 /* メインタイトル（ザ・ロウズ） */
 .form-area h1 {
   font-size: 36px;       /* お好みでサイズを調整してください（例: 36px 〜 42px） */
   font-weight: bold;
   margin-bottom: 10px;
 }
 
 /* サブタイトル（ビールメーカーズ夕食会...） */
 .event-title-sub .large-text {
   font-size: 38px;       /* 元の30pxから38pxに拡大 */
   font-weight: bold;     /* 太字にしてインパクトを出す */
   line-height: 1.3;      /* 改行時の行間をきれいに調整 */
 }
 
 .main-title {
   font-size: 32px;
   text-align: center;
   margin-bottom: 10px;
 }
 
 .event-title-sub {
   font-size: 40px;       /* 大きく目立たせるサイズ */
   font-weight: bold;
   text-align: center;
   line-height: 1.3;
   margin-bottom: 20px;
 }

/* ==========================================
   ▼追加：性別選択（タップしやすいボタン型）
   ========================================== */
.form-area .gender-select {
  display: flex;
  gap: 12px;
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

.form-area .gender-option {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 0;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  background-color: #fff;
  transition: all 0.2s;
}

.form-area .gender-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.form-area .gender-option:has(input:checked) {
  border-color: #1f3a5f;
  background-color: #1f3a5f;
  color: #fff;
  font-weight: bold;
}

/* ==========================================
   ▼追加：性別選択後に表示される参加費
   ========================================== */
.form-area .price-display {
  background-color: #FBEDEA;
  border: 1px solid #e8c9c2;
  border-radius: 6px;
  padding: 14px 18px !important;
  font-size: 16px;
  font-weight: bold;
  color: #1f3a5f;
  margin-top: 15px !important;
  border-bottom: none !important;
}

/* 見出しが連続する場合（例：飲み放題2時間 → ビュッフェ）は間隔を詰める */
.event-info-list .info-heading + .info-heading {
  margin-top: 4px;
}

/* ==========================================
   生年月日：年・月・日を横並びにし、
   月日プルダウンを大きくする（統合・最優先版）
   ========================================== */
.form-area p:has(> input[name="field_6376718_y"]) {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  column-gap: 6px !important;
  row-gap: 8px !important;
}

.form-area input[name="field_6376718_y"] {
  width: 80px !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
}

.form-area select[name="field_6376718_m"],
.form-area select[name="field_6376718_d"] {
  font-size: 18px !important;
  padding: 10px 16px !important;
  margin: 0 !important;
  border: 1px solid #ccc !important;
  border-radius: 4px !important;
  min-width: 70px !important;
  flex: 0 0 auto !important;
}

@media only screen and (max-width: 767px) {
  .food-content {
  padding-top: 75px;
  padding-bottom: 50px;
  }
  .extra {
  margin: 30px 0 150px;
}
  .extra .extra-title {
  margin-bottom: 40px;
  }
  .extra .extra-list {
  grid-template-columns: 100%;
  max-width: 405px;
  margin: auto;
}
  .extra .extra-body {
  width: 80%;
  margin: auto;
  -webkit-padding-start: 0;
      padding-inline-start: 0;
  margin-top: 30px;
  margin-bottom: 40px;
}
  .extra .extra-btn {
  flex-direction: column;
  max-width: 450px;
  width: 100%;
  padding: 30px 0;
  font-size: 22px;
  height: 350px;
}
  .extra .extra-btn .btn-content {
  padding: 10px 2rem;
  margin-top: 15px;
  }
  
  .extra .extra-btn > div {
  width: 100%;
  height: auto;
  height: 100px;
  }
  .extra .extra-btn:after {
  max-width: 350px;
  width: 95%;
  height: 1px;
  }
}

/* 「・ドレスコード」は新しいグループの見出しなので、直前の詰め指定を上書きして間隔を戻す */
.event-info-list .info-heading.section-break {
  margin-top: 20px !important;
}


.food-content .content-title {
  font-size: 24px;
  line-height: 32px;
  margin-bottom: 70px;
}
@media only screen and (max-width: 767px) {
  .food-content .content-title {
  margin-bottom: 40px;
  }
}

.food-detail {
  margin-bottom: 150px;
}
@media only screen and (max-width: 767px) {
  .food-detail {
  margin-bottom: 50px;
  }
  
  .food-detail .detail-content .restaurant-menu {
  margin: 0 auto;
  text-align: center;
  }
  
  .food-detail .detail-content .restaurant-menu a{
  background-color: #0D3246;
  line-height: 30px;
  text-align: center;
  color: white;
  padding: 15px 30px;
  }
  
  
}
.food-detail .detail-content .detail-top {
  display: flex;
  justify-content: space-between;
}



.food-detail .detail-content .restaurant-menu {
  margin: 50px auto 50px;
  text-align: center;
}

.food-detail .detail-content .restaurant-menu a {
  background-color: #0D3246;
  line-height: 30px;
  text-align: center;
  color: white;
  padding: 15px 40px;
}



@media only screen and (max-width: 767px) {
  .food-detail .detail-content .detail-top {
  flex-direction: column-reverse;
  }
}
.food-detail .detail-content .detail-top .left {
  width: calc(50% - 30px);
}
@media only screen and (max-width: 767px) {
  .food-detail .detail-content .detail-top .left {
  width: 100%;
  }
}
.food-detail .detail-content .detail-top .left .left-title {
  font-size: 16px;
  line-height: 21px;
  text-align: center;
}
.food-detail .detail-content .detail-top .left .left-content {
  font-size: 14px;
  line-height: 30px;
  margin-top: 30px;
  margin-bottom: 40px;
}
@media only screen and (max-width: 767px) {
  .food-detail .detail-content .detail-top .left .left-content {
  margin-top: 25px;
  margin-bottom: 30px;
  }
}
.food-detail .detail-content .detail-top .right {
  width: calc(50% - 30px);
}
@media only screen and (max-width: 767px) {
  .food-detail .detail-content .detail-top .right {
  width: 100%;
  margin-bottom: 30px;
  }
}
.food-detail .detail-content .detail-bottom {
  max-width: 940px;
  width: 95%;
  margin: auto;
}
@media only screen and (max-width: 767px) {
  .food-detail .detail-content .detail-bottom {
  width: 100%;
  }
}
.food-detail .detail-content .detail-bottom .bottom-content {
  margin-top: 80px;
  display: grid;
  grid-template-columns: 50% 50%;
  justify-content: center;
}
@media only screen and (max-width: 767px) {
  .food-detail .detail-content .detail-bottom .bottom-content {
  grid-template-columns: 100%;
  margin: auto;
  max-width: 405px;
  margin-bottom: 20px;
  }
}
.food-detail .detail-content .detail-bottom .bottom-content > div {
  display: flex;
  align-items: center;
  font-size: 12px;
  justify-content: space-between;
  margin-bottom: 15px;
}
.food-detail .detail-content .detail-bottom .bottom-content > div .left {
  width: 100px;
  background-color: #0D3246;
  line-height: 30px;
  text-align: center;
  color: white;
}
.food-detail .detail-content .detail-bottom .bottom-content > div .right {
  width: calc(100% - 100px);
  padding-left: 25px;
  line-height: 20px;
}
.food-detail .detail-content .detail-bottom .bottom-list {
  font-size: 12px;
  line-height: 20px;
  list-style-position: outside;
  list-style: disc;
}
@media only screen and (max-width: 767px) {
  .food-detail .detail-content .detail-bottom .bottom-list {
  width: 80%;
  margin: auto;
  }
}

.food-map {
  padding: 90px 0;
}
.food-map .map-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media only screen and (max-width: 767px) {
  .food-map .map-content {
  flex-direction: column-reverse;
  }
}
.food-map .map-content .map-left {
  width: calc(50% - 20px);
}
@media only screen and (max-width: 767px) {
  .food-map .map-content .map-left {
  width: 100%;
  }
}
.food-map .map-content .map-left .left-title {
  font-size: 16px;
  line-height: 21px;
  text-align: center;
}
.food-map .map-content .map-left .left-content {
  font-size: 14px;
  line-height: 30px;
  margin-top: 30px;
}
.food-map .map-content .map-right {
  width: calc(50% - 20px);
}
@media only screen and (max-width: 767px) {
  .food-map .map-content .map-right {
  width: 100%;
  text-align: center;
  margin-bottom: 30px;
  }
}

@media only screen and (max-width: 767px) {
  .plan .plan-content {
  flex-direction: column;
  align-items: center;
  }
  
  .plan .plan-content .plan-left {
  width: 90%;
  text-align: center;
  margin-bottom: 20px;
  }
  
  .plan .plan-content .plan-left {
    width: 90%;
    text-align: center;
    margin-bottom: 20px;
  }
  .plan .plan-content .plan-right {
    width: 90%;
  }
  .plan .plan-content .plan-right .right-sub {
    font-size: 13px;
    line-height: 18px;
    margin-top: 20px;
  }
  
  .plan .plan-content .plan-right .right-content {
    font-size: 16px;
    line-height: 30px;
    margin-bottom: 15px;
    width: 40%;
  }
  
  .plan .plan-content .plan-right .right-body {
    font-size: 14px;
    line-height: 30px;
    width: 60%;
  }

 /* --- 1. タイトルをスマホ1行に収める調整 --- */
  .main-title {
    font-size: 26px; /* スマホで1行に収まるサイズ */
    text-align: center;
    white-space: nowrap;        /* 1行で折り返さない設定 */
  }
  
  .event-title-sub h2,
  h2.event-title-sub {
    font-size: 26px; /* スマホで1行に収まるサイズ */
    text-align: center;
    white-space: nowrap;        /* 1行で折り返さない設定 */
    line-height: 1.4;
  }
  
  /* --- 2. イベント概要（日時・会場・料金・定員）の余白と中央揃え --- */
  .event-details {
    text-align: center; /* 左寄りを解除して見やすく中央寄せ */
    margin: 8px 0;
  }
  
  .event-date-strong,
  .event-time {
    font-size: 18px;
  }
  
  .event-venue,
  .event-price-label,
  .event-price-tax,
  .event-capacity-unit {
    font-size: 16px;
  }
  
  .event-price-value,
  .event-capacity-num {
    font-size: 20px;
  }
  
  /* --- 3. フォームエリア全体のパディング（左寄り防止） --- */
  .form-area {
    padding: 0 16px; /* 全体に左右の適度な余白を作る */
    box-sizing: border-box;
  }
  
  .form-area .form-fields {
    padding: 25px 20px; /* スマホでの内側余白を最適化 */
  }
  
  /* フォーム入力欄の幅100%化 */
  .form-area input[type="text"],
  .form-area textarea {
    width: 100%;
    box-sizing: border-box;
  }
  
  /* 参加人数の入力欄（スマホでも崩れないよう調整） */
  .form-area input[name="field_6209478"] {
    width: 120px;
  }
/* 1. ページ全体・フォームエリアの背景色を白に統一 */
  body,
  .form-area {
    background-color:  #FBEDEA;
  }
  
  /* 2. 入力エリアの境界線をなくし、一体化させる */
    .form-area .form-fields {
    background-color: #ffffff; /* フォーム部分の背景を白に */
    width: 100vw;              /* 画面の横幅いっぱいに広げる */
    position: relative;
    left: 50%;
    transform: translateX(-50%);          /* 左右の親要素の余白を無視して全画面幅へ */
    
    /* カードに見える要素（角丸・枠線・影）を完全に削除 */
    border-radius: 0;
    border: none;
    box-shadow: none;
    
    /* 内側の余白調整 */
    padding: 30px 20px 60px;
    box-sizing: border-box;
  }
  
  .event-intro-title {
     font-size: 18px;
     font-weight: 900;       /* より太く濃く設定（boldより上位の極太値） */
     color: #111111;         /* 薄い黒（#333など）から「より深い濃い黒」に変更 */
     margin-bottom: 10px;
     letter-spacing: 0.05em; /* 文字と文字の間隔をわずかに広げて存在感を強調 */
   }
   
   /* スマホでも全体のクリーム色背景を維持 */
   body, 
   .form-area {
     background-color: #FBEDEA;
   }
   
   /* 白いフォームカードの横幅・角丸を綺麗に保つ */
   .form-area .form-fields {
     background-color: #ffffff;
     border-radius: 8px;
   }
   
  /* 3. タイトル（h1）の文字サイズ指定 */
  .form-area h1 {
    font-size: 30px !important; /* ★ここでお好みのサイズに調整してください */
  }

}
/*# sourceMappingURL=style.css.map */