@import url('https://fonts.googleapis.com/css2?family=Cedarville+Cursive&display=swap');

/* =========================================================
   utility.css
   余白・表示切替など、小さな便利クラス
========================================================= */

.u-center { text-align: center !important; }
.u-sp-only { display: none !important; }



@media (max-width: 767px){
  .u-pc-only { display: none !important; }
  .u-sp-only { display: block !important; }
}



/*h2見出し英字*/

h2.eiji {
  font-family: 'Cedarville Cursive', cursive !important;
  font-weight: 600 !important;
  font-size: 40px !important;
  line-height: 1.2 !important;
  letter-spacing: 0.03em !important;
  margin-bottom: 5px !important;
  color: #9F785F !important;
}





/* CTAボタン共通 */
.reserve-btn a.btn,
.line-btn a.btn {
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding-left: 45px !important;
  padding-right: 45px !important;
}

/* 左アイコン共通 */
.reserve-btn a.btn::before,
.line-btn a.btn::before {
  position: absolute;
  left: 85px !important;
  top: 50%;
  transform: translateY(-50%);
  margin-right: 0;
  color: #fff;
  line-height: 1;
}

/* ご予約：カレンダー */
.reserve-btn a.btn::before {
  content: "\f133";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

/* LINE：LINEアイコン */
.line-btn a.btn::before {
  content: "\f3c0";
  font-family: "Font Awesome 5 Brands";
  font-weight: 400;
}

/* 右側 ＞ */
.reserve-btn a.btn::after,
.line-btn a.btn::after {
  content: "\f105";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  right: 25px;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  line-height: 1;
}


/* ===========================
   FAQデザイン
=========================== */

/* FAQ全体 */
.wp-block-cocoon-blocks-faq.faq-wrap {
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

/* Q */
.is-style-accordion > .faq > .faq-question {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
  background: #fff !important;
  border-bottom: 1px solid #e8e8e8 !important;
}

/* A */
.is-style-accordion > .faq > .faq-answer {
  padding-top: 5px !important;
  padding-bottom: 0 !important;
}

/* Aラベル位置 */
.faq-answer-label {
  padding-top: 3px !important;
}

/* A本文の余白 */
.faq-answer-content {
  margin-top: 0 !important;
}

/* FAQ本体のボーダーは消す */
.faq-wrap .faq {
  border-bottom: none !important;
}

/* 開いている時はQの線を消す */
.faq-wrap .faq-question.active {
  border-bottom: none !important;
}

/* 開いている時はAの下に線を表示 */
.faq-wrap .faq-question.active + .faq-answer {
  border-bottom: 1px solid #e8e8e8 !important;
}

/* FAQのQ・Aを少し小さくして本文と高さを合わせる */
.faq-question-label,
.faq-answer-label {
    font-size: 18px !important;
    line-height: 1;
    min-width: 24px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 3px; /* 微調整 */
}

/* 本文との余白 */
.faq-question-content,
.faq-answer-content {
    padding-left: 8px;
}

/* FAQ全体の左右の余白を削除 */
.is-style-accordion > .faq > .faq-question,
.is-style-accordion > .faq > .faq-answer {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Q・Aを本文1行目に合わせる */
.faq-question,
.faq-answer {
    align-items: flex-start !important;
}

.faq-question-label,
.faq-answer-label {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    font-size: 16px !important;
    font-weight: 600;
    line-height: 1;
    min-width: 22px;
    padding-top: 2px;
    margin-right: 0 !important;
}

/* Q・Aと本文の間隔を最小限に */
.faq-question-content,
.faq-answer-content {
    padding-left: 6px !important;
    margin-right: 0 !important;
    flex: 1;
}

/* 本文側の余白も削除 */
.faq-question,
.faq-answer {
    column-gap: 0 !important;
}

/* ＋マーク用に右側へ余白を確保 */
.faq-question-content,
.faq-answer-content {
    padding-right: 30px !important;
    box-sizing: border-box;
}