/* =========================================================
   TAKEMON COMMON ADDITIONAL CSS
   ヘッダー / PC固定メニュー / 右下CTA / モバイル文字
   ========================================================= */


/* =========================================================
   01. ファーストビューがあるページだけ
       SWELL標準ヘッダーを非表示
   ========================================================= */

body:has(.takemon-fv) #header,
body:has(.takemon-fv) #fix_header,
body:has(.takemon-fv) .l-header,
body:has(.takemon-fv) .l-fixHeader {
  display: none !important;
}


/* =========================================================
   02. トップページ専用パーツを
       その他のページでは非表示
   ========================================================= */

body:not(:has(.takemon-fv)) .takemon-fv__side-menu,
body:not(:has(.takemon-fv)) .tm-vip,
body:not(:has(.takemon-fv)) .tm-fixed-slot {
  display: none !important;
}


/* =========================================================
   03. 固定パーツ格納ブロック

   高さ・余白・独立した重なり領域を作らない
   ========================================================= */

body:has(.takemon-fv) .post_content > .tm-fixed-slot,
body:has(.takemon-fv) .tm-fixed-slot {
  position: static !important;
  z-index: auto !important;

  display: block !important;

  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;

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

  overflow: visible !important;

  opacity: 1 !important;

  transform: none !important;
  filter: none !important;
  perspective: none !important;

  contain: none !important;
  isolation: auto !important;
  mix-blend-mode: normal !important;

  clip-path: none !important;
  will-change: auto !important;

  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}


/* WordPress・SWELLが生成する内側のラッパー */

body:has(.takemon-fv)
.tm-fixed-slot > .wp-block-group__inner-container,

body:has(.takemon-fv)
.tm-fixed-slot .wp-block-shortcode,

body:has(.takemon-fv)
.tm-fixed-slot .swell-block-blogParts,

body:has(.takemon-fv)
.tm-fixed-slot .p-blogParts,

body:has(.takemon-fv)
.tm-fixed-slot .p-blogParts > .post_content {
  position: static !important;
  z-index: auto !important;

  display: block !important;

  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;

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

  overflow: visible !important;

  opacity: 1 !important;

  transform: none !important;
  filter: none !important;
  perspective: none !important;

  contain: none !important;
  isolation: auto !important;
  mix-blend-mode: normal !important;

  clip-path: none !important;
  will-change: auto !important;

  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}


/* 格納ブロックの次にあるFVへ余白を入れない */

body:has(.takemon-fv)
.post_content > .tm-fixed-slot + * {
  margin-top: 0 !important;
  margin-block-start: 0 !important;
}


/* =========================================================
   04. 右上メニュー・右下CTAの共通寸法
   ========================================================= */

body:has(.takemon-fv) {
  --tm-side-width: clamp(190px, 16vw, 250px);
  --tm-side-right: clamp(24px, 3vw, 48px);
}


/* =========================================================
   05. PC右固定メニュー
   ========================================================= */

.takemon-fv__side-menu,
.takemon-fv__side-menu * {
  box-sizing: border-box;
}

body:has(.takemon-fv) .takemon-fv__side-menu {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;

  z-index: 2147483647 !important;

  display: flex !important;
  align-items: flex-start;

  width: var(--tm-side-width) !important;

  height: 100vh !important;
  height: 100svh !important;
  height: 100dvh !important;

  margin: 0 !important;

  padding-top: clamp(80px, 10vh, 110px) !important;
  padding-right: var(--tm-side-right) !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;

  color: #ffffff !important;

  pointer-events: none;

  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;

  opacity: 1 !important;

  transform: none !important;
  filter: none !important;
  perspective: none !important;

  contain: none !important;
  isolation: auto !important;

  /*
   * 反転処理の本体
   * 暗い背景では白、明るい背景では黒になる
   */
  mix-blend-mode: difference !important;

  clip-path: none !important;
  will-change: auto !important;

  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}


/* =========================================================
   06. 固定ナビゲーション
   ========================================================= */

body:has(.takemon-fv) .takemon-fv__side-nav {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;

  gap: clamp(34px, 5vh, 48px);

  width: 100% !important;
  height: auto !important;

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

  pointer-events: auto;

  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;

  opacity: 1 !important;

  transform: none !important;
  filter: none !important;

  contain: none !important;
  isolation: auto !important;
  mix-blend-mode: normal !important;
}


