@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* ================================================
   フォント・改行
================================================ */

body {
  font-family: "Poppins", "Noto Sans JP", sans-serif;
}

/* body {
  font-family: "Cormorant Garamond", "Noto Serif JP", serif;
} */

/* body {
  font-family: "Cormorant Garamond", "Noto Sans JP", sans-serif;
} */

/* スマホのみ改行 */
.br-sp {
  display: none;

  @media (max-width: 767.9px) {
    display: inline;
  }
}

/* ================================================
　ヘッダー
================================================ */
/* ヘッダーナビ メニュー間の間隔 */
.c-gnav > .menu-item > a {
  padding: 0 16px;
}

@media (max-width: 1200px) {
  .c-gnav > .menu-item > a {
    padding: 0 14px;
  }
}

@media (max-width: 1080px) {
  .c-gnav > .menu-item > a {
    padding: 0 10px;
  }
}

/* ヘッダーナビのフォントサイズ */
.c-gnav > .menu-item > a .ttl {
  font-size: 16px;
  font-weight: 600;
}

/* ヘッダーロゴのパディング */
@media (min-width: 960px) {
  .-series .l-header__logo {
    padding: 8px 0;
  }
}

/* ヘッダー内の無料体験をボタンに */
.menu-item-555 > a .ttl {
  background-color: #58b5c0;
  color: #fff !important;
  border-radius: 999px;
  padding: 10px 20px;
}

/* アンカーリンクの停止位置
   ヘッダー（sticky・高さ55px）に見出しが隠れないよう
   スクロール時に上へ余白を確保する */
:target {
  scroll-margin-top: calc(var(--swl-offset_y, 55px) + 24px);
}

/* ================================================
　FV
================================================ */
/* FVタイトルの/フォント・文字サイズ */

.p-mainVisual__slideTitle {
  font-family: "Noto Serif JP", serif;
  font-size: 3vw; /* スマホ：画面幅に応じて可変 */
  font-weight: 300;
  letter-spacing: 0.5rem;
  line-height: 1.6;

  @media (max-width: 780px) {
    font-size: 6vw;
    font-weight: 500;
    letter-spacing: 0.4rem;
    line-height: 2.2;
  }
}

/* FVタイトル タイプライター風アニメーション */
.p-mainVisual__slideTitle .p-mainVisual__char {
  display: inline-block;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.p-mainVisual__slideTitle.is-typing .p-mainVisual__char {
  opacity: 1;
}

/* ================================================
　FVとコンテンツの間の余白
================================================ */

/* コンテンツの上(FV画像の下)の余白をなくす */
.top #content {
  padding-top: 0 !important;
  margin-bottom: 0 !important;
}

.l-mainContent__inner > .post_content {
  margin-top: 0;
}

/* FV下のw-frontTopの余白をなくす */
.w-frontTop {
  margin-bottom: 0;
}

/* ================================================
　 固定ページ タイトル・セクションのタイトル
================================================ */

.c-pageTitle {
  font-size: 1.7rem;
  font-weight: 500;
  text-align: center;
  border-bottom: none !important;
}

.c-pageTitle__inner {
  float: none !important;
  display: inline-block !important;
  width: auto !important;
  border-bottom: 2px solid var(--color_main);
  padding-bottom: 0.25em;
}

.is-style-section_ttl .swl-fz.u-fz-xs {
  font-weight: 400;
}

/* セクションタイトル(英字)のカラー */
.is-style-section_ttl .swl-fz.u-fz-xl {
  color: #58b5c0 !important;
  /* font-family: "Poppins", sans-serif; */
  font-family: "Cormorant Garamond", serif;
  /* font-style: italic; */
  font-size: 2.9rem !important;
  font-weight: 900;
  /* position: relative;
  padding: 1.5rem;
  text-align: center; */
}

/* .is-style-section_ttl .swl-fz.u-fz-xl:before {
  position: absolute;
  bottom: -18px;
  left: calc(50% - 30px);
  width: 60px;
  height: 2px;
  content: '';
  border-radius: 3px;
  background: #58B5C0;
} */

/* ================================================
   大画面でのサイト幅と記事幅
================================================ */

/* 1200px以上の画面でサイト幅を広げる */
@media (min-width: 1200px) {
  :root {
    --container_size: 1100px;
    --article_size: 1000px;
  }
}

