@charset "UTF-8";
/* CSS Document */
/* 團餐頁「歲月手路宴」(/banquet/group-meal/)專屬樣式 */
/* 需與 banquet-common.css 一併載入:hero、麵包屑、全寬分區、標題與按鈕、
   場地規格、結尾諮詢等共用元件在該檔;本檔只放本頁獨有的部分。
   容器 class:.banquet-page.shou-lu-yan */

/**********四道手路菜的深色分區**********/
  .shou-lu-yan .dishes-band{
    background: #1C1A17;
    color: #F5F1E8;
    padding: 84px 0;
  }


/**********宴席理念**********/
  .shou-lu-yan .story{
    display: -webkit-flex;
    display: flex;
    align-items: flex-start;
    margin-bottom: 56px;
  }
  .shou-lu-yan .story .story-head{
    width: 38%;
    padding-right: 40px;
  }
  .shou-lu-yan .story .story-body{
    width: 62%;
  }
  .shou-lu-yan .story .story-body p{
    font-size: 16px;
    color: #333;
    margin-bottom: 22px;
  }


/**********四道手路菜**********/
  .shou-lu-yan .dishes-band .eyebrow{
    color: #f3bd39;
  }
  .shou-lu-yan .dishes-band .sec-title{
    color: #F5F1E8;
  }
  .shou-lu-yan .dishes-band .dish-head{
    border-bottom-color: rgba(245,241,232,0.16);
    padding-bottom: 44px;
  }
  .shou-lu-yan .dishes-band .dish-head .dish-head-note{
    color: #A79E8C;
  }

  /* 四道之間以細線分隔，最後一道不收邊 */
  .shou-lu-yan .dish-list .dish{
    padding: 56px 0;
    border-bottom: 1px solid rgba(245,241,232,0.12);
  }
  .shou-lu-yan .dish-list .dish:last-child{
    padding-bottom: 0;
    border-bottom: 0;
  }

  .shou-lu-yan .dish-head{
    display: -webkit-flex;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding-bottom: 30px;
    border-bottom: 1px solid #dedbcf;
  }
  .shou-lu-yan .dish-head .dish-head-main{
    padding-right: 40px;
  }
  .shou-lu-yan .dish-head .dish-head-main .sec-title{
    margin-bottom: 0;
  }
  .shou-lu-yan .dish-head .dish-head-note{
    max-width: 340px;
    margin: 0;
    font-size: 15px;
    color: #666;
  }

  .shou-lu-yan .dish{
    display: -webkit-flex;
    display: flex;
    align-items: center;
  }
  .shou-lu-yan .dish.rev{
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
  }
  .shou-lu-yan .dish .dish-pic{
    width: 46%;
  }
  .shou-lu-yan .dish .dish-pic img{
    width: 100%;
    display: block;
  }
  .shou-lu-yan .dish .dish-body{
    width: 54%;
    padding: 0 0 0 50px;
  }
  .shou-lu-yan .dish.rev .dish-body{
    padding: 0 50px 0 0;
  }
  .shou-lu-yan .dish .dish-name{
    font-family: 'Philosopher', 'Noto Serif TC', Arial, Helvetica, 'Noto Sans TC', "微軟正黑體", Heiti TC, "メイリオ", sans-serif;
    font-size: 32px;
    color: #F5F1E8;
    margin: 0 0 16px;
  }
  .shou-lu-yan .dish .dish-lead{
    font-size: 18px;
    line-height: 1.9;
    color: #f3bd39;
    margin-bottom: 22px;
  }
  /* 只作用於內文段落，避免蓋掉 .dish-name／.dish-lead／.dish-quote 的字級與顏色 */
  .shou-lu-yan .dish .dish-body > p:not([class]){
    font-size: 15px;
    color: #CFC7B6;
    margin-bottom: 16px;
  }
  .shou-lu-yan .dish .dish-quote{
    border-left: 2px solid #f3bd39;
    padding-left: 18px;
    font-size: 15px;
    color: #f3bd39;
    margin-bottom: 0;
  }

  /* 菜色照待補時的佔位框 */
  .shou-lu-yan .pic-todo{
    background: rgba(245,241,232,0.06);
    border: 1px dashed rgba(243,189,57,0.55);
    color: #CFC7B6;
    text-align: center;
    padding: 30px 20px;
    min-height: 420px;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .shou-lu-yan .pic-todo .mark{
    font-size: 30px;
    line-height: 1;
    margin-bottom: 12px;
    color: #f3bd39;
  }
  .shou-lu-yan .pic-todo .txt{
    font-size: 14px;
    line-height: 1.8;
  }


/**********卡片列**********/
  .shou-lu-yan .card-list{
    display: -webkit-flex;
    display: flex;
    margin: 0 -10px;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .shou-lu-yan .card-list li{
    width: calc(33.333% - 20px);
    margin: 0 10px 20px;
    background: #fff;
    border: 1px solid #dedbcf;
    padding: 30px 28px;
  }
  .shou-lu-yan .card-list.tone li{
    background: #f5f3ed;
  }
  .shou-lu-yan .band.tone .card-list li{
    background: #fff;
  }
  .shou-lu-yan .card-list .card-num{
    display: block;
    font-size: 13px;
    letter-spacing: 4px;
    color: #b08f04;
    margin-bottom: 12px;
  }
  .shou-lu-yan .card-list .card-title{
    font-family: 'Philosopher', 'Noto Serif TC', Arial, Helvetica, 'Noto Sans TC', "微軟正黑體", Heiti TC, "メイリオ", sans-serif;
    font-size: 21px;
    color: #121212;
    margin-bottom: 12px;
  }
  .shou-lu-yan .card-list p{
    font-size: 15px;
    color: #666;
  }
  .shou-lu-yan .card-list .voice{
    font-size: 15px;
    color: #333;
    margin-bottom: 16px;
  }
  .shou-lu-yan .card-list .who{
    font-size: 14px;
    color: #b08f04;
  }


/**********場地區的細項(時段表、服務價目、注意事項、飲食安排)**********/

  /* 時段表：標籤與時間對齊成列 */
  .shou-lu-yan .hours{
    border-top: 1px solid #dedbcf;
    margin-top: 26px;
  }
  .shou-lu-yan .hours li{
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: baseline;
    padding: 14px 0;
    border-bottom: 1px solid #dedbcf;
  }
  .shou-lu-yan .hours .label{
    min-width: 96px;
    font-size: 14px;
    letter-spacing: 3px;
    color: #b08f04;
  }
  .shou-lu-yan .hours .val{
    font-size: 16px;
    color: #333;
  }
  .shou-lu-yan .hours .val a{
    color: #b08f04;
  }

  /* 其他服務 ｜ 注意事項 兩欄 */
  .shou-lu-yan .venue-detail{
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 -22px;
  }
  .shou-lu-yan .venue-detail .col{
    width: calc(50% - 44px);
    margin: 0 22px;
  }
  .shou-lu-yan .col-title{
    font-family: 'Philosopher', 'Noto Serif TC', Arial, Helvetica, 'Noto Sans TC', "微軟正黑體", Heiti TC, "メイリオ", sans-serif;
    font-size: 23px;
    color: #121212;
    margin: 0 0 18px;
  }

  /* 其他服務價目：項目左、內容右 */
  .shou-lu-yan .svc{
    border-top: 1px solid #dedbcf;
  }
  .shou-lu-yan .svc li{
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid #dedbcf;
  }
  .shou-lu-yan .svc .item{
    font-size: 16px;
    color: #121212;
    padding-right: 16px;
  }
  .shou-lu-yan .svc .val{
    font-size: 14.5px;
    color: #666;
    text-align: right;
  }

  /* 注意事項：米底框 */
  .shou-lu-yan .notice{
    background: #f5f3ed;
    border: 1px solid #dedbcf;
    padding: 24px 28px;
    margin-bottom: 20px;
  }
  .shou-lu-yan .notice p{
    font-size: 15px;
    line-height: 2;
    color: #4A443A;
    margin: 0;
  }

  /* 素食、兒童與特殊飲食安排 */
  .shou-lu-yan .diet{
    border: 1px solid #dedbcf;
    background: #fff;
    padding: 26px 28px;
  }
  .shou-lu-yan .diet .diet-title{
    font-family: 'Philosopher', 'Noto Serif TC', Arial, Helvetica, 'Noto Sans TC', "微軟正黑體", Heiti TC, "メイリオ", sans-serif;
    font-size: 20px;
    color: #121212;
    margin-bottom: 12px;
  }
  .shou-lu-yan .diet .diet-note{
    font-size: 14px;
    line-height: 1.95;
    color: #b08f04;
    margin-bottom: 14px;
  }
  .shou-lu-yan .diet > p:not([class]){
    font-size: 15px;
    line-height: 2;
    color: #333;
    margin: 0;
  }


/**********常見問題**********/
  .shou-lu-yan .faq{
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    border-top: 1px solid #dedbcf;
  }
  .shou-lu-yan .faq li{
    width: 50%;
    padding: 26px 40px 26px 0;
    border-bottom: 1px solid #dedbcf;
  }
  .shou-lu-yan .faq li:nth-child(even){
    padding-right: 0;
    padding-left: 40px;
  }
  .shou-lu-yan .faq .q{
    font-family: 'Philosopher', 'Noto Serif TC', Arial, Helvetica, 'Noto Sans TC', "微軟正黑體", Heiti TC, "メイリオ", sans-serif;
    font-size: 20px;
    color: #121212;
    margin-bottom: 8px;
  }
  .shou-lu-yan .faq .a{
    font-size: 15px;
    color: #666;
    margin: 0;
  }
  .shou-lu-yan .faq-note{
    font-size: 14px;
    color: #b08f04;
    margin: 12px 0 0;
  }


/**********平板**********/
  @media (max-width: 1024px){
    .shou-lu-yan .card-list li{
      width: calc(50% - 20px);
    }
    .shou-lu-yan .dish .dish-body{
      padding-left: 34px;
    }
    .shou-lu-yan .dish.rev .dish-body{
      padding-right: 34px;
    }
  }

/**********手機**********/
  @media (max-width: 800px){
    .shou-lu-yan .dishes-band{
      padding: 54px 0;
    }
    .shou-lu-yan .dish-list .dish{
      padding: 40px 0;
    }
    .shou-lu-yan .story,
    .shou-lu-yan .dish,
    .shou-lu-yan .dish.rev,
    .shou-lu-yan .dish-head{
      display: block;
    }
    .shou-lu-yan .story .story-head,
    .shou-lu-yan .story .story-body,
    .shou-lu-yan .dish .dish-pic,
    .shou-lu-yan .dish .dish-body,
    .shou-lu-yan .dish-head .dish-head-main{
      width: 100%;
      padding: 0;
      max-width: 100%;
    }
    .shou-lu-yan .story .story-head{
      margin-bottom: 26px;
    }
    .shou-lu-yan .dish .dish-body,
    .shou-lu-yan .dish.rev .dish-body{
      padding: 26px 0 0;
    }
    .shou-lu-yan .dish-head .dish-head-note{
      max-width: 100%;
      margin-top: 18px;
    }
    .shou-lu-yan .card-list li,
    .shou-lu-yan .faq li{
      width: 100%;
    }
    .shou-lu-yan .venue-detail{
      display: block;
      margin: 0;
    }
    .shou-lu-yan .venue-detail .col{
      width: 100%;
      margin: 0;
    }
    .shou-lu-yan .venue-detail .col + .col{
      margin-top: 34px;
    }
    /* 價目在窄螢幕改為上下排，避免項目與金額擠在同一行貼邊 */
    .shou-lu-yan .svc li{
      display: block;
    }
    .shou-lu-yan .svc .item{
      display: block;
      padding-right: 0;
      margin-bottom: 4px;
    }
    .shou-lu-yan .svc .val{
      text-align: left;
    }
    .shou-lu-yan .faq li,
    .shou-lu-yan .faq li:nth-child(even){
      padding: 22px 0;
    }
  }

  @media (max-width: 480px){
    .shou-lu-yan .dish .dish-name{
      font-size: 27px;
    }
  }