.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-venue,
 .event-price-label {
   font-size: 18px;
   color: rgb(38, 50, 56);
 }
 
 .event-price-value {
   font-size: 24px;
   color: rgb(191, 54, 12);
 }
 
 .event-price-tax {
   font-size: 18px;
   color: rgb(191, 54, 12);
 }
 
 .event-capacity-num {
   font-size: 24px;
   color: rgb(211, 47, 47);
 }
 
 .event-capacity-unit {
   font-size: 18px;
   color: rgb(211, 47, 47);
 }
 
 /* ==========================================
    フォーム入力エリア（白背景にしたい範囲）
    ========================================== */
 .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;
 }

@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;
  }
}



.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:  #FAF8F5;
  }
  
  /* 2. 入力エリアの境界線をなくし、一体化させる */
  .form-area .form-fields {
    .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: #FAF8F5;
   }
   
   /* 白いフォームカードの横幅・角丸を綺麗に保つ */
   .form-area .form-fields {
     background-color: #ffffff;
     border-radius: 8px;
   }

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