@media screen and (max-width: 767px) {


/* =========================
   全体　フォント関連
   ========================= */

   /*サイズ*/
   p {
    font-size: 16px;
}

/* 見出しの英字（上） */
p.index {
  font-size: 12px;
  letter-spacing: 0.2em;
  color: #7DA493;
  text-align: center;
  margin-bottom: 2px !important;
  font-weight: 500;
}



/*ボタンの幅*/
  .cocoon-block-button__link,
  .btn {
    padding: 10px 20px !important; /* ←ここで高さ調整 */
    font-size: 16px; /* ついでに少し整えるとバランス◎ */
    font-weight: 500;
  }

  /* YouTube動画の下の余白を消す */
.wp-block-embed {
  margin-bottom: 0 !important;
}

/*上のロゴ非表示*/
.footer-bottom-logo img {
    height: 35px;
    width: auto;
  }

  /*コピーライト文字*/
  .copyright {
    font-size: 11px !important;
  }

  /*フッター余白*/
  .footer-bottom {
    margin-top: 0px !important;
  }

/* スマホのみ：Q&A（アコーディオン）の文字サイズ */

  /* 質問 */
  .faq-question-content {
    font-size: 14px !important;
  }

  /* 回答 */
  .faq-question-content,
  .faq-answer-content,
  .faq-answer-content p,
  .faq-answer-content span,
  .faq-answer-content div {
    font-size: 14px !important;
  }




/*h2サイズ*/
h2.serif {
  font-family: serif !important;
  font-weight: 600 !important;
  font-size: 16.8px !important;
  line-height: 1.5 !important;
  letter-spacing: 1px !important;
  color: #4A4A4A !important;
}



/* =========================
   スライダー上の余白
   ========================= */

  .header-container-in {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }






/*プロフィールお名前の位置*/
.name {
  text-align: center !important;
}



/* スマホヘッダーロゴを少し小さく */
.logo-menu-button img.site-logo-image {
    max-height: 35px !important;
    width: auto;
}





/* =========================
   初めての方へ ページ
   ========================= */

/* チェックリストの外枠 */
.wp-block-list.second {
  border: 1px solid #bdbdbd;
  border-radius: 8px;   /* 不要なら削除 */
  padding: 0px 10px 0px 35px;  margin: 0;
  box-sizing: border-box;
}












/* =========================
   スライドインメニュー
   ========================= */

  /* メニュー全体 */
  #navi-menu-content {
    width: 82vw !important;
    max-width: 380px !important;
    background: rgba(255,255,255,.98) !important;
    padding: 25px 28px 50px !important;
    box-sizing: border-box;
    overflow-y: auto;
  }

  /* Close */
  #navi-menu-content .navi-menu-close-button {
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 14px;
    margin: 0 0 20px !important;
    color: #9f918c !important;
    font-size: 20px;
    font-weight: 400;
  }

  #navi-menu-content .navi-menu-close-button::before {
    content: "Close";
  }

  #navi-menu-content .navi-menu-close-button .fa-times {
    display: none !important;
  }

  #navi-menu-content .navi-menu-close-button::after {
    content: "×";
    font-family: Arial, sans-serif;
    font-size: 25px;
    font-weight: 300;
    line-height: 1;
    color: #9f918c;
  }

  /* メニュー全体 */
  #navi-menu-content .menu-drawer {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* 第一階層 */
  #navi-menu-content .menu-drawer > li {
    position: relative;
    margin: 0 10px !important;          /* 左右10px */
    padding: 0;
    border-bottom: 1px solid #d7d2cf;
  }

  /* リンク */
  #navi-menu-content .menu-drawer > li > a {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 72px;
    padding: 18px 10px 18px 30px !important;

    font-size: 14px !important;         /* ←14px */
    font-weight: 400;
    color: #222;
    text-decoration: none;
  }

  /* 左の丸 */
  #navi-menu-content .menu-drawer > li > a::before {
    content: "";
    position: absolute;
    left: 2px;                          /* ←5px左へ */
    top: 50%;
    transform: translateY(-50%);
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #b9aaa5;
  }

  /* ホバー */
  #navi-menu-content .menu-drawer > li > a:hover {
    color: #9f918c;
  }

  /* サブメニュー */
  #navi-menu-content .menu-drawer .sub-menu {
    display: block !important;
    margin: -5px 0 18px;
    padding-left: 42px;
    background: transparent;
    list-style: none;
  }

  #navi-menu-content .menu-drawer .sub-menu li {
    border: none;
  }

  #navi-menu-content .menu-drawer .sub-menu li a {
    position: relative;
    display: block;
    padding: 9px 5px 9px 30px !important;
    font-size: 14px;
    color: #333;
  }

  #navi-menu-content .menu-drawer .sub-menu li a::before {
    content: "−";
    position: absolute;
    left: 0;
    color: #aaa09c;
  }

  /* Cocoonの矢印を消す */
  #navi-menu-content .sub-menu-button,
  #navi-menu-content .item-label::after {
    display: none !important;
  }






