/* =========================================
   ATOM custom styles (ordered to minimize conflicts)
   Order: Utilities → Components → Layout → Motion
   ========================================= */

/* =========================================
   1) UTILITIES
   - ミニユーティリティや小粒の色/余白ヘルパー
   ========================================= */
/* Padding: 上下のみ可変 */
.pad5  { padding: 5px 0 !important; }
.pad10 { padding: 10px 0 !important; }
.pad15 { padding: 15px 0 !important; }
.pad20 { padding: 20px 0 !important; }

/* 段落背景あり + 余白ユーティリティ（強め） */
p.has-background[class*="-background-color"].pad5  { padding: 5px 0 !important; }
p.has-background[class*="-background-color"].padtel{ padding: 3px 0 7px !important; }

/* 単色アイコン（テーマ色/指定色） */
.icon-color1.swl-inline-icon { color: var(--color_main, currentColor) !important; }
.icon-color2.swl-inline-icon { color: #00B0B0 !important; }

/* 背景透過のバリエーション */
.has-white-background-color.has-background { background-color: rgba(255,255,255,0.75) !important; }
.has-red-background-color.has-swl-main-background-color.has-background { background-color: rgba(176,0,0,0.8) !important; }

/* 角丸ユーティリティ */
.yosumimaru  { border-radius: 17px; }
.yosumimaru2 { border-radius: 65px; }

/* 円形化ユーティリティ */
.circle { border-radius: 50%; }

/* =========================================
   2) COMPONENTS
   - ボタン、アコーディオン、テーブル等のパーツ
   ========================================= */
/* ストライプ背景（汎用） */
.is-style-bg_stripe2{
  background-size: 7px 7px;
  background-image: linear-gradient(
    -45deg,
    transparent 35%,
    rgba(255,255,255,0.2) 35%,
    rgba(255,255,255,0.2) 50%,
    transparent 50%,
    transparent 85%,
    rgba(255,255,255,0.2) 85%,
    rgba(255,255,255,0.2) 100%
  ) !important;
}

/* ストライプの被せ（ボタン限定） */
.btn-stripe .wp-block-button__link{ position:relative; overflow:hidden; }
.btn-stripe .wp-block-button__link::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background-size:7px 7px;
  background-image:linear-gradient(
    -45deg,
    transparent 35%,
    rgba(255,255,255,0.2) 35%,
    rgba(255,255,255,0.2) 50%,
    transparent 50%,
    transparent 85%,
    rgba(255,255,255,0.2) 85%,
    rgba(255,255,255,0.2) 100%
  );
}