/* 1440px以上の画面でサイト幅を広げる */
@media (min-width: 1440px) {
  :root {
    --container_size: 1300px;
    --article_size: 1200px;
  }
}

/* 1920px以上の画面でサイト幅を広げる */
@media (min-width: 1920px) {
  :root {
    --container_size: 1600px;
    --article_size: 1500px;
  }
}

/* お知らせリストとQ&A コンテンツ幅を狭くする */

.news-list,
.faq,
.page-faq {
  max-width: 1000px;
  margin-inline: auto;
}

/* ================================================
　フルワイドブロック
================================================ */

/* フルワイドブロック：パディングトップ */
.swell-block-fullWide {
  /* padding-top: 10px !important; */
}

.news-inner.wp-block-columns {
  width: 80% !important;
  max-width: 80% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ================================================
　 バナー
================================================ */

/* バナー画像のインラインスタイルを上書き */
.banner-area img {
  /* 横幅を親要素いっぱいに広げる（SWELLの自動指定を上書き） */
  width: 100% !important;

  /* 縦幅は横幅に合わせて自動計算（引き伸び・潰れ防止） */
  height: auto !important;

  /* SWELLが自動設定するアスペクト比を無効化 */
  aspect-ratio: unset !important;

  /* スマホ表示（600px以下）のときだけ、さらに幅を狭める */
  @media (max-width: 600px) {
    /* 画像の最大幅を70%に制限 */
    max-width: 90% !important; /* お好みの割合に調整 */

    /* 実際の横幅も70%に指定 */
    width: 90% !important;

    /* 左右の余白を自動にして中央寄せ */
    margin-left: auto !important;
    margin-right: auto !important;

    /* インライン要素化を防ぎ、margin autoを効かせる */
    display: block;
  }
}

/* ================================================
   CONCEPT
================================================ */
.concept {
  padding-top: 30px !important;
}

#concept-heading {
  display: flex;
  align-items: flex-start;
  gap: 30px;
}
/* Conceptタイトル横のライン */
#concept-heading::after {
  content: "";
  display: block;
  height: 1px;
  background-color: #576e66;
  flex: 0.8;
  margin-top: 18px; /* ベースラインから少し上げる */
}

#concept-title {
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
  font-size: 1rem;
  /* タブレット以下 */
  @media (max-width: 1099px) {
    font-size: 0.9rem;
  }

  @media (max-width: 782px) {
    text-align: center;
    font-size: 1rem;
  }
}

#concept-text {
  padding-top: 16px;
  font-size: 1.1rem;
  @media (max-width: 1199px) {
    font-size: 0.9rem;
  }

  @media (max-width: 782px) {
    text-align: center;
    font-size: 0.92rem;
  }
}

#concept-img {
  @media (max-width: 782px) {
    max-width: 130px !important;
    margin: 0 auto !important;
  }
}

figure {
  @media (max-width: 780px) {
    float: none !important;
    display: block !important;
    margin: 0 auto;
    width: 100%; /* #concept-imgの幅いっぱいに広がる */
  }
}

/* ================================================
   Featureセクション
================================================ */
/* カラム間の隙間 */
.feature-columns {
  gap: 32px !important;
  margin-bottom: 32px; /* 1段目と2段目の間 */
}

.feature-title {
  /* font-family: "Noto Serif JP", serif; */
  font-size: 1.1rem;
  font-weight: 500 !important;
}

/* Featureセクション 画像の角丸 */
/* figure.wp-block-image.feature-img img {
  border-radius: 8px !important;
} */