/* =========================================================
   07. 固定メニューリンク
   ========================================================= */

body:has(.takemon-fv)
.takemon-fv__side-menu
.takemon-fv__side-nav a,

body:has(.takemon-fv)
.takemon-fv__side-menu
.takemon-fv__side-nav a:link,

body:has(.takemon-fv)
.takemon-fv__side-menu
.takemon-fv__side-nav a:visited,

body:has(.takemon-fv)
.takemon-fv__side-menu
.takemon-fv__side-nav a:hover,

body:has(.takemon-fv)
.takemon-fv__side-menu
.takemon-fv__side-nav a:active {
  position: relative;

  display: inline-block;

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

  color: #ffffff !important;

  font-family:
    "Yu Mincho",
    "YuMincho",
    "Hiragino Mincho ProN",
    "Noto Serif JP",
    serif;

  font-size: clamp(0.72rem, 0.85vw, 0.9rem);
  font-weight: 400 !important;
  line-height: 1.5;
  letter-spacing: 0.08em;

  text-decoration: none !important;
  text-shadow: none !important;

  opacity: 1 !important;

  filter: none !important;

  isolation: auto !important;
  mix-blend-mode: normal !important;

  transition: opacity 0.35s ease;
}


/* 下線アニメーション */

body:has(.takemon-fv)
.takemon-fv__side-menu
.takemon-fv__side-nav a::after {
  content: "";

  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;

  height: 1px;

  background: currentColor;

  transform: scaleX(0);
  transform-origin: right center;

  transition: transform 0.45s ease;
}

body:has(.takemon-fv)
.takemon-fv__side-menu
.takemon-fv__side-nav a:hover::after,

body:has(.takemon-fv)
.takemon-fv__side-menu
.takemon-fv__side-nav a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left center;
}


/* キーボード操作 */

body:has(.takemon-fv)
.takemon-fv__side-menu
.takemon-fv__side-nav a:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 6px;
}


/* =========================================================
   08. セクションとの重なり対策
   ========================================================= */

body:has(.takemon-fv)
.post_content .takemon-section {
  z-index: auto !important;
}


/* =========================================================
   09. PC右下・開業記念特別コースCTA
   ========================================================= */

/* 旧ブログパーツ内の仮CTAを、PHP除去前の保険として非表示 */
.takemon-vip-cta,
.takemon-vip-cta__link {
  display: none !important;
}

.tm-vip {
  display: none !important;
}

@media screen and (min-width: 960px) {

  body:has(.takemon-fv) .tm-vip {
    position: fixed !important;

    right: var(--tm-side-right) !important;
    bottom: clamp(24px, 3vw, 40px) !important;

    z-index: 2147483646 !important;

    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;

    /*
     * 右上メニューの文字領域と
     * 左右位置・横幅を揃える
     */
    width: clamp(210px, 18vw, 250px) !important;

    height: auto !important;
    min-height: 100px;

    margin: 0 !important;
    padding: 16px 13px !important;

    border: 1px solid rgba(255, 255, 255, 0.28) !important;

    color: #f8f6f0 !important;
    background: rgba(27, 29, 26, 0.96) !important;

    text-decoration: none !important;
    text-shadow: none !important;

    opacity: 1 !important;

    transform: none !important;
    filter: none !important;

    contain: none !important;
    isolation: auto !important;
    mix-blend-mode: normal !important;

    box-shadow: none !important;

    transition:
      color 0.4s ease,
      background-color 0.4s ease,
      border-color 0.4s ease;
  }
}


/* CTAテキスト */

.tm-vip-text {
  display: flex;
  flex-direction: column;
  gap: 8px;

  min-width: 0;

  text-align: left;
}

.tm-vip-text small {
  font-family: Arial, sans-serif;
  font-size: 0.45rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.2em;

  opacity: 0.52;
}

.tm-vip-text strong {
  font-family:
    "Yu Mincho",
    "YuMincho",
    "Hiragino Mincho ProN",
    "Noto Serif JP",
    serif;

  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0.06em;
  white-space: nowrap;
}


/* CTA矢印 */

.tm-vip-arrow {
  display: block;

  font-family: Arial, sans-serif;
  font-size: 0.85rem;
  font-style: normal;
  line-height: 1;

  opacity: 0.58;

  transform: translateX(0);

  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
}