/* アコーディオン（都道府県別カラー） */
.my-accordion-tokyo   .swell-block-accordion__title{ background:#f35c80; color:#fff; }
.my-accordion-kanagawa .swell-block-accordion__title{ background:#26bdef; color:#fff; }
.my-accordion-saitama  .swell-block-accordion__title{ background:#29ab40; color:#fff; }
.my-accordion-tokyo   .swell-block-accordion__icon,
.my-accordion-kanagawa .swell-block-accordion__icon,
.my-accordion-saitama  .swell-block-accordion__icon{ color:#fff; }

/* アコーディオン個別色（ピンク） */
.swell-block-accordion__label.accordion_label_pink{ background-color:#f35c80 !important; }

/* テーブル中央寄せ（figure幅をテーブルに合わせる） */
.wp-block-table.aligncenter{ margin-left:auto; margin-right:auto; width:fit-content; }

/* 教室長プロフィール 白字化（領域限定） */
.acmp-area[data-acmp-area="area10"] .acmp-area10--white,
.acmp-area[data-acmp-area="area10"] .acmp-area10--white *{ color:#fff !important; }

/* =========================================
   3) LAYOUT
   - レイアウト・配置・レスポンシブ関連
   ========================================= */
/* フローティング（SPのみ） */
@media (max-width: 959.98px){
  .footer-floating{
    position:fixed !important;
    left:max(0px, env(safe-area-inset-left));
    right:max(0px, env(safe-area-inset-right));
    bottom:-100px; /* 修正済み: -100px */
    z-index:2147483647 !important;
    visibility:hidden; opacity:0; transform:none;
    background-color:rgba(255,255,255,0.6) !important;
    -webkit-backdrop-filter:saturate(180%) blur(12px);
    backdrop-filter:saturate(180%) blur(12px);
    box-shadow:0 6px 24px rgba(0,0,0,0.12);
    padding:5px 5px calc(5px + env(safe-area-inset-bottom)) 5px !important;
    margin:0 !important;
  }
  /* スクロールで出す */
  [data-scrolled="true"] .footer-floating{
    bottom:0; opacity:1; visibility:visible;
    transition: bottom .2s ease, opacity .2s ease, visibility 0s linear 0s;
  }
  /* 内側のズレ抑制 */
  .footer-floating .swell-block-fullWide__inner,
  .footer-floating .l-container,
  .footer-floating .swell-block-columns{ padding:0 !important; margin:0 !important; }
  /* ボタン行の左右余白 */
  .footer-floating .wp-block-buttons{ gap:6px !important; }
  /* SWELLの「トップへ戻る」などを回避 */
  .p-fixBtnWrap{ bottom: calc(6em + env(safe-area-inset-bottom, 0px)); }
}

/* ------------------------------
   右端固定縦書きボタン（PCのみ・矢印なし・浮かせ・ホバー拡大）
------------------------------- */
.follow-banner {
  position: fixed !important;
  top: 60% !important;           /* 少し上に配置 */
  right: 0 !important;            /* 右端にくっつける */
  transform: translateY(-50%) !important;
  display: grid !important;
  gap: 8px !important;            /* ボタン間隔 */
  justify-items: end !important;  /* ボタン右揃え */
  width: max-content !important;
  z-index: 9999 !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: auto;
}

/* スマホ非表示 */
@media (max-width: 599px){
  .follow-banner { display: none !important; }
}

/* ボタン幅リセット */
.follow-banner .wp-block-buttons {
  margin: 0 !important;
}

.follow-banner .wp-block-button,
.follow-banner [class*="wp-block-button__width-"]{
  width: auto !important;
  max-width: none !important;
  flex: none !important;
  align-self: auto !important;
}

/* ボタン本体：縦書き＋浮かせ＋ホバー拡大 */
.follow-banner .wp-block-button__link {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  box-sizing: border-box !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  writing-mode: vertical-rl !important;  
  -webkit-writing-mode: vertical-rl !important;
  text-orientation: upright !important;  
  white-space: normal !important;

  font-feature-settings: "vert" !important;
  line-height: 1.2 !important;

  inline-size: auto !important;  
  padding: 0.6em 0.5em !important;

  /* 左上・左下を丸く、右上・右下は角ばらせる */
  border-radius: 12px 0 0 12px !important;

  box-shadow: 0 4px 12px rgba(0,0,0,0.25) !important;
  transition: transform 0.15s, box-shadow 0.15s !important;
}

.follow-banner .wp-block-button__link:hover {
  transform: scale(1.10) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,0.3) !important;
}

/* ------------------------------
   右端固定縦書きボタン（PCのみ・矢印なし・浮かせ・ホバー拡大）
------------------------------- */
#custom_html-3 .follow-banner {
  position: fixed !important;
  top: 60% !important;           /* 少し上に配置 */
  right: 0 !important;            /* 右端にくっつける */
  transform: translateY(-50%) !important;
  display: grid !important;
  gap: 8px !important;            /* ボタン間隔 */
  justify-items: end !important;  /* ボタン右揃え */
  width: max-content !important;
  z-index: 9999 !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: auto;
}

/* スマホ非表示 */
@media (max-width: 599px){
  #custom_html-3 .follow-banner { display: none !important; }
}

/* ボタン本体：縦書き＋浮かせ＋ホバー拡大 */
#custom_html-3 .follow-banner a.wp-block-button__link {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  box-sizing: border-box !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  writing-mode: vertical-rl !important;  
  -webkit-writing-mode: vertical-rl !important;
  text-orientation: upright !important;  
  white-space: normal !important;

  font-feature-settings: "vert" !important;
  line-height: 1.2 !important;

  inline-size: auto !important;  
  padding: 0.6em 0.5em !important;

  /* 左上・左下を丸く、右上・右下は角ばらせる */
  border-radius: 12px 0 0 12px !important;

  box-shadow: 0 4px 12px rgba(0,0,0,0.25) !important;
  transition: transform 0.15s, box-shadow 0.15s !important;
}

/* ホバーで少し拡大 */
#custom_html-3 .follow-banner a.wp-block-button__link:hover {
  transform: scale(1.10) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,0.3) !important;
}

/* =========================================
   4) MOTION
   - アニメーション/キーフレーム
   ========================================= */
/* ふわふわ（ゆっくり） */
.fuwafuwa2{
  animation-name:fuwafuwa;
  animation-delay:0s; animation-duration:5s; animation-timing-function:linear; animation-iteration-count:infinite;
}
@keyframes fuwafuwa{
  0%{ transform:translateY(0); }
  50%{ transform:translateY(25px); }
  100%{ transform:translateY(0); }
}

/* ふわふわ（小さめ往復） */
.fuwafuwa3{ animation:fuwafuwa3 2.5s ease-in-out infinite; will-change:transform; }
@keyframes fuwafuwa3{
  0%{ transform:translateY(0); }
  50%{ transform:translateY(5px); }
  100%{ transform:translateY(0); }
}

.single-classroom .c-postTitle {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* =============================== 
   ACMP classroom adjustments (external, final)
   =============================== */

/* 1) 教室ページ：公開日・更新日・メタ類を非表示 */
body.single-classroom .c-postTitle__meta,
body.single-classroom .p-articleMetas,
body.single-classroom time.c-postTimes__posted,
body.single-classroom time.c-postTimes__modified,
body.single-classroom .p-articleMetas__item.-date,
body.single-classroom .p-articleMetas__item.-update {
  display: none !important;
}

/* 2) パンくず直下の余白統一（パンくず自体は下余白ゼロ、次要素に付与） */
body.single-classroom .l-content,
body.single-classroom #content.l-content,
body.single-classroom .l-mainContent,
body.single-classroom .mainContent__inner,
body.single-classroom .post_content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
body.single-classroom .c-breadcrumb,
body.single-classroom .p-breadcrumb {
  margin-bottom: 0 !important;
}
@media (min-width: 769px) {
  body.single-classroom :is(.c-breadcrumb, .p-breadcrumb) + * {
    padding-top: 12px !important;
  }
}
@media (max-width: 768px) {
  body.single-classroom :is(.c-breadcrumb, .p-breadcrumb) + * {
    padding-top: 8px !important;
  }
}

/* 3) area1（教室名）直下の微調整 */
body.single-classroom .acmp-area.l-article.post_content[data-acmp-area="area1"] {
  margin-bottom: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

/* 4) SP時、area4のフルワイド内側パディング */
@media (max-width: 768px) {
  body.single-classroom .acmp-area[data-acmp-area="area4"] .swell-block-fullWide__inner {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* 5) ブロックテーブル横スクロール */
body.single-classroom .acmp-area .wp-block-table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
body.single-classroom .acmp-area .wp-block-table table {
  width: max-content !important;
  table-layout: auto !important;
}
body.single-classroom .acmp-area .wp-block-table.is-all-centered table {
  margin-left: 0;
  margin-right: 0;
}

/* 6) details 開閉補助 */
body.single-classroom details[open] .acmp-acc-body {
  display: block;
}
body..acmp-area[data-acmp-area="area1"] .acmp-city {
  display: flex;
  align-items: flex-end;   /* 縦方向の下寄せ */
}