/* Featureセクション 画像の角丸＋フレーム */
figure.wp-block-image.feature-img {
  background-color: #fff;
  padding: 8px;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

figure.wp-block-image.feature-img img {
  border-radius: 8px !important;
  display: block;
}

/* ================================================
   Newsセクション
================================================ */
.news-box {
  background-color: #ffffff;
  border-radius: 40px;
  padding: 40px;
  box-shadow: 0 2px 8px #f4f4f4;
  /* box-shadow: 0px 9px 30px 0px #f4f4f4; */

  @media (max-width: 780px) {
    padding: 20px !important;
  }
}

/* ================================================
   Courseセクション
================================================ */
.course-box {
  /* padding-bottom: 20px !important; */
  padding: 15px 25px 20px !important;
  border-radius: 5px;
}

/* 日本語タイトル */
.course-box .course-box__title-ja {
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  margin: 0 !important;
}

/* 英語タイトル */
.course-box .course-box__title-en {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: #828181;
  margin: 0px 0px 12px;
  text-transform: uppercase;
}

/* 下段2カラム：PC時に上段3カラムと画像サイズを揃えるため全体幅を2/3に制限して中央寄せ */
.two-col-center {
  max-width: 66.66% !important; /* 上段3カラムの画像サイズに合わせるため全体幅を2/3に制限 */
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 上段・下段の画像サイズをアスペクト比で統一 */
.three-col .wp-block-column img,
.two-col-center .wp-block-column img {
  aspect-ratio: 1 / 1; /* 正方形に統一 */
  object-fit: cover; /* はみ出た部分をトリミング */
  width: 100%;
  height: 100% !important; /* 元画像が正方形でない場合の保険 */
}

/* SP時の上書き */
@media (max-width: 781.98px) {
  /* 下段外側の箱：PC時に縮めた幅をフルwidthに戻す */
  .two-col-center {
    max-width: 100% !important;
  }
}

.three-col .wp-block-column,
.two-col-center .wp-block-column {
  padding: 10px 20px 30px 20px; /* 必要に応じて調整 */
}

/* カラム間のギャップ */
.three-col,
.two-col-center {
  gap: 40px !important;
  margin-bottom: 40px;
}

/* 画像に白いフレームを追加 */
/* .three-col .wp-block-column img,
.two-col-center .wp-block-column img {
  border: 8px solid #ffffff;
} */

.three-col .wp-block-column img,
.two-col-center .wp-block-column img {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}

/* ================================================
  CTAセクション
================================================ */
.cta-section {
  max-width: 100vw !important; /* 最大幅を画面幅いっぱいに */
  width: 100vw !important; /* 幅を画面幅いっぱいに */
  height: 350px; /* 高さ */
  margin-left: calc(-50vw + 50%) !important; /* 親の幅制限を左側に突き破る */
  margin-right: calc(-50vw + 50%) !important; /* 親の幅制限を右側に突き破る */
  position: relative !important; /* leftが効くようにする */
  left: 0 !important;
  gap: 0 !important; /* カラム間の余白をゼロに */

  @media (max-width: 599.98px) {
    height: 250px; /* SP(大)時の高さ */
  }

  @media (max-width: 479.98px) {
    height: 180px; /* SP(小)時の高さ */
  }
}

.cta-section .wp-block-column {
  flex-basis: 50% !important; /* 各カラムの基本幅を50%に固定する */
  flex-grow: 0 !important; /* 余白があっても勝手に広がらないようにする */
}

.cta-section .wp-block-column:first-child {
  padding: 0; /* 左カラムの内側余白をゼロに */
  overflow: hidden; /* 画像がはみ出た場合に切り取る */
}

.cta-section .wp-block-column:first-child .wp-block-image {
  height: 100%; /* 画像ブロックの高さを親カラムいっぱいに */
  margin: 0; /* 画像ブロックのデフォルト余白をゼロに */
}

.cta-section .wp-block-column:first-child .wp-block-image img {
  height: 100% !important;
  width: 100% !important;
  object-fit: cover !important; /* 縦横比を保ちつつはみ出た部分をトリミング */
  display: block; /* 画像下の謎の余白をなくす */
}

.cta-section .wp-block-column:last-child {
  display: flex; /* flexboxを有効にする */
  flex-direction: column; /* 縦方向に並べる */
  justify-content: center; /* 垂直方向の中央揃え */
}

.cta-title {
  font-family: "Damion", cursive; /* DamionフォントをCTAタイトルに適用 */
}

@media (max-width: 599.98px) {
  .cta-title {
    font-size: 0.8rem !important; /* SP時のタイトルサイズ（600px未満に適用） */
  }

  .cta-text {
    font-size: 0.6rem !important; /* SP時のテキストサイズ（600px未満に適用） */
  }

  .cta-btn-text {
    font-size: 0.6rem !important; /* SP時ボタンテキストサイズ（600px未満に適用） */
  }
}

/* ================================================
  Q&Aセクション
================================================ */

/* .qa-box {
  background-color: #ffffff;
  border-radius: 30px;
  padding: 20px 40px;
  box-shadow: 0 2px 8px #f4f4f4;

  @media (max-width: 780px) {
    padding: 20px !important;
  }
} */

/* ================================================
  Accessセクション
================================================ */
/* アクセス：左カラム padding-leftでテキストを右寄せ */
.access-left {
  padding-left: 10%;

  @media (min-width: 780px) {
    padding-left: 15%;
  }
}

/* ================================================
  お問い合わせ・無料体験レッスンページ
================================================ */
/* コンタクトページタイトルの下のテキスト */
#contact-text {
  max-width: 930px !important;
  margin: 0 auto;
}

/* フォームを中央に配置 */
.wpcf7 {
  max-width: 950px;
  margin: 0 auto;
}

/* Contact Form - お問い合わせ  */
.form-contact .wpcf7 {
  box-sizing: border-box;
  padding: 40px 32px 32px 40px;
  background-color: #d2e4e7;

  @media (max-width: 599.98px) {
    padding: 32px 16px 32px 16px;
  }
}

/* Contact Form -  見学会・体験会のお申込み */
.form-contact-trial .wpcf7 {
  box-sizing: border-box;
  padding: 40px 32px 32px 40px;
  background-color: #d2e4e7;

  @media (max-width: 599.98px) {
    padding: 32px 16px 32px 16px;
  }
}

/* すべてのCF7フォームの入力欄を横幅いっぱいに広げる（チェックボックス・ラジオボタンは除外） */
.wpcf7 input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.wpcf7 textarea {
  width: 100% !important;
  box-sizing: border-box;
}

/* 年齢以外の入力欄のラッパーを横幅いっぱいに広げる */
.wpcf7 .wpcf7-form-control-wrap:not([data-name="your-age"]) {
  display: block;
  width: 100%;
}

/* 年齢の入力欄に最低限の幅を確保する */

/* 「年齢」の入力欄を囲んでいる箱（ラッパー）に対する指定 */
.wpcf7 .wpcf7-form-control-wrap[data-name="your-age"] {
  display: inline-block; /* 中身の幅に合わせつつ、min-widthを効かせられるようにする */
  min-width: 80px; /* この箱の最低限の幅を80pxに固定（お好みの数値に調整） */
}

/* 「年齢」の入力欄（input本体）に対する指定 */
.wpcf7 .wpcf7-form-control-wrap[data-name="your-age"] input {
  width: 100%; /* 親の箱（上のmin-widthで確保した幅）いっぱいに広げる */
  box-sizing: border-box; /* 枠線(border)や余白(padding)を含めてwidth: 100%を計算し、はみ出しを防ぐ */
}

.form-field__item {
  max-width: 500px;
}

/* フォーム内の文字を太くする */
/* .form-field__label {
  font-weight: 700;
} */

/* プレースホルダーは細いままにする */
input::placeholder,
textarea::placeholder {
  font-weight: 400;
}

/* 入力欄・テキストエリアの枠線を太く・角を丸くする */
input,
textarea {
  border: 2px solid #ccc;
  border-radius: 3px;
}

/* フォームの各項目の間隔（PC・タブレット） */
.form-field {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 32px;

  /* スマホは縦並びに */
  @media (max-width: 599px) {
    display: block;
    gap: 10px;
  }
}

/* 入力エリアを残りのスペースいっぱいに広げる */
.form-field__item {
  flex-grow: 1;
}

/* テキストエリアの高さを調整 */
textarea {
  height: 230px;
  line-height: 1.3em;
}

/* ラベルと必須・任意バッジを横並びに揃える */
.form-field__head p {
  display: flex;
  align-items: baseline;
  justify-content: space-between; /* 追加：ラベルとタグを両端に配置 */
  gap: 8px;
  min-width: 170px; /* ラベル幅を固定して入力欄の左端を揃える */
}

/* タブレット・PCはラベルとタグのエリア幅を広げてタグを右端に揃える */
@media (min-width: 600px) {
  .form-field__head p {
    gap: 8px; /* ラベルとタグの間隔 */
    min-width: 200px; /* ラベルとタグのエリア幅を広げる */
    justify-content: space-between; /* ラベルとタグを両端に配置 */
  }
}

/* 必須・任意タグの基本スタイル */
.form-field__tag {
  display: inline-block;
  border-radius: 2px;
  background: #e75f5f; /* 必須タグの背景色 */
  padding: 6px 8px 5px 8px; /* タグの内側の余白 */
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 100%;
  letter-spacing: 1.98px;

  @media (max-width: 599.98px) {
    padding: 5px 7px 4px 7px; /* タグの内側の余白 */
    font-size: 10px;
  }
}

/* 任意タグの背景色（グリーン）*/
.form-field__tag.is-option {
  background-color: #cccccc;
}

/* ラジオボタンを横並び */
.form-field__item .wpcf7-radio {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 20px !important;
  flex-wrap: wrap;
  width: fit-content; /* 追加：中身の幅にぴったり合わせる */
}

/* ラジオボタンの選択肢を横並びにする */
.form-field__item .wpcf7-radio .wpcf7-list-item {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  width: auto;
  margin: 0 !important;
  white-space: nowrap; /* テキストの折り返しを防ぐ */
}

/* チェックボックスを横並びに揃える */
.form-field__item .wpcf7-checkbox {
  display: flex;
  align-items: center;
  gap: 20px !important;
  flex-wrap: wrap;
  width: fit-content; /* 追加：中身の幅にぴったり合わせる */
}

/* チェックボックスの選択肢を横並びにする（ご希望の曜日など） */
.form-field__item .wpcf7-checkbox .wpcf7-list-item {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  width: auto;
  margin: 0;
  white-space: nowrap; /* テキストの折り返しを防ぐ */
}

/* label要素自体(input + テキストspan)を横並びに */
.wpcf7-list-item label {
  display: flex !important;
  align-items: center !important;
  gap: 4px;
}

.form-field__label {
  font-size: 1em;
}

/* テキストspan側のフォントサイズ */
.wpcf7-list-item-label {
  font-size: 0.9em;
}

/* 年齢の入力欄と「歳」を横並びに揃える */
.form-field__item p {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 送信ボタンのレイアウト（外側の<p>を中央に配置） */
.form-submit {
  display: flex;
  justify-content: center;
  margin-top: 48px;
}

/* ボタンとスピナーを中央に並べる。position: relativeはスピナーの絶対配置の基準にするため */
.form-submit p {
  display: flex;
  justify-content: center;
  position: relative;
}

/* CF7デフォルトのスピナー(見えないが幅を確保してしまう)をレイアウトから除外し、中央寄せがズレないようにする */
.form-submit .wpcf7-spinner {
  position: absolute;
  margin: 0;
}

/* 送信ボタンのスタイル */
.btn-submit {
  background-color: #152f3e;
  color: #fff;
  border: none;
  padding: 8px 40px;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s; /* ホバー時のアニメーション */
}

/* ホバー時 */
.btn-submit:hover {
  opacity: 0.8;
}

.wpcf7 select {
  width: 100%;
  box-sizing: border-box;
}

/* .wp-block-paragraph {
  width: 80%;
  margin: 0 auto;
} */

/* ================================================
 教室紹介(下層ページ)
================================================ */
/* アイキャッチをフルワイドに */
.page-id-32 .p-articleThumb {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}

.page-id-32.p-articleThumb__img {
  width: 100%;
  max-width: 100%;
  display: block;
}

@media (max-width: 768px) {
  /* 「mobile-order-last」クラスが付いた要素（画像カラムなど）を
     並び順の後ろに回す。テキスト側は order を指定していないので
     初期値の 0 のままとなり、結果的にテキスト → 画像 の順で表示される */
  .mobile-order-last {
    order: 2;
  }
}

/* リストの左開始位置をテキストに揃える(paddingを減らす) */
.post_content ul {
  --swl-list-padding--left: 0.9em;
}

/* ページタイトル */
.post_content .page-lesson-title {
  font-family: "Noto Serif JP", serif;
  font-size: 2.1rem;
  font-weight: 400;
}

.page-description {
  font-size: 1.15rem;
  font-weight: 300;
}

/* 01 見出し：大きく・色付き */
.post_content .lesson-num {
  font-family: "Noto Serif JP", serif;
  font-size: clamp(2.2rem, 4vw, 4.5rem) !important; /* 最大値を下げて調整 */
  color: #58b5c0 !important;
  font-weight: 300 !important;
  letter-spacing: 0.1em !important;
  line-height: 1 !important;
}

/* 見出しのfont */
.post_content .lesson-title {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.75rem !important;
  font-weight: 400 !important;
}

/* リスト */
.post_content ul li {
  font-size: 1.1rem;
  line-height: 1.8; /* 数値を上げると広がる */
  margin-bottom: 0.5em; /* 項目間のスペース */
  font-weight: 300;
}

/* レッスンセクション内の画像：角丸 */
.lesson-section .wp-block-image img {
  border-radius: 8px !important;
  /* height: 360px !important; */
  /* box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.2); */
  /* box-shadow: 10px 10px 1px #c9d6d8; */

  /* 1440px以上：画像をカラム幅いっぱいに */
  @media (min-width: 1440px) {
    width: 93% !important;
  }
}

/* .wp-block-image img {
  border-radius: 8px !important;
} */

/* ================================================
 コース紹介(下層ページ)
================================================ */

/* カラム間の隙間 */
.course-columns {
  gap: 40px !important;
  margin-bottom: 40px; /* 1段目と2段目の間 */
}

/* ========コース紹介カード============= */

/* カード全体 */
.course-card {
  background: #fff;
  overflow: hidden;
  border-radius: 5px;
  background-color: rgb(253, 241, 233);
}

/* カード内の画像 */
.course-card .wp-block-image {
  margin-bottom: 0;
}

.course-card .wp-block-image img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: 0; /* カード内は角丸なし */
}

/* 英語タイトル */
.course-card .course-card__title-en {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: #888;
  margin: 16px 16px 4px;
  text-transform: uppercase;
}

/* 日本語タイトル（コース名） */
.course-card .course-card__title-ja {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 16px 8px;
}

/* 説明文 */
.course-card .course-card__text {
  font-size: 0.95rem;
  line-height: 1.7;
  color: #555;
  margin: 0 16px 20px;
}

/* 入会金 取り消し線 */
.mm-pricing__strike {
  text-decoration: line-through;
  color: #aaa;
}
.mm-pricing__strike .tax-note {
  color: #aaa;
}

/* ============================================
   SP：1列に変更
   ============================================ */
@media (max-width: 780px) {
  .wp-block-columns:has(.course-card) {
    flex-wrap: wrap;
  }

  .wp-block-columns:has(.course-card) .wp-block-column {
    flex-basis: 100% !important;
  }
}

/* 特定の固定ページの背景色  */
.page-id-451 {
  background-color: #fbf9f7;
}

/* ===== テーブル ===== */

/* 全体：縦罫線なし・文字サイズ */
.wp-block-table table {
  border-collapse: collapse;
  font-size: 1em !important;

  /* SP：文字サイズ */
  @media (max-width: 780px) {
    font-size: 0.78em !important;
  }
}

/* 1列目：左側の余白 */
.wp-block-table td:first-child,
.wp-block-table th:first-child {
  padding-left: 16px;

  @media (max-width: 780px) {
    padding-left: 3px;
  }
}

/* 最終列：右側の余白 */
/* .wp-block-table td:last-child,
.wp-block-table th:last-child {
  padding-right: 4px;
} */

/* セル共通：縦罫線なし・余白 */
.wp-block-table td,
.wp-block-table th {
  border-left: none;
  border-right: none;
  padding: 14px 12px 10px 0;
}

/* 税込み表示 */
span.tax-note {
  display: block !important;
  font-size: 0.8em !important;
  color: #888 !important;

  @media (max-width: 780px) {
    font-size: 0.76em !important;
  }
}

/* キャンペーンバッジ */
.campaign-badge {
  display: inline-block;
  background-color: #f5e6e0;
  color: #c0704a;
  padding: 4px 6px;
  border-radius: 4px;
  font-size: 0.85em;
  white-space: nowrap;

  @media (max-width: 780px) {
    font-size: 0.75em;
  }
}
/* キャンペーンバッジ列：縦方向中央揃え */
.wp-block-table td:last-child {
  vertical-align: top;
}

/* SP：キャンペーンバッジ改行 */
.sp-only {
  display: none;

  @media (max-width: 780px) {
    display: block;
  }
}

.pc-only {
  display: block;

  @media (max-width: 599.98px) {
    display: none;
  }
}
/* ================================================
インスタのアイコンを右端に固定表示する
================================================ */

#fixed-insta {
  --base: 80px; /* 通常時の位置 */
  --lift: 0px; /* フッター回避で持ち上げる量（JSが書き換える）*/
  position: fixed;
  right: 0;
  bottom: calc(var(--base) + var(--lift)) !important;
  z-index: 90;
  display: flex !important;
  align-items: center;
  justify-content: center;
  line-height: 1;
  width: 48px;
  height: 48px;
  background: #fff;
  border-radius: 8px 0 0 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  color: #e1306c;
  font-size: 26px;
  text-decoration: none;
  /*バーと同じタイミングで登場させるため */
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.4s ease,
    visibility 0.4s ease;

  @media (max-width: 600px) {
    --base: 52px;
    width: 32px !important;
    height: 32px !important;
    font-size: 20px !important;
  }
}

