/**
Theme Name: Dream Music Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dream-music-child
Template: astra
*/

/* 全体に筑紫A丸ゴシックを適用 */
body,
h1, h2, h3, h4, h5, h6,
p, a, li, span, div,
button, input, select, textarea {
    font-family: "fot-tsukuardgothic-std", "Hiragino Maru Gothic ProN", "Yu Gothic UI", "Meiryo", sans-serif !important;
	font-weight: 700;
}
/* フォント読み込み中はページを透明にする */
html.wf-loading body {
    visibility: hidden;
}

/* 読み込み完了（または失敗時）にパッと表示する */
html.wf-active body,
html.wf-inactive body {
    visibility: visible;
}
/* レギュラーフォントにしたいときはこのクラスを追加する */
.regular-font {
    font-weight: 400 !important;
    /* 勝手に入る余白をリセット */
    padding-inline-start: 0 !important;
    padding-inline-end: 0 !important;
    padding-block-start: 0 !important;
    padding-block-end: 0 !important;
    /* 必要なら両端揃えも解除（左揃えに戻す） */
    text-align: left !important;
}
/* DM専用：レギュラーフォント設定 */
.dm_regular-font {
    font-weight: 400 !important;
    padding: 0 !important;
    text-align: left; /* 基本は左揃え、必要ならElementor側で変える */
}
/* コピーの下の黄色いアンダーライン */
.bold-font {
	font-weight: 700;
}
/*黄色いアンダーラインやり直し*/
/* マーカー風アンダーラインのCSS */
.marker-line {
    /* 透明から始まり、下から40%の位置から色をつける（太さの調整） */
    background: linear-gradient(transparent 60%, #f9e799 60%);
    /* テキストの折り返しに綺麗に対応させるためのおまじない */
    display: inline;
    padding-bottom: 2px; /* 必要に応じて下部の余白を調整 */
}
/* 教室コンテナの幅をFIXする */
.fixed-box {
  flex: 0 0 536px;
}
/* フッターのコンテナの間に点線を入れる*/
.footer-col {
  border-right: 5px dotted #40210d;
  padding-right: 40px;
}

.footer-col:last-child {
  border-right: none;
}

/* 画像をスクロールさせる */
.logo-slider {
  overflow: hidden;
  width: 100%;
}

.logo-track {
  display: flex;
  width: calc(200%); /* 2倍 */
  animation: scroll 20s linear infinite;
}

.logo-track img {
  width: 9.3%; /* 5枚見せたいなら */
  flex-shrink: 0;
}

/* アニメーション */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
/* スライド画像間に余白*/
.logo-track img {
  margin-right: 10px;
}
  }
/* カルーセル設定 */
.voice-carousel {
    position: relative;
}
.voice-carousel a.carousel-arrow.carousel-prev,
.voice-carousel a.carousel-arrow.carousel-next {
    position: absolute !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
}

.voice-carousel a.carousel-arrow.carousel-prev {
    left: calc(50% - 300px) !important;
}

.voice-carousel a.carousel-arrow.carousel-next {
    left: calc(50% + 300px) !important;
}
.voice-carousel .premium-carousel-template.item-wrapper.slick-slide {
    margin: 0 70px !important;
}
.koe_box {
	width: 462px;
}
/* header部分のボタンを装飾*/
.ast-custom-button {
  box-shadow: 2px 6px 0 #9b181d;
}

.ast-custom-button {
  position: relative;
  padding-left: 70px !important;
}
.ast-custom-button::before {
  content: "";
  position: absolute;
  left: 30px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  background: #fff;
  border-radius: 50%;
}

.ast-custom-button::after {
  content: "";
  position: absolute;
  left: 43px;
  top: 50%;
  transform: translate(-50%, -50%);
  border-left: 8px solid #e60012;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}
.ast-custom-button:active {
  transform: translateY(6px);
  box-shadow: 2px 0 0 #9b181d;
}
/* Menu 点線区切りを入れる*/
.main-header-menu > .menu-item {
  position: relative;
}

.main-header-menu > .menu-item > a {
  margin: 0 !important;
  padding-left: 32px;
  padding-right: 32px;
}

.main-header-menu > .menu-item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  height: 42px;
  border-right: 3px dotted #c9c9c9;
}
/*サブメニューの下向き矢印を消す*/
.main-header-menu .menu-item-has-children > a .ast-icon.icon-arrow {
  display: none !important;
}
/*サブメニューのデザイン崩れを直す*/
.main-header-menu .sub-menu {
  width: 240px;
  min-width: 240px;
}
.main-header-menu .sub-menu {
  padding: 8px 0;
}

.main-header-menu .sub-menu li a {
  padding: 10px 20px;
  font-size: 14px;
}