/* =========================================
   スマホフッター
   左：ロゴ
   右：メニュー
   下：コピーライトを独立して中央
========================================= */

@media screen and (max-width: 768px) {

  /* =====================
     フッター全体
  ===================== */

  #footer .footer-bottom {
    display: grid !important;

    grid-template-columns: 40% 60%;

    grid-template-areas:
      "logo menu"
      "copy copy";

    column-gap: 10px;
    row-gap: 20px;

    align-items: center;

    width: 100% !important;
    margin: 0 !important;
    padding: 0px 20px 0px !important;
  }


  /* =====================
     左：ロゴ
  ===================== */

  #footer .footer-bottom-logo {
    grid-area: logo;

    display: flex !important;
    justify-content: center;
    align-items: center;

    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
  }


  /* 元画像を非表示 */
  #footer .footer-bottom-logo img {
    display: none !important;
  }


  /* 元のサイト名を非表示 */
  #footer .footer-bottom-logo .site-name-text {
    font-size: 0 !important;
  }


  /* スマホ用ロゴ */
  #footer .footer-bottom-logo .site-name-text-link::before {
    content: "";

    display: block;

    width: 80px;
    height: 80px;

    background-image:
      url("https://matrabbityoga.com/wp-content/uploads/2026/06/ロゴ.png");

    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }


  /* =====================
     重要
     footer-bottom-contentを
     レイアウト上だけ透明化
  ===================== */

  #footer .footer-bottom-content {
    display: contents !important;
  }


  /* =====================
     右：メニュー
  ===================== */

  #footer .navi-footer {
    grid-area: menu;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    text-align: left !important;
  }


  #footer .navi-footer-in {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
  }


  #footer .menu-footer {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
  }


  #footer .menu-footer > li {
    width: 100% !important;

    margin: 0 0 8px !important;
    padding: 0 !important;

    text-align: left !important;
  }


  #footer .menu-footer > li:last-child {
    margin-bottom: 0 !important;
  }


  #footer .menu-footer > li > a {
    display: block;

    padding: 0 !important;

    font-size: 13px !important;
    line-height: 1.5 !important;

    text-align: left !important;

    white-space: nowrap;
  }


  /* メニュー頭のライン */
  #footer .menu-footer > li > a::before {
    content: "−";

    display: inline-block;

    margin-right: 7px;
  }


  /* =====================
     コピーライト
     完全に独立した2段目
  ===================== */

  #footer .source-org.copyright {
    grid-area: copy !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    text-align: center !important;

    font-size: 11px !important;
    line-height: 1.6;
  }

}



  /* ロゴを左カラムの縦中央に配置 */
  #footer .footer-bottom-logo {
    align-self: stretch !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #footer .footer-bottom-logo .logo-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
  }

  #footer .footer-bottom-logo .site-name-text-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
  }




}