/* CTAホバー */

body:has(.takemon-fv) .tm-vip:hover,
body:has(.takemon-fv) .tm-vip:focus-visible {
  border-color: #272925 !important;

  color: #272925 !important;
  background: #f7f6f2 !important;
}

body:has(.takemon-fv)
.tm-vip:hover .tm-vip-arrow,

body:has(.takemon-fv)
.tm-vip:focus-visible .tm-vip-arrow {
  opacity: 1;
  transform: translateX(3px);
}

body:has(.takemon-fv) .tm-vip:focus-visible {
  outline: 1px solid #272925;
  outline-offset: 4px;
}


/* =========================================================
   10. タブレット・スマートフォン
       固定メニューと固定CTAを非表示
   ========================================================= */

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

  .takemon-fv__side-menu,
  .tm-vip {
    display: none !important;
  }
}


/* =========================================================
   11. モバイル文字サイズ
   ========================================================= */

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

  /* スマホのrem基準を標準的な16pxへ調整 */
  html {
    font-size: 16px !important;
  }


  /* 本文 */

  body .post_content
  .takemon-section
  .takemon-section__body p,

  body .post_content
  .takemon-philosophy__closing,

  body .post_content
  .takemon-information__item dd,

  body .post_content
  .takemon-final-cta__message {
    font-size: 16px !important;
    line-height: 2.15 !important;
    letter-spacing: 0.04em !important;
  }


  /* セクションH2 */

  body .post_content
  .takemon-section
  .takemon-section__title {
    font-size: clamp(24px, 6.5vw, 28px) !important;
    line-height: 1.65 !important;
    letter-spacing: 0.05em !important;
  }


  /* 英字見出し */

  body .post_content
  .takemon-section__eyebrow,

  body .post_content
  .takemon-final-cta__eyebrow {
    font-size: 12px !important;
    line-height: 1.6 !important;
  }


  /* セクション番号 */

  body .post_content
  .takemon-section__meta small {
    font-size: 12px !important;
  }


  /* セクション名 */

  body .post_content
  .takemon-section__meta span {
    font-size: 13px !important;
  }


  /* 食べる・知る・分かち合う */

  body .post_content
  .takemon-philosophy__values li {
    font-size: 15px !important;
    line-height: 1.6 !important;
  }


  /* PHILOSOPHY最後の強調文 */

  body .post_content
  .takemon-philosophy__closing span {
    font-size: 19px !important;
    line-height: 1.8 !important;
  }


  /* コース・店舗情報 */

  body .post_content
  .takemon-course__item dt,

  body .post_content
  .takemon-information__item dt {
    font-size: 13px !important;
  }

  body .post_content
  .takemon-course__item dd {
    font-size: 16px !important;
  }

  body .post_content
  .takemon-course__note {
    font-size: 14px !important;
  }


  /* Google Mapリンク */

  body .post_content
  .takemon-information__map-link {
    font-size: 12px !important;
  }


  /* 最後のCTA */

  body .post_content
  .takemon-final-cta__button span {
    font-size: 16px !important;
  }

  body .post_content
  .takemon-final-cta__button small {
    font-size: 12px !important;
  }


  /* 電話予約 */

  body .post_content
  .takemon-final-cta__telephone p {
    font-size: 15px !important;
  }

  body .post_content
  .takemon-final-cta__telephone a {
    font-size: 22px !important;
  }


  /* ファーストビューのブランドコピー */

  body .post_content
  .takemon-fv__copy {
    font-size: 16px !important;
    line-height: 1.9 !important;
  }
}


/* =========================================================
   12. 動きを減らす設定
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .takemon-fv__side-menu .takemon-fv__side-nav a,
  .takemon-fv__side-menu .takemon-fv__side-nav a::after,
  .tm-vip,
  .tm-vip-arrow {
    transition: none !important;
  }
}

/* =========================================================
   タブレット・スマホ：PC固定パーツを完全非表示
   必ず追加CSSの一番最後に置く
   ========================================================= */

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

  html .takemon-fv__side-menu,
  html .tm-fixed-slot .takemon-fv__side-menu,
  html .tm-vip,
  html .tm-fixed-slot .tm-vip,
  html .takemon-vip-cta {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;

    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }
}