.main-header-menu .sub-menu li a:hover {
  background: #dcdcdc;
}
/*ヘッダー上部にレインボー背景を入れる*/
#masthead {
  position: relative;
  background: #f6ede1;
}

#masthead::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background-image: url("https://stg.colin-design.com/wp-content/uploads/2026/04/rainbow.webp");
  background-repeat: repeat-x;
  background-position: top center;
  background-size: auto 5px;
  z-index: 20;
}
/*tablet menu設定*/
@media (max-width: 1024px) {
  .main-header-menu > .menu-item > a {
    font-size: 13px;
    padding-left: 16px;
    padding-right: 16px;
  }
}
/* tablet CTA-button設定 */
@media (max-width: 1024px) {
  .ast-custom-button {
    padding: 12px 28px 12px 56px !important;
    font-size: 14px;
  }

  .ast-custom-button::before {
    left: 20px !important;
  }

  .ast-custom-button::after {
    left: 33px !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
  }
}
/*tablet 3行コピーを小さくする*/
@media (max-width: 1024px) {
  .ast-header-html-1 div {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
}
/*tablet用背景画像の高さ調整*/
@media (max-width: 1024px) {
.kv_height_tab {
	height: 500px!important;
	min-height: 500px!important;
	}
}
/*スマホ用CTA*/
@media (max-width: 768px) {
  .ast-custom-button {
    padding: 10px 20px 10px 48px !important;
    font-size: 13px;
    border-radius: 999px;
  }

  .ast-custom-button::before {
    width: 20px;
    height: 20px;
    left: 14px;
  }

  .ast-custom-button::after {
    left: 27px;
    border-left: 6px solid #e60012;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
  }
}
@media (max-width: 768px) {
  .ast-custom-button {
    box-shadow: none;
  }
}
@media (max-width: 768px) {
  .ast-custom-button {
    padding: 8px 16px 8px 30px !important;
    font-size: 12px;
    white-space: nowrap;
  }

  .ast-custom-button::before {
    width: 18px;
    height: 18px;
    left: 4px!important;
  }

  .ast-custom-button::after {
    left: 13px!important;
    top: 50%;
    transform: translate(-50%, -50%);
    border-left: 5px solid #e60012;
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
  }
}
/*スマホのハンバーガーメニューの中*/
.ast-off-canvas-menu .menu-item a {
  font-size: 16px;
  padding: 14px 0;
}
.ast-off-canvas-menu .menu-item {
  border-bottom: 1px solid #e5e5e5;
}
.ast-off-canvas-menu .menu-item a {
  color: #5a3e2b;
}
.ast-off-canvas-menu .ast-close-menu {
  border: none;
  background: none;
}
html, body {
  overflow-x: hidden;
}
/*スマホ用ボタン配置*/
@media (max-width: 768px) {
  .ast-builder-grid-row-container.ast-builder-grid-row-mobile-3-columns {
    grid-template-columns: auto 1fr auto !important;
    align-items: center;
  }

  .site-header-primary-section-left {
    justify-content: flex-start;
  }

  .site-header-primary-section-right {
    justify-content: flex-end;
  }
}

/*スマホ用スライダー部分*/
@media (max-width: 767px) {
  .logo-track img {
    width: 18.6%;
  }
}
/* ========================================
   Footer 共通設定
======================================== */

/* フッター全体の横幅 */
.ast-footer .footer-widget-area {
  max-width: 1100px;
  margin: 0 auto;
}

/* 各カラム内の左右余白 */
.ast-footer .footer-widget-area > div {
  padding: 0 20px;
  position: relative;
}

/* 青いタイトルボタン */
.footer-title {
  display: inline-block;
  background: #1e4fa3;
  color: #fff;
  padding: 12px 24px;
  border-radius: 30px;
  text-align: center;
}

/* フッター全体の上下余白 */
.ast-footer {
  padding: 40px 20px;
}

/* フッターグリッドの基準 */
.ast-builder-footer-grid-columns {
  position: relative;
}

/* 各セクション上部の微調整 */
.site-footer-primary-section-2,
.site-footer-primary-section-3,
.site-footer-primary-section-4 {
  padding-top: 6px;
}

/* 各見出しの上余白をなくし、高さをある程度そろえる */
.site-footer-primary-section-2 p:first-child,
.site-footer-primary-section-3 p:first-child,
.site-footer-primary-section-4 p:first-child {
  margin-top: 0;
  min-height: 33px;
}

/* セクション2・3の見出し文字サイズ */
.site-footer-primary-section-2 section:first-child p,
.site-footer-primary-section-3 section:first-child p {
  font-size: 23px;
  font-weight: 600;
}

/* 見出し下の余白 */
.site-footer-primary-section-2 section:first-child p,
.site-footer-primary-section-3 section:first-child p,
.site-footer-primary-section-4 p:first-child {
  margin-bottom: 10px;
}


/* ========================================
   PC表示（1025px以上）
   4カラム表示 + 縦の点線
======================================== */
@media (min-width: 1025px) {

  /* 4カラムの比率 */
  .ast-builder-footer-grid-columns {
    display: grid;
    grid-template-columns: 1.6fr 0.9fr 1.1fr 0.9fr;
    column-gap: 40px;
  }

  /* 各カラムの左側に点線を入れるための余白 */
  .site-footer-primary-section-2,
  .site-footer-primary-section-3,
  .site-footer-primary-section-4 {
    position: relative;
    padding-left: 48px;
  }

  /* セクション2〜4の左に縦点線 */
  .site-footer-primary-section-2::before,
  .site-footer-primary-section-3::before,
  .site-footer-primary-section-4::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    height: 220px;
    border-left: 6px dotted #6b4a2e;
    display: block;
  }

  /* Instagramだけ中央寄せ */
  .site-footer-primary-section-4 {
    text-align: center;
  }
}