/* JSがこのクラスを付けたら表示される */
#fixed-insta.is-visible {
  opacity: 1;
  visibility: visible;
}

/* ================================================
   固定フッターメニューをボタン風にする
   ※バーの背景色はSWELLの設定をそのまま活かす
================================================ */

/* --- バー本体 -------------------------------- */
#fix_bottom_menu {
  height: auto !important; /* SWELLの固定高さを解除 */
  min-height: 0 !important;
  padding: 12px 10px 18px 10px !important; /* バーの内側の余白。上下（6px）でバーの厚みが決まる */

  /* 初期状態は非表示 */
  opacity: 0;
  visibility: hidden;

  /* 位置(bottom)はアニメさせず、フェードだけアニメさせる */
  transition:
    opacity 0.4s ease,
    visibility 0.4s ease !important;
  transform: none !important;
}

/* JSがこのクラスを付けたら表示される */
#fix_bottom_menu.is-visible {
  opacity: 1;
  visibility: visible;
}

/* --- ボタンを並べている箱（ul.menu_list） ------ */
#fix_bottom_menu .menu_list {
  height: auto !important; /* 中身に合わせて可変に */
  min-height: 0 !important;
  gap: 8px; /* ボタン同士の間隔 */
  padding: 0;
  justify-content: center; /* 全体を横方向の中央へ */
  align-items: stretch; /* ボタンの高さを揃える */
}