/* ========================================
   タブレット表示（768px〜1024px）
   1段目：ロゴ
   2段目：3カラム
======================================== */
@media (min-width: 768px) and (max-width: 1024px) {

  /* フッター全体を3カラムに */
  .site-primary-footer-wrap[data-section="section-primary-footer-builder"] 
  .ast-builder-footer-grid-columns {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr !important;
    column-gap: 24px !important;
  }

  /* ロゴ部分を1段目いっぱいに表示 */
  .site-footer-primary-section-1 {
    grid-column: 1 / -1;
    margin-bottom: 40px;
  }

  /* 2段目3カラムの余白調整 */
  .site-footer-primary-section-2,
  .site-footer-primary-section-3,
  .site-footer-primary-section-4 {
    position: relative;
    padding-left: 24px;
  }

  /* 2列目・3列目の左に点線 */
  .site-footer-primary-section-3::before,
  .site-footer-primary-section-4::before {
    content: "";
    position: absolute;
    left: 0;
    top: 24px;
    bottom: 12px;
    height: auto;
    border-left: 4px dotted #6b4a2e;
  }

  /* copyright を中央寄せ */
  .site-below-footer-wrap {
    text-align: center;
    padding-top: 0;
  }

  .site-below-footer-wrap .ast-builder-grid-row {
    display: block;
  }

  .site-below-footer-wrap .site-footer-section {
    justify-content: center;
    text-align: center;
  }
}