/* --- リスト項目（li） ------------------------- */
#fix_bottom_menu .menu-item {
  height: auto !important;
  min-height: 0 !important;
  min-width: 0 !important; /* はみ出し防止。これがないと縮まない */
}

/* --- ★空のアイコン要素を消す（高さの主犯） ----- */
#fix_bottom_menu .menu-item a i {
  display: none !important;
}

/* --- ボタン本体（リンク部分） ------------------ */
#fix_bottom_menu .menu-item a {
  background: #fff !important; /* ボタンの背景色 */
  color: #131212 !important; /* ボタンの文字色 */
  border-radius: 2px;
  min-height: 0 !important;
  padding: 12px 4px !important; /* ★高さの調整 */
  display: flex !important; /* SWELLの縦積み指定を上書き */
  flex-direction: row !important; /* 横並びに戻す（アイコンを消したので実質1行）*/
  align-items: center !important; /* 縦方向の中央 */
  justify-content: center !important; /* 横方向の中央 */
  box-sizing: border-box;
  width: 100% !important; /* liの幅いっぱいに広げる */
}

/* --- テキスト（span） ------------------------- */
#fix_bottom_menu .menu-item a span {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.2 !important;
  white-space: nowrap !important; /* 折り返しを禁止 */
}

/* フッター直上ウィジェットの余白を削除 */
#before_footer_widget {
  margin: 0 !important;
}

#footer {
  padding-bottom: 0 !important; /* バーが重ならなくなるのでフッター下の余白は不要 */
}

/* ================================================
   ブログサイドバー：Categories・Archivesウィジェットの
   アイコン位置ずれ・リンク色の修正
================================================ */
.widget_categories .cat-item > a {
  position: relative;
  color: inherit;
}
.wp-block-archives-list a {
  color: inherit;
}



/* ============================================
   Js用
   ============================================ */

.fade-in-up {
  opacity: 0;
  transform: translateY(35px);
  transition:
    opacity 1s,
    transform 1s;

  &.is-in-view {
    opacity: 1;
    transform: translateY(0);
  }
}