/* ========================================
   スマホ表示（767px以下）
   縦並び + 余白 + 可読性調整
======================================== */
@media (max-width: 767px) {

  /* =========================
     レイアウト：縦並び化
  ========================= */
  .ast-builder-footer-grid-columns {
    display: block;
  }

  /* 各セクションの余白と中央寄せ */
  .site-footer-primary-section-1,
  .site-footer-primary-section-2,
  .site-footer-primary-section-3,
  .site-footer-primary-section-4 {
    margin-bottom: 32px;
    text-align: center;
  }

  /* セクション2〜4の上余白 */
  .site-footer-primary-section-2,
  .site-footer-primary-section-3,
  .site-footer-primary-section-4 {
    padding-top: 24px;
  }

  /* =========================
     見出し調整
  ========================= */
  .site-footer-primary-section-2 p:first-child,
  .site-footer-primary-section-3 p:first-child,
  .site-footer-primary-section-4 p:first-child {
    margin-bottom: 8px;
  }

  /* =========================
     メニュー・リストの可読性
  ========================= */

  /* Astraの中央寄せを打ち消す */
  .footer-widget-area[data-section="sidebar-widgets-footer-widget-1"].footer-widget-area-inner,
  .footer-widget-area[data-section="sidebar-widgets-footer-widget-2"].footer-widget-area-inner {
    text-align: left !important;
  }

  /* 行間（タップしやすさ改善） */
  .site-footer-primary-section-2 .widget_text p,
  .site-footer-primary-section-3 p {
    line-height: 2.2;
  }

  /* 左揃えのまま中央寄り配置 */
  .site-footer-primary-section-2 p,
  .site-footer-primary-section-3 p {
    max-width: 200px;
    margin-left: auto;
    margin-right: auto;
  }

  /* =========================
     ロゴ＋青タイトル
  ========================= */

  .site-footer-primary-section-1 .footer-col-logo {
    text-align: center;
  }

  .site-footer-primary-section-1 .footer-logo-title {
    text-align: center;
    margin-top: 12px;
  }

  .site-footer-primary-section-1 .footer-logo-title .footer-title {
    display: inline-block;
    width: auto;
    max-width: none;
    white-space: nowrap;
  }

  /* =========================
     フッター全体の左右余白（Astra上書き）
  ========================= */
  .site-primary-footer-wrap[data-section="section-primary-footer-builder"] .ast-builder-grid-row {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* copyright の余白 */
  .site-below-footer-wrap .ast-builder-grid-row {
    padding-left: 20px;
    padding-right: 20px;
  }
}

  /* =========================
    下部ページ：ピアノ
  ========================= */
/* ===========================================
   料金表・スケジュール表：共通設定
   =========================================== */

/* 1. 外枠：中央寄せと最大幅の制限 */
.table-container-box {
    display: block !important;
    margin: 0 auto !important;
    max-width: 683px !important;
    width: 100% !important;
}

/* 2. 横スクロール用の枠：スマホでの防波堤 */
.excel-table-wrapper {
    display: block !important;
    width: 100% !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 15px;
    clear: both;
}

/* 3. テーブル本体：謎のクラス（regular-font）対策を含む */
table.fixed-design-table,
.fixed-design-table.regular-font {
    display: table !important;
    width: 100% !important;
    max-width: 683px !important;
    min-width: 600px; /* スマホでスクロールさせるための最低幅 */
    table-layout: auto !important; /* 2列・3列に自動対応 */
    border-collapse: collapse;
    border: 1px solid #47331c;
    font-size: 16px;
    background-color: #ffffff;
    margin: 0 auto !important;
}

/* 4. セル共通設定：左右中央揃えを追加 */
.fixed-design-table th, 
.fixed-design-table td {
    border: 1px solid #47331c;
    padding: 20px 10px;
    vertical-align: middle;
    text-align: center; /* ★左右中央揃え */
    box-sizing: border-box;
    color: #47331c;
    width: auto !important;
}

/* 曜日列（スケジュール表）の個別設定 */
.fixed-design-table th.side-header {
    width: 30% !important;
    background-color: #f6ede1 !important;
    font-weight: normal;
}

/* 料金表のヘッダー色 */
.fixed-design-table thead th {
    background-color: #f6ede1 !important;
}

/* ===========================================
   スマホ表示調整（767px以下）
   =========================================== */
@media (max-width: 767px) {
    .excel-table-wrapper {
        max-width: 100vw !important;
    }

    .fixed-design-table {
        width: 600px !important; 
        min-width: 600px !important;
    }

    .fixed-design-table th, 
    .fixed-design-table td {
        white-space: nowrap !important; /* 文字の折り返しを防ぐ */
        padding: 15px 10px !important;
    }
}

/* --- 共通の縁取り設定（Elementor 3 & 4 両対応） --- */

/* 1. 以前のバージョン用 (Elementor 3など) */
.perfect-stroke .elementor-heading-title,
/* 2. 新しいバージョン用 (Elementor 4 コンテナ構造など) */
.perfect-stroke.e-heading-base,
.perfect-stroke.elementor-heading-title {
    color: #ffffff !important;
    text-shadow: 
        2px 0 0 #ded207, -2px 0 0 #ded207, 0 2px 0 #ded207, 0 -2px 0 #ded207,
        1.4px 1.4px 0 #ded207, -1.4px 1.4px 0 #ded207, 1.4px -1.4px 0 #ded207, -1.4px -1.4px 0 #ded207,
        1.8px 0.8px 0 #ded207, 1.8px -0.8px 0 #ded207, -1.8px 0.8px 0 #ded207, -1.8px -0.8px 0 #ded207,
        0.8px 1.8px 0 #ded207, 0.8px -1.8px 0 #ded207, -0.8px 1.8px 0 #ded207, -0.8px -1.8px 0 #ded207,
        1px 1.7px 0 #ded207, 1px -1.7px 0 #ded207, -1px 1.7px 0 #ded207, -1px -1.7px 0 #ded207;
    filter: drop-shadow(0 0 0.5px #ded207);
}

  /* =========================
    TOPページ：H2
  ========================= */
/* 見出し全体の設定 */
h2.point-heading span.sub-label {
    display: block !important; 
    background-color: #003e97 !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: bold !important;
    width: fit-content !important;           /* 幅が100%にならないように固定 */
    margin: 0 auto 40px !important;
    padding: 9px 40px !important;
    border-radius: 50px !important;   /* これで角丸を復活させます */
    letter-spacing: 0.1em !important;
    line-height: 1 !important;        /* 行間をリセット */
}

h2.point-heading {
    display: block !important;
    text-align: center !important;
    color: #47331c !important;
    line-height: 1.4 !important;
	font-size: 37px;
	margin-bottom: 40px;
}
/* タイトル部分だが、小さい文字 */
h2.point-heading span.sm_heading {
	display: block !important; 
	font-size: 20px !important;
	line-height: 1.4 !important;
}
/* 画面幅が767px以下の時に適用されるルール */
@media (max-width: 767px) {

    /* 下の見出しテキストを小さくする */
    h2.point-heading {
        font-size: 7vw !important; 
		margin-bottom: 10px;
    }

    /* 上のカプセルラベルを小さくする */
    h2.point-heading span.sub-label {
        font-size: 12px !important;   /* 文字を小さく */
        padding: 5px 5px !important; /* カプセル自体も少しスリムに */
        margin-bottom: 10px !important; /* 下との隙間も少し詰める */
		line-height: 1.4em;
    }
	/* カルーセルを包んでいる全ての親要素をスマホ幅に強制する */
.elementor-element-365d916, /* 検証ツールで見えたID */
.premium-carousel-wrapper,
.premium-carousel-inner,
.premium-carousel-template {
    width: 100% !important;
    max-width: 100vw !important; /* 画面幅いっぱいに制限 */
    min-width: 0 !important;    /* 固定幅を解除 */
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: hidden !important; /* はみ出しをカット */
}

/* テンプレートの中身も100%にする */
.premium-carousel-template .elementor-section,
.premium-carousel-template .elementor-container {
    width: 100% !important;
    max-width: 100% !important;
}
	/* --- スライダーの文字はみ出し対策 --- */
    .elementor-widget-text-editor, 
	.elementor-widget-text-editor p {
   　 white-space: normal !important;      /* 「改行しない」という設定を完全に無効化 */
    　word-break: break-all !important;   /* どこでも強制的に折り返す（一番強力） */
    　overflow-wrap: anywhere !important; /* どんな隙間でも折り返す */
    　display: block !important;
    　width: 100% !important;
    　max-width: 100% !important;
    　margin: 0 !important;
}
}
  /* =========================
    下部ページ：H2
  ========================= */
h2.point-heading-kabu span.sub-label-kabu{
	display: block !important; 
    font-size: 16px !important;
    margin: 0 auto 20px !important;
    padding: 0 !important;
    letter-spacing: 0.05em !important;
    line-height: 1 !important;  
	  text-align: center !important;
}

h2.point-heading-kabu {
    display: block !important;
    text-align: center !important;
    color: #47331c !important;
    line-height: 1.4 !important;
	font-size: clamp(20px, 2.5vw, 37px);
	letter-spacing: 0.05em !important;
	margin-bottom: 17px;
}
/* タイトル部分だが、小さい文字 */
h2.point-heading-kabu span.sm_heading-kabu {
	display: block !important; 
	font-size: 20px !important;
	line-height: 1.4 !important;
}
/* 画面幅が767px以下の時に適用されるルール */
@media (max-width: 767px) {

    /* 下の見出しテキストを小さくする */
    h2.point-heading-kabu {
        font-size: 7vw !important; 
		
    }
    h2.point-heading-kabu span.text-spacing {
      letter-spacing: -0.1em !important;
    }
}

/*コース紹介の正円 */
.circle-course {
    aspect-ratio: 1 / 1 !important;
    width: 45% !important;
    max-width: 436px !important;
    height: auto !important;
    margin: 0 auto !important;
}
.circle-content-top {
    height: 50% !important; /* 親の半分を占有 */
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important; /* 上下中央 */
    align-items: center !important;    /* 左右中央 */
    padding: 1% 10% 0 10% !important; /* 内側にゆとりを作る */
    box-sizing: border-box !important;
}
.circle-content-bottom {
    height: 50% !important; /* 残りの半分を占有 */
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    padding: 5% 10% 10% 10% !important;
    box-sizing: border-box !important;
}
/* --- 修正版：スマホ用メディアクエリの中を書き換え --- */
@media (max-width: 767px) {
    .circle-course {
        aspect-ratio: 1 / 1 !important;
        width: 100% !important;
        max-width: 310px !important;
        height: auto !important;
        margin: 0 auto !important;
        /* 追加：子供を縦に並べる設定を親にも持たせる */
        display: flex !important;
        flex-direction: column !important;
    }

    .circle-content-top {
        /* height: 50% をやめて flex: 1 に変更 */
        flex: 1 !important; 
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 0% 10% 0% 10% !important;
        box-sizing: border-box !important;
    }

    .circle-content-bottom {
        /* height: 50% をやめて flex: 1 に変更 */
        flex: 1 !important; 
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: center !important;
        padding: 3% 10% 0% 10% !important;
        box-sizing: border-box !important;
        /* 念のため中身がはみ出ても見えるようにする */
        overflow: visible !important; 
    }
}

/* 背景画像ト音記号の配置 */
/* 1. 親コンテナ：背景を透明にし、重なり順の基準にする */
body .bg-decor-container {
    position: relative !important;
    width: 100% !important;
    overflow: hidden !important; /* はみ出しをカット */
    z-index: 1 !important;        /* 基準値 */
    
    /* 💥ここが最重要：Elementor側で設定した背景色をCSSで強制的に消します */
    background: transparent !important; 
    background-color: transparent !important;
}

/* 2. 疑似要素共通：テキストの裏へ回す準備 */
body .bg-decor-container::before,
body .bg-decor-container::after {
    content: "" !important;
    position: absolute !important;
    display: block !important;
    
    /* 文字の裏側に回す設定。親の背景が透明ならこれで消えません */
    z-index: -1 !important; 
    
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    pointer-events: none !important; /* クリックの邪魔をしない */
}

/* 3. 左側のト音記号 */
body .bg-decor-container::before {
    top: 30% !important;
    transform: translateY(-50%) !important;
    left: 50% !important;
    margin-left: -600px !important; /* 寄り添い具合を調整 */
    width: 282px !important;
    height: 476px !important;
    background-image: url('https://xs842539.xsrv.jp/wp/wp-content/uploads/2026/05/toonkigou_left_tomei2.webp') !important;
}

/* 4. 右側のト音記号 */
body .bg-decor-container::after {
    top: 70% !important; /* 左と高さをずらす */
    transform: translateY(-50%) !important;
    right: 50% !important;
    margin-right: -720px !important; /* コンテンツ中央から右へ飛ばす */
    width: 282px !important;
    height: 477px !important;
    background-image: url('https://xs842539.xsrv.jp/wp/wp-content/uploads/2026/05/toonkigou_right_tomei2.webp') !important;
}
/* 画面幅が1024px（タブレット）以下で小さくする */
@media (max-width: 1024px) {
	body .bg-decor-container::before {
		width: 184px !important; /*元の60%*/
    	height: 316px !important;
		margin-left: -500px !important;
	}
    body .bg-decor-container::after {
        width: 133px !important;
    	height: 337px !important;
		margin-right: -430px !important; 
    }
}
@media (max-width: 767px) {
	body .bg-decor-container::before {
		margin-left: -240px !important;
	}
}

/* ト音記号左側だけ */
body .bg-decor-container-left {
    position: relative !important;
    width: 100% !important;
    overflow: hidden !important; /* はみ出しをカット */
    z-index: 1 !important;        /* 基準値 */
    background: transparent !important; 
    background-color: transparent !important;
}
body .bg-decor-container-left::before {
    content: "" !important;
    position: absolute !important;
    display: block !important;
    z-index: -1 !important; 
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    pointer-events: none !important; 
}
/* 3. 左側のト音記号 */
body .bg-decor-container-left::before {
    top: 30% !important;
    transform: translateY(-50%) !important;
    left: 50% !important;
    margin-left: -600px !important; /* 寄り添い具合を調整 */
    width: 307px !important;
    height: 528px !important;
    background-image: url('https://xs842539.xsrv.jp/wp/wp-content/uploads/2026/05/toonkigou_left_tomei2.webp') !important;
}
/* ト音記号右側だけ */
body .bg-decor-container-right {
    position: relative !important;
    width: 100% !important;
    overflow: hidden !important; /* はみ出しをカット */
    z-index: 1 !important;        /* 基準値 */
    background: transparent !important; 
    background-color: transparent !important;
}
body .bg-decor-container-right::after {
    content: "" !important;
    position: absolute !important;
    display: block !important;
    z-index: -1 !important; 
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    pointer-events: none !important; 
}
body .bg-decor-container-right::after {
    top: 70% !important; /* 左と高さをずらす */
    transform: translateY(-50%) !important;
    right: 50% !important;
    margin-right: -600px !important; /* コンテンツ中央から右へ飛ばす */
    width: 282px !important;
    height: 477px !important;
    background-image: url('https://xs842539.xsrv.jp/wp/wp-content/uploads/2026/05/toonkigou_right_tomei2.webp') !important;
}
/* ========================================
   下部ページ：リトミック教室
======================================== */
/* --- メソッド紹介セクションの装飾 --- */

.method-caption {
    text-align: center !important;
    /* 2. フォントを流動的に (最小20px, 推奨2.5vw, 最大37px) */
    font-size: clamp(20px, 2.5vw, 37px); 
    color: #47331c;
    font-weight: bold;
    /* 1. 行間をカプセルに影響させない程度に調整 */
    line-height: 1.5; 
    margin: 20px 0;
}

.method-caption .capsule {
    background-color: #47331c;
    color: #ffffff !important;
    padding: 0.2em 1em; /* pxではなくemにすると文字サイズに連動して便利 */
    border-radius: 50px;
    display: inline-flex; /* 垂直中央を揃えやすくする */
    align-items: center;
    justify-content: center;
    margin: 5px 5px 20px 5px;
    letter-spacing: 0.05em;
    white-space: nowrap; 
}

.method-caption .cross {
    /* ×のサイズも流動的に */
    font-size: clamp(24px, 3vw, 45px);
    display: inline-block;
    margin: 0 10px;
    vertical-align: middle;
}

/* 3. スマホ対応 (767px以下) */
@media (max-width: 767px) {
    .method-caption {
        font-size: 20px; /* スマホでのベースサイズ */
        line-height: 1.2;
    }
    /* カプセルを縦並びにする */
    .method-caption .capsule {
        display: block; 
        margin: 10px auto; /* 中央寄せ */
        width: fit-content; /* 文字幅に合わせる */
        padding: 10px 30px;
    }
    /* × を目立たなくするか、非表示に近い形に */
    .method-caption .cross {
        display: block;
        font-size: 18px;
        margin: 5px 0;
        transform: rotate(90deg); /* 縦並びなので×を＋のように見せるか、お好みで */
    }
}
/* リスミックーコース紹介セクション*/
/* コース名の高さを揃えて中央に配置する */
.course-title {
    /* 1. 高さを固定（2行分が入る高さに設定） */
    min-height: 60px; 

    /* 2. Flexboxにして上下中央に寄せる */
    display: flex;
    align-items: center;      /* 上下中央 */
    justify-content: center;   /* 左右中央（必要であれば） */
    
    /* 3. テキスト自体の設定 */
    margin: 0 !important;      /* 余計な余白を消す */
    text-align: center;
}

/* 見出しタグの中身を調整（Elementorの構造上必要な場合があります） */
.course-title .elementor-heading-title,
.course-title.e-heading-base {
    margin: 0;
    width: 100%;
}
/* リトミック - お母さんの声 */
/* カード全体をFlexboxの縦並びにする */
.voice-card {
    display: flex;
    flex-direction: column;
}

/* 白い本文エリアを「余った分だけ下に膨らませる」設定 */
.voice-card .voice-content {
    flex-grow: 1; /* これが魔法の一行。余白を埋めるように膨らみます */
    display: flex;
    flex-direction: column;
}

/* リトミックとはの画像 */
/* 写真の左右に音符を「近づけて」配置する設定 */
.photo-with-decoration {
    /* 1. まず中央に配置する設定にする */
    position: relative;
    padding: 20px 0; /* 左右のpaddingは不要になります */
    
    background-image: 
        url('https://xs842539.xsrv.jp/wp/wp-content/uploads/2026/05/kazari_onpu_left.webp'), 
        url('https://xs842539.xsrv.jp/wp/wp-content/uploads/2026/05/kazari_onpu_right.webp');
    
    /* 2. 【重要】ここを書き換えます：中央からの距離で指定 */
    /* calc(50% - 330px) = 中央(50%)から左へ350pxずらす */
    /* calc(50% + 350px) = 中央(50%)から右へ350pxずらす */
    background-position: 
        calc(50% - 350px) center, 
        calc(50% + 350px) center;
    
    background-repeat: no-repeat;
    
    /* 飾りのサイズ調整（適宜調整してください） */
    background-size: 213px auto, 262px auto; 
}

/* スマホ版：飾りを小さくするか、位置を調整 */
@media (max-width: 767px) {
    .photo-with-decoration {
        /* スマホでは中央からの距離を狭める */
        background-position: 
            calc(50% - 150px) center, 
            calc(50% + 150px) center;
        background-size: 80px auto, 80px auto; 
    }
}

/* -------------------------------
大人のグループキーボード
--------------------------------*/
/* 吹き出し */
/* 吹き出しのしっぽを作る設定 */
.red-balloon {
    position: relative;
    overflow: visible !important;
    /* Elementorでinline-flexに設定したなら、以下の指定だけでOK */
    display: inline-flex !important; 
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: auto !important;
    min-width: 0;
    max-width: 90%; /* 画面からはみ出さないように */
}

.red-balloon::after {
    content: "";
    position: absolute;
    bottom: -19px; /* 隙間が開く場合は微調整 */
    left: 50%;
    transform: translateX(-50%);
    border-style: solid;
    border-width: 20px 15px 0 15px;
    /* ここの色はElementorで設定した赤と同じにする */
    border-color: #ff0000 transparent transparent transparent; 
    z-index: 10;
}
.red-balloon p {
    display: inline-block; /* これでテキストが中身の幅に縮みます */
    width: auto;           /* 100%をキャンセル */
    margin: 0;             /* 余計な余白をリセット */
}

/* 三角を左に表示 */
/* 吹き出し内の段落設定 */
.balloon-box p {
    margin: 0 !important;
    width: auto !important;
    display: inline-block !important;
    line-height: 1.6;
}

/* 左側の三角形（しっぽ） */
.balloon-box::before {
    content: "";
    position: absolute;
    /* 位置：箱の左端から15px外側へ */
    left: -20px;
    top: 50%;
    transform: translateY(-50%);

    /* 三角形の描画：右側だけ色をつける */
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 13px 23px 13px 0; /* 上・右・下・左 */
    border-color: transparent #f9e799 transparent transparent;
    
    z-index: 10;
    display: block;
}
/* スマホ版（画面幅767px以下）の調整 */
@media (max-width: 767px) {
    
    /* 1. 吹き出し本体の調整 */
    .balloon-box {
        max-width: 100% !important; /* 横幅をいっぱいまで使えるように */
        margin-top: 20px;            /* 上のアイコンとの間に隙間を作る */
    }

    /* 2. 左向きだった三角を消して、上向きの三角を作る */
    .balloon-box::before {
        /* 位置を左端から「中央の上」へ移動 */
        left: 50% !important;
        top: -18px !important;       /* 箱の上に配置 */
        transform: translateX(-50%) !important;

        /* 三角形を「上向き」に書き換える */
        border-width: 0 15px 20px 15px !important; /* 下側だけ色が出るように調整 */
        border-color: transparent transparent #f9e799 transparent !important;
    }
}
/* ========================================
   お問い合わせフォーム
======================================== */

/* フォーム全体の基本設定（文字色とフォント） */
div.wpcf7 {
    font-family: "fot-tsukuardgothic-std", sans-serif !important;
    color: #47331c;
}

/* 各項目の間隔 */
.form-item {
    margin-bottom: 25px;
    text-align: left;
}

/* ラベルの行を横並びに */
.label-row {
    margin: 0 0 8px 0;
    font-weight: bold;
    display: flex;
    align-items: center;
}

/* 必須マーク */
.must {
    background-color: #d14332;
    color: #fff;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 10px;
    font-weight: normal;
    vertical-align: middle;
}

/* 【入力欄】デザイン（四角く、横幅100%、文字をすっきりMediumに） */
div.wpcf7 input[type="text"],
div.wpcf7 input[type="email"],
div.wpcf7 input[type="tel"],
div.wpcf7 textarea,
div.wpcf7 select,
div.wpcf7-response-output {
    font-family: "fot-tsukuardgothic-std", sans-serif !important;
    font-weight: 500 !important;
    color: #47331c !important;
}

/* 入力欄の枠線と幅の個別設定 */
div.wpcf7 input[type="text"],
div.wpcf7 input[type="email"],
div.wpcf7 input[type="tel"],
div.wpcf7 textarea {
    width: 100% !important;
	max-width: 900px;
    border: 1px solid #47331c !important;
    border-radius: 0 !important;
    padding: 12px !important;
    box-sizing: border-box !important;
}

/* 入力中の文字の太さ */
div.wpcf7 input:focus,
div.wpcf7 textarea:focus {
    font-weight: 500 !important;
}

/* ラジオボタンの選択肢の間隔 */
span.wpcf7-list-item {
    margin-left: 0 !important;
    margin-right: 20px !important;
    display: inline-block;
}

/* 同意チェックボックス部分（枠線と背景をなしに） */
.privacy-box, .privacy-row {
    border: none !important;
    background: none !important;
    margin: 20px 0 !important;
    padding: 0 !important;
    text-align: left !important;
}

/* 送信ボタンを囲む行（スピナーの基準点） */
.submit-row {
    position: relative;
    text-align: center !important;
    width: 100% !important;
    display: block !important;
    margin-top: 40px !important;
}

/* スピナーを絶対配置にして、ボタンの位置に干渉させない */
.wpcf7 form.processing .highlight-row .wpcf7-spinner,
.wpcf7-spinner {
    position: absolute;
    margin: 0 !important;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

/* 送信ボタン自体のデザイン（文字色を白に強制固定） */
.wpcf7-submit {
    display: inline-block !important;
    width: auto !important;
    background-color: #d14332 !important;
    color: #ffffff !important; /* ←ここで確実に白に固定しました */
    font-size: 20px !important;
    font-weight: bold !important;
    padding: 12px 30px !important;
    min-width: 200px;
    border: none !important;
    border-radius: 8px !important;
    cursor: pointer;
}

/* ========================================
   タイトル部分（黒い光彩）
======================================== */
h2.title-shadow-contact {
    text-shadow: 
        0 0 4px rgba(0, 0, 0, 0.3),
        0 0 13px rgba(0, 0, 0, 0.25),
        0 0 20px rgba(0, 0, 0, 0.15) 
        !important;
}

/* プライバシーポリシーのスクロール枠 */
.policy-scroll-box {
    margin-top: 15px;
    padding: 15px;
    height: 150px;
    white-space: pre-wrap;
    overflow-y: scroll;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    font-size: 13px;
    line-height: 1.6;
    color: #47331c;
    text-align: left;
}

/* 念のためPタグの余白も殺しておきます */
.policy-scroll-box p {
    margin: 0 !important;
    padding: 0 !important;
}

/* スクロールバーのデザインを少し細くする場合（任意） */
.policy-scroll-box::-webkit-scrollbar {
    width: 8px;
}
.policy-scroll-box::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 10px;
}
.single-post article {
	background-color: var(--ast-global-dark-bg-style)!important;
}