@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
*/

/* =================================================================
   CSS baseline & variables (added 2025-09-05)
   - Centralized color palette & fonts
   - Non-destructive: only variable defs + body font reset
================================================================= */
:root {
  /* Brand palette */
  --brand-1: #4c9ac0;
  --accent-1: #e0bd4d;
  /* Neutrals */
  --paper: #ffffff;
  --ink-1: #333333;
  --ink-2: #353535;
  --ink-muted: #999999;
  --line-1: #dbdbdb;
  --line-2: #bababa;
  /* Supportive colors */
  --teal-light: #77C5D3;
  --sky: #e3fbff;
  --sky-bright: #a6f2ff;
  --lemon: #f9f4c2;
  --cream: #fff6e6;
  --butter: #fff3cc;
  --sand: #ddcdb3;
  --brown: #b46436;
  --gold-dark: #aa8a33;
  /* Base scales */
  --radius-sm: .375rem;
  --radius-md: .75rem;
  --radius-lg: 1.25rem;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06), 0 1px 1px rgba(0,0,0,.04);
  --shadow-md: 0 4px 10px rgba(0,0,0,.08);
  --gutter: 1rem;
  --font-sans: "Zen Maru Gothic","Kiwi Maru","Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
}
/* Base typography (front only; WP admin unaffected) */
body { font-family: var(--font-sans); color: var(--ink-1); }



/* フォントをkiwi Maru へ */
/* フロント側だけ適用し管理画面は除外 */
body:not(.wp-admin) {
  font-family: "Zen Maru Gothic", "M PLUS Rounded 1c",
               "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  font-weight: 400;
}
strong, b {
  font-weight: 700;
}
/* 太字を明示 */
/* フォントをkiwi Maru へ */


/* メディア掲載のmoreを改行させない */
.media-no-wrap {
	white-space: nowrap;
	font-size: clamp(0.688rem, 0.483rem + 1.02vw, 1.25rem)!important;
}
/* メディア掲載のmoreを改行させない */




/* ✅ 軽く角を丸めるクラス：やわらかい印象にしたい画像に付与 */
.soft-rounded {
  border-radius: 12px;       /* ← 角の丸み。4px〜12pxくらいが自然な範囲 */
  overflow: hidden;         /* ← 子要素がはみ出さないように切り取る */
  display: block;    /* ← 画像がインライン要素なら必要。blockでもOK */
}

.soft-rounded img {
  display: block;     /* ← 余計な余白を消す */
  width: 100%;        /* ← figure幅に合わせてフィット */
  height: auto;
  border-radius: 12px;       /* ← 角の丸み。4px〜12pxくらいが自然な範囲 */
}
/* ✅ 軽く角を丸めるクラス：やわらかい印象にしたい画像に付与 */



/* 固定ページのタイトル非表示＋h1の余白を無くす */
/* ロゴ画像の h1 は表示する */

/* 一旦全部非表示 */
h1 {
  display: none;
}

/* ロゴ用の h1 だけ復活 */
h1.c-headLogo.-img {
  display: block;
}


/* 固定ページのマージントップを削除 */
.post_content {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
.l-content.l-container {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
.swell-block-fullWide.pc-py-60.sp-py-40.alignfull {
	padding-top: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* 固定ページのタイトル非表示＋h1の余白を無くす */

/* -------------------------------------------------------------------------------------------- */

/* トップ */
/* トップ */
/* トップ */
/* トップ */
/* トップ */
/* -------------------------------------------------------------------------------------------- */



/* first-text 装飾 */
.first-text {
  border-radius: 20px;
  padding: 1rem 2rem;
  outline: var(--line-1) solid 1px;
  outline-offset: -5px;
    background-image: repeating-linear-gradient(45deg, var(--butter) 0 2px, var(--paper) 2px 5px);
  background-repeat: no-repeat;
  background-position: 10px 10px;
  color: rgb(51, 51, 51);
  font-weight: bold;
	border-color: var(--line-1);
}

.top-bg-group {
	background-color: #fff;
	padding: 50px;
	border-radius: 25px;
}

@media (max-width: 600px){
  .top-bg-group { padding: 15px; }
}
/* first-text 装飾 */






/* 新たな選択肢 装飾 */
.new-choice {
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    /* outline: 1px solid var(--accent-1); */
    outline-offset: 2px;
    background: linear-gradient(-45deg, transparent 0 20px, var(--paper) 20px calc(100% - 20px), transparent calc(100% - 20px)),
        repeating-linear-gradient(45deg, var(--accent-1) 0 2px, var(--paper) 2px 5px);
    text-shadow: -1px -1px 0 var(--color-1), -1px 1px 0 var(--color-1), 1px -1px 0 var(--color-1), 3px 3px 0 var(--color-1);
    font-weight: bold;
    text-align: center;
	width: fit-content;
	margin: auto
}/* 新たな選択肢 装飾 */







/* メソッド枠 装飾 */
.method-text {
    position: relative;
    padding: 2rem;
    border: 3.5px solid #e2c58a;
    box-shadow: 20px 0px 0 #e2c58a;
    color: var(--ink-1);
    border-radius: 20px 20px 0 0;
}
.method-text p {
    line-height: 1.5;
}

@media (max-width: 600px){
  .method-text { box-shadow: 10px 0px 0 #e2c58a; }
}
/* メソッド枠 装飾 */







/* 枠線を角丸に 装飾 */
.radius {
	border-radius: 15px; /* 角丸の半径を設定 */
	overflow: hidden; /* 角丸が正しく表示されるようにする */
	 padding:0em; /* 余白をつける */
}
/* 枠線を角丸に 装飾 */




/* 保護者の声 水玉メモ 装飾 */
.voice-1 {
  position: relative;
	border-radius: 10px; /* 角丸の半径を設定 */
  margin: 3em 0 0 0;
  background: var(--cream);
  box-shadow: 0 2px 3px rgba(0,0,0,.22);
  padding: 2px 8px 80px 8px;
  background-color: var(--cream);
  background-image:
  linear-gradient(90deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 50%, var(--cream) 0%, var(--cream) 100%), linear-gradient(180deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 95%, #ed7780 100%);
  background-size: 8px 100%,100% 2em;
  line-height: 2;
  color: #6E768A;
  font-weight: bold;
}

.voice-1:after {
  position: absolute;
  content: "";
  top: 15px;
  width: 30%;
  height: 35px;
  opacity: 0.7;
  margin: -35px auto 10px 35%;
  background-color: #ff99ac; /* 背景色 */
  background-image: radial-gradient(var(--paper) 24%, transparent 0), radial-gradient(var(--paper) 24%, transparent 0);
  background-position: 0 0, 10px 10px;
  background-size: 20px 20px;
  transform: rotate(-2deg);
  left: 10px;
  right: 10px;
  box-shadow:0 0 5px rgba(0,0,0,.2);
}
.voice-1 p {
  margin: 0;
  padding: 2em 2em 0.5em 2em;
}
.voice-1-photo {
  float: right;
  margin: 0 2em 1em 1em; /* 左に余白、下にも空けると自然 */
	width: clamp(5rem, 3.182rem + 9.09vw, 10rem);
}
/* 保護者の声 水玉メモ 装飾 */


/* 保護者の声 ストライプメモ 装飾 */
.voice-2 {
	position: relative;
	border-radius: 10px; /* 角丸の半径を設定 */
  margin: 3em 0 1em 0;
  background: var(--cream);
  box-shadow: 0 2px 3px rgba(0,0,0,.22);
  padding: 2px 8px 80px 8px;
  background-color: var(--cream);
  background-image:
  linear-gradient(90deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 50%, var(--cream) 0%, var(--cream) 100%), linear-gradient(180deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 95%, #afb50a 100%);
  background-size: 8px 100%,100% 2em;
  line-height: 2;
  color: #6E768A;
  font-weight: bold;
}
.voice-2:before {
  position: absolute;
  content: "";
  top: 3%;  
	left: 0%;
	right: 10px;
  width: 20%;
  height: 35px;
  opacity: 0.8;
  margin: -40px auto 10px -22px;
  transform: rotate(1deg);
  background-image: repeating-linear-gradient(45deg, var(--sky-bright), var(--sky-bright) 3px, var(--butter) 3px, var(--butter) 6px);
}
.voice-2:after {
  position: absolute;
  content: "";
  top: 3%;  
	left: 0%;
	right: 0px;
  width: 20%;
  height: 35px;
  opacity: 0.8;
  margin: -40px -22px 10px auto;
  transform: rotate(3deg);
  background-image: repeating-linear-gradient(45deg, var(--sky-bright), var(--sky-bright) 3px, var(--butter) 3px, var(--butter) 6px);
}
.voice-2 p {
  margin: 0;
  padding: 2em 2em 0.5em 2em;
}
.voice-2-photo {
	float: right;
	margin: 0 2em 1em 1em; /* 左に余白、下にも空けると自然 */
	width: clamp(5rem, 3.182rem + 9.09vw, 10rem);
}
/* 保護者の声 ストライプメモ 装飾 */


/* -------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------- */

/* 教室 */
/* 教室 */
/* 教室 */

/* -------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------- */



/* 教室の枠 装飾 */
.kyoshitsu {
  border-radius: 20px;
  font-weight: bold;
  padding: 0.5em 1em;
  border-right: 4px dashed var(--brand-1);
  border-bottom: 4px dashed var(--brand-1);
  outline: 3px solid var(--brand-1);
  outline-offset: 5px;
	margin: 1rem
}
/* 教室の枠 装飾 */

/* 教室のヘッド 装飾 */
.kyoshitsuhead {
	border-radius: 100px;
	font-weight: bold;
	padding: 0.5em 3em;
	/* border-right: px dashed var(--brand-1);
	border-bottom: 6px dashed var(--brand-1);*/
	background-image: radial-gradient(circle, var(--brand-1) 3px, transparent 3px);
	background-position: left bottom;
	background-repeat: repeat-x;
	background-size: 16px 6px;
	outline-offset: 5px;
	width: fit-content;
	margin: auto
}
/* 教室のヘッド 装飾 */


/* orange classボックスを 装飾 */
.orange{
  position: relative;
  border-radius: 30px;
  background-image: radial-gradient(circle, #ff5e009c 1px, transparent 1px), radial-gradient(circle, #ff5e009c 1px, transparent 1px);
  background-position: 0 0, 1.5px 3px;
  background-size: 3px 6px;
	padding: 0.3em 0.9em;
  color: var(--ink-1);
  font-weight: bold;
  line-height: 1.6;
  box-shadow: 0 4px 8px rgba(255, 165, 0, 0.2);  /* 軽い影で立体感 */
	white-space: nowrap;
	font-size: clamp(0.75rem, 0.655rem + 0.48vw, 1.25rem); /* 幅が小さくなるとフォントサイズも小さくなる */
}
/* orange classボックスを 装飾 */


/* 月額記載を改行しない */
.price-no-wrap{
	white-space: nowrap;
  xxxfont-size: clamp(11px, 2.2vw, 30px);
}
/* メディア掲載のmoreを改行させない/* 月額記載を改行しない */
 
/* 対象 */
.destination-border {
  border-radius: 50px;
	width: fit-content;
	padding: 0.5em 0.5em;
	background-color: transparent;
	background-image: repeating-linear-gradient(315deg, #06b6d43b, #06b6d43b 4px, transparent 4px, transparent 8px);
	margin: 0 auto;
}
/* 対象 */
/* 比較表 */
.table{
	border-radius: 20px;
	overflow: hidden;
	border: 1.5px solid #DCDCDC;
/* 	width: fit-content; */
	font-size: clamp(0.875rem, 0.784rem + 0.45vw, 1.125rem);
}
/* 比較表 */



/* メディア掲載 */
/* メディア掲載 */
/* メディア掲載 */


/* メディア掲載のmoreを改行させない */
.media-no-wrap {
	white-space: nowrap;
	font-size: clamp(11px, 2.2vw, 30px);
}
/* メディア掲載のmoreを改行させない */






/* オンライン説明会・無料体験 */
/* オンライン説明会・無料体験 */
/* オンライン説明会・無料体験 */

/* 1) カード本体：白カード＋ごく薄い枠＋柔らかシャドウ（装飾は全部オフ） */
.sketch-card-wrap{
  background:#fff;
  border:1px solid #E9EEF3;
  border-radius:16px;
  padding: clamp(18px, 2.2vw, 28px);
  box-shadow: 0 10px 30px rgba(17,38,62,.06);
  position:relative;
  height:100%;                 /* ← カードを行の高さまで伸ばす */
  display:flex; flex-direction:column;  /* ← 中身を上下に配置 */
}
/* 以前のリング/ゆる枠/線は無効化 */
.sketch-card::before,
.sketch-card::after{ content:none !important; }

/* 2) 本文ボックス：淡いグラデ＋薄枠（左=ブルー寄り/右=ミント寄り） */
.sketch-card{
  margin:0;
  border-radius:12px;
  padding: clamp(14px, 1.6vw, 20px);
  line-height:1.9;
  color:#1f2a37;
  border:1px solid #EAF2FB;
  background: linear-gradient(180deg,#F7FAFF 0%, #FFFFFF 100%);
  box-shadow:none;
  position:relative; z-index:1;
}
/* 見出しマーカーは“タグ風”に簡素化 */
.sketch-card__body .swl-marker.mark_orange{
  background: #EFF6FF;
  color:#0F4C81;            /* 濃いめブルー */
  border-radius:999px;
  padding:.35em .9em;
  display:block;
  width:fit-content;     /* ← ピルを文言幅に収める（横いっぱいにしない） */
  margin-bottom:.6em;    /* ← 次の本文との間隔 */
  font-weight:700;
}
/* 黄ライン等の装飾はオフ */
.sketch-card__body::after{ content:none !important; }

/* 右カラム（無料体験）はミントに寄せる */
.sketch-card--trial .sketch-card__body{
  border-color:#E6F4EF;
  background: linear-gradient(180deg,#F3FBF8 0%, #FFFFFF 100%);
}
.sketch-card--trial .sketch-card__body .swl-marker.mark_orange{
  background:#E9FBF4; color:#117A65;
}

/* 3) 写真：角丸レクタングル＋控えめボーダー＆シャドウ（回転・円形はやめる） */
.sketch-card__photo{ margin-top: clamp(12px, 1.4vw, 18px); position:relative; z-index:0; }
.sketch-card__photo img{
  display:block; width:100%; height:auto;
  border-radius:14px;
  /* border:1px solid #EEF3F7; */
  box-shadow:none;
  transform:none;    /* ← 斜めを解除 */
}
/* 背後のハイライト/テープもオフ */
.sketch-card__photo::before,
.sketch-card__photo::after{ content:none !important; }

/* モバイルはそのまま（既存 @media(max-width:600px) が効く）*/
@media (min-width: 960px){
  .sketch-card__photo{ margin-top:auto; }   /* ← 余白を可変にして下へ押し下げる */
}

/* 2カラム親を grid にして「横並び＋同じ行高」に（PC幅） */

/* 4) CTAボタン：丸pill＋わずかに立体。色を左右で変える */
.sketch-card .swl-inline-btn a{
  border-radius:999px;
  padding:.72em 1.2em;
  color:#fff !important;
  border:1px solid rgba(0,0,0,.04);
  display:inline-flex; align-items:center; gap:.4em;
  transform:translateY(0);
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
.sketch-card .swl-inline-btn a:hover{ transform:translateY(-1px); filter:brightness(1.03) saturate(1.05); }
.sketch-card .swl-inline-btn a:active{ transform:translateY(0); }

/* 左＝オンライン：ブルー */
.sketch-card--online .swl-inline-btn a{
  background:#4EA3F5;
  box-shadow: 0 12px 24px rgba(78,163,245,.25);
}
/* 右＝無料体験：グリーン */
.sketch-card--trial .swl-inline-btn a{
  background:#2FB68E;
  box-shadow: 0 12px 24px rgba(47,182,142,.25);
}

/* 5) 2カラムの間隔を少し広げる（影の重なり回避） */
/* .swell-block-columns .swell-block-column.skl-promo-gap-fix,
.swell-block-columns__inner{ gap: clamp(16px, 2.2vw, 32px); } */




/* 6) スマホ最適化：本文→ボタン→写真の順で余白を確保 */
@media (max-width: 600px){
  .sketch-card{ padding: clamp(16px, 4vw, 22px); }
  .sketch-card__photo{ margin-top: 12px; }
}


/* 無料体験 */

/* -------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------- */

/* About */
/* About */
/* About */
/* About */
/* About */
/* -------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------- */


/* 設立の想い */
.foundation {
  background-color: var(--paper);
  background-image: radial-gradient(circle, #f7d795 2px, transparent 2px), radial-gradient(circle, #f7d795 2px, transparent 2px);
  background-position: 0 0, 4px 8px;
  background-size: 8px 16px;
	border-radius: 30% 30% 0 0; 
}


/* ミッションをハイライト */
.highlight {
	padding: 0em 0em;
	background-image: linear-gradient(90deg, #ffe10080 0%, #ff00009e 100%);
	background-position: left bottom;
	background-size: 100% 0.7em;
	background-repeat: no-repeat;
	white-space: nowrap;
	font-size: clamp(11px, 3.2vw, 25px);
}
/* ミッションをハイライト */

/* 「ようへん」の由来とビジョンのテキスト */
.visionhead {
	white-space: nowrap;
	font-size: clamp(11px, 3.2vw, 20px);
}
/* 「ようへん」の由来とビジョンのテキスト */

/* 「ようへん」の由来とビジョンのフレーム */
.vision-frame {
  font-weight: bold;
	padding: 0.5em 1em;
  outline-offset: 5px;
  background: linear-gradient(-45deg, transparent 0 20px, #FFE9E9 20px calc(100% - 20px), transparent calc(100% - 20px)),
              repeating-linear-gradient(-45deg, #e05e5e 0 2px, #FFE9E9 2px 6px);
	width: fit-content;
	margin: auto;
}
/* 「ようへん」の由来とビジョンのフレーム */

/* ビジョン */
/* ビジョン */
/* ビジョン */
/* ビジョン */
/* ビジョン */


/* ビジョングループ */
.vision-wrapper {
	position:relative;
}
/* ビジョンボックス */
.vision-border {
	xxposition:absolute;
	font-weight: bold;
	padding: 0em -10em -20em 1em;
	border-left: 15px dotted var(--brand-1);
	outline: 3px solid var(--brand-1);
	outline-offset: 0.5em;
	border-radius: 0.1% 10% 10% 0.1%;
	width: fit-content;
	margin: 0em 1em 0em 1em;
	z-index: 2;
}

/* ビジョン見出し */
.vision-1 {
	z-index: 2;
}
/* ビジョン写真 */
.vision-photo {
	left:-20%
	z-index: 1;
	margin: auto 1em auto 1em;
	border-radius: 1% 10% 10% 1%;
}
/* ビジョン背景 */
.vision-bg {
	top: 15%;
	left: 6%;
	position:absolute;
	border-radius: 0.1% 10% 10% 0.1%;
	margin-left: 4rem;
  background-color: transparent;
  background-image: linear-gradient(90deg, #0769d514 8px, transparent 8px), linear-gradient(#0769d514 8px, transparent 8px);
  background-position: 10px 10px;
  background-size: 19px 19px;
	width:clamp(21.625rem, 5.563rem + 64.25vw, 53.75rem);
	height: clamp(15.25rem, 7.159rem + 40.45vw, 37.5rem);
	z-index: -4;
}

/* ビジョン見出し */
.vision-h2 {
    position: relative;
    margin-bottom: 0.2rem;
	z-index: 2;
}
.vision-h2:before {
    position: absolute;
    inset: 25px -5px -5px 25px;
    content: '';
  background-color: transparent;
  background-image: linear-gradient(90deg, #0769d514 8px, transparent 8px), linear-gradient(#0769d514 8px, transparent 8px);
  background-position: 10px 10px;
  background-size: 19px 19px;
	border-radius: 5% 5% 5% 5%;
	z-index: -3;
}

/* -------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------- */

/* オンライン教室 */
/* オンライン教室 */
/* オンライン教室 */
/* オンライン教室 */
/* オンライン教室 */
/* -------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------- */


/* オンライン教室ボックス */
.online-frame {
	position: relative;
	border-radius: 3% 3% 1% 1%;
	height: clamp(23.5rem, 6.25rem + 56.25vw, 30.5rem);
	font-weight: bold;
	padding: 0.5em 1em;
	border-right: 9px dashed rgb(from var(--brand-1) r g b / 0.2);
	border-bottom: 9px dashed rgb(from var(--brand-1) r g b / 0.2);
	outline: 7px solid rgb(from var(--brand-1) r g b / 0.2);
	outline-offset: 5px;
	margin: 1rem
	z-index: -2;
}
/* オンライン教室ボックス背景*/
.online-frame-bg {
	top: 3%;
	left: 10%;
	position: absolute;
	border-radius: 10% 10% 1% 1%;
	margin-left: 2rem;
  background-color: transparent;
  background-image: repeating-linear-gradient(45deg, #06b6d433, #06b6d433 2px, transparent 2px, transparent 12px);
  background-position: 20px -50px -20px 20px;
	width: clamp(30.375rem, 23.239rem + 35.68vw, 52rem);
	height: clamp(25rem, 22.045rem + 14.77vw, 33.125rem);
	z-index: -4;
}
/* オンライン教室ボックスメッセージ*/
.online-message {
	position: absolute;
  xxbackground-color: white;
	border-radius: 35%;
	top: 50%;
	right: 0%;
	left: 60%;
	font-size: clamp(0.75rem, 0.469rem + 1.41vw, 4.875rem);
	white-space: nowrap;
	z-index: 9999;
}

.online-photo img {
	position: absolute;
	border-radius: 5%;
	right: 0;
	left: 0;
	margin: 0 auto;
}
.online-message-2 {
	position: absolute;
	right: 0;
	left: 0;
	bottom: 0%;
	margin: 0 auto;
	white-space: nowrap;
}

.online-feature {
    padding: 5px 30px 5px 30px;
    border-radius: 20px;
    background-image:
        linear-gradient(90deg, transparent 15px, #FDFDFD 16px calc(100% - 16px), transparent calc(100% - 15px)),
        repeating-linear-gradient(45deg, var(--sand), 2px, white 2px 4px);
}

.online-feature-message {
    padding: 15px 20px;
    border: 5px solid var(--ink-2);
    border-radius: 50px;
    background-image:
        linear-gradient(90deg, transparent 15px, var(--ink-2) 16px calc(100% - 16px), transparent calc(100% - 15px)),
        repeating-linear-gradient(45deg, var(--sand), 2px, var(--ink-2) 2px 4px);
}

/* ステップの矢印 */
.allow-1 {
	position: relative;
    padding-bottom: 0.5rem;
    border-bottom: 3px solid var(--line-1);
    background-color: #FEF6EC;
    color: var(--line-1);
    font-weight: bold;
    font-size: 26px;
    text-align: center;
	border-radius: 0% 0% 50% 50%;
	width: clamp(18.75rem, 14.063rem + 23.44vw, 37.5rem);
	margin: 0 auto;
}

.allow-1:before {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) skew(-25deg);
    height: 30px;
    width: 20px;
    border-right: 3px solid var(--line-1);
    background-color: #FEF6EC;
    content: "";
}


/* instagram 埋め込みサイズ調整 */
.online-instagram {
	left:1%;
}

xxxxxxxxx/* instagram 埋め込みサイズ調整 */
.instagram-media {
  max-width: 100% !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box;
	border-radius: 20px  !important;
}
.rich-columns .wp-block-column {
  padding: 0 10px;
}
.instagram-media {
  margin-bottom:  !important; /* 不要な下余白を消す */
}
/* instagram 埋め込みサイズ調整 */
xxxxxxxxxxxxxxxxxxxxx


/* ✅ ステップ番号（丸数字）を別フォントにする場合 */
.swell-block-step__number {
    font-size: 22px !important;
    padding-bottom: 1px;
}

.swell-block-step__number[data-num]:after {
    content: attr(data-num);
}
.swell-block-step__number:after {
    content: counter(step);
    counter-increment: step;
    display: block;
    font-size: 30px !important;
	padding-bottom: 1px;
}
/* ✅ ステップ番号（丸数字）を別フォントにする場合 */


/* ✅ ステップ番号（丸数字）の装飾ボックス */
.online-step-frame {
	padding: 0.5em 0.5em;
	margin-left: 0.5em;
	margin-right: 0.5em;
	border-left: 10px dotted #ffd6d6;
	xxxborder-right: 10px dotted #ffd6d6;
	xxxbackground-image: repeating-linear-gradient(45deg, var(--paper)7d4, var(--paper)7d4 8px, transparent 8px, transparent 15px);
	outline-offset: 0.5em;
	width: fit-content;
}

/* -------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------- */

/* リアル教室 */
/* リアル教室 */
/* リアル教室 */
/* リアル教室 */
/* リアル教室 */
/* -------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------- */


/* リアル教室ボックス */
.real-frame {
	position: relative;
	border-radius: 3% 3% 1% 1%;
	height: clamp(23.5rem, 6.25rem + 56.25vw, 30.5rem);
	font-weight: bold;
	padding: 0.5em 1em;
	border-right: 9px dashed rgb(from var(--brand-1) r g b / 0.2);
	border-bottom: 9px dashed rgb(from var(--brand-1) r g b / 0.2);
	outline: 7px solid rgb(from var(--brand-1) r g b / 0.2);
	outline-offset: 5px;
	margin: 1rem
	z-index: -2;
}
/* リアル教室ボックス背景*/
.real-frame-bg {
	top: 3%;
	left: 10%;
	position: absolute;
	border-radius: 10% 10% 1% 1%;
	margin-left: 2rem;
  background-color: transparent;
  background-image: repeating-linear-gradient(45deg, #06b6d433, #06b6d433 2px, transparent 2px, transparent 12px);
  background-position: 20px -50px -20px 20px;
	width: clamp(30.375rem, 22.784rem + 37.95vw, 51.25rem);
	height: clamp(24.375rem, 21.875rem + 12.5vw, 31.25rem);
	z-index: -4;
}
/* リアル教室ボックスメッセージ*/
.real-message {
	position: absolute;
  xxbackground-color: white;
	border-radius: 35%;
	top: 50%;
	right: 0%;
	left: 40%;
	font-size: clamp(0.75rem, 0.469rem + 1.41vw, 4.875rem);
	white-space: nowrap;
	z-index: 9999;
}

.real-photo img {
	position: absolute;
	border-radius: 5%;
	right: 0;
	left: 0;
	margin: 0 auto;
}
.real-message-2 {
	position: absolute;
	right: 0;
	left: 0;
	bottom: 0%;
	margin: 0 auto;
	white-space: nowrap;
}

.real-feature {
    padding: 5px 30px 5px 30px;
    border-radius: 20px;
    background-image:
        linear-gradient(90deg, transparent 15px, #FDFDFD 16px calc(100% - 16px), transparent calc(100% - 15px)),
        repeating-linear-gradient(45deg, var(--sand), 2px, white 2px 4px);
}

.real-feature-message {
    padding: 15px 20px;
    border: 5px solid var(--ink-2);
    border-radius: 50px;
    background-image:
        linear-gradient(90deg, transparent 15px, var(--ink-2) 16px calc(100% - 16px), transparent calc(100% - 15px)),
        repeating-linear-gradient(45deg, var(--sand), 2px, var(--ink-2) 2px 4px);
}


/* instagram 埋め込みサイズ調整 */
.real-instagram {
	left:1%;
}






/* -------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------- */

/* メソッド  */
/* メソッド */
/* メソッド */
/* メソッド */
/* メソッド  */
/* -------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------- */


/* method-タイトル */
.method-top-head {
    position: relative;
    padding: 1rem 1rem 1.2rem;
    border-bottom: 2px solid var(--ink-1);
	width: fit-content;
	margin:0 auto;
	margin-bottom:3rem;
}

.method-top-head:before,
.method-top-head:after {
    position: absolute;
    left: 50%;
    content: "";
    height: 0;
    width: 0;
}

.method-top-head:before {
    top: 100%;
    border: 9px solid;
    border-color: transparent;
    border-top-color: var(--ink-1);
    margin-left: -9px;
}

.method-top-head:after {
    top: 99%;
    border: 8px solid;
    border-color: transparent;
    border-top-color: white;
    margin-left: -8px;
}


/* method-ラップ */
.method-top-wrapper {
	position: relative;
	height: clamp(9.375rem, 2.344rem + 35.16vw, 37.5rem);
	margin-bottom: 5em;
}

/* method-top画像 */
.method-top-photo img {
	position: absolute;
	border-radius: 10px;
	margin: 0 auto;
	left: 0;
	right: 0;
	z-index:0;
}

/* method-top-message */
.method-top-message {
	position: absolute;
	border-radius: 5px;
	padding-right: 1rem;
	background-color: white;
	top: clamp(5rem, -1.563rem + 32.81vw, 26.25rem);
	font-size: clamp(0.75rem, 0.547rem + 1.02vw, 2.063rem);
}


/* method 最初の説明文 */
.method-first-text {
    position: relative;
    padding: 0.5rem 1rem;
	background-color: rgb(from var(--paper) r g b / 0.851);
	border-radius: 10px;
}
/* method 最初の説明文の装飾（全体丸括弧） */
/* .method-first-text::before,
.method-first-text::after {
    position: absolute;
    top: -3px;
    width: 10px;
    height: 100%;
    content: '';
}

.method-first-text::before {
    border-left: solid 8px #e8ce5acc;
    border-radius: 50px 0 0 50px;
    left: 0;
}

.method-first-text::after {
    border-right: solid 8px #e8ce5acc;
    border-radius: 0 50px 50px 0;
    right: 0; 
}*/

.method-second-text {
    position: relative;
/*     padding: 1rem; */
    margin-bottom: 0.2rem;
	z-index: 2
}

.method-second-text::before,
.method-second-text::after {
    position: absolute;
    height: 100%;
    width: 1.5rem;
    content: '';
	  background-image: repeating-linear-gradient(45deg, #c5c5c580, #c5c5c580 4px, transparent 4px, transparent 9px);
	z-index: 0
}

.method-second-text::before {
    top: 0;
    left: 0;
	    border-radius: 50px 0 0 50px;
}

.method-second-text::after {
    bottom: 0;
    right: 0;
	border-radius: 0 50px 50px 0;
}

/* メソッドの重要性枠 */
.method-point-wrapper {
    position: relative;
    border: 1px solid var(--ink-muted);
    background-color: white;
    color: var(--ink-1);
	border-radius: 20px;
	padding: 1rem;
}

.method-point-title {
    position: absolute;
/*     display: inline-block; */
	border-radius: 20px;
    top: -2rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0rem 1rem;
    background-color: white;
	white-space: nowrap;
	font-size: clamp(0.875rem, 0.781rem + 0.47vw, 1.25rem);
}

.method-point-text {
    padding: 1rem;
    line-height: 1.5;
}


/* メソッドの重要性枠 */



/* ベースメソッドの全体枠 */
.method-base-wrapper {
	position: relative;
    border: 1px solid var(--ink-muted);
    background-color: white;
    color: var(--ink-1);
	border-radius: 20px;
	padding: 4rem 1rem 1rem 1rem;
	z-index: -1;
}

.method-base-title {
	position: absolute;
	border-radius: 20px;
    top: -2rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0rem 1rem;
    background-color: white;
	white-space: nowrap;
	font-size: clamp(0.875rem, 0.781rem + 0.47vw, 1.25rem);
}

.method-base-message {
	position: absolute;
	top: 3.5rem;
    left: 0%;
	background-color: white;
	text-decoration: underline;
	text-decoration-color: var(--teal-light);
	border-radius: 20px;
	white-space: nowrap;	
	font-size: clamp(0.875rem, 0.781rem + 0.47vw, 1.25rem);
	transform:rotate(-20deg);    /* 中心を基準点に反時計回りに回転する */
	z-index: 2;
	
}


.method-base-text {
/* 	position: absolute;
	top: -2rem;
    left: 50%;
    transform: translateX(-50%); */
/* 	padding: 3rem; */
}
/* ベースメソッドの全体枠 */
.method-base-column {
/*     padding: 3rem 3rem 3rem 3rem; */
}
.method-base-photo {
	margin: 1rem;
}


/* ベースメソッドの装飾 */
.method-base-cbt {
  border-radius: 50px;
	width: clamp(17.5rem, 17.031rem + 2.34vw, 17.375rem);
	padding: 0.5em 0.5em;
	background-color: transparent;
  background-image: repeating-linear-gradient(45deg, #d6e3ff66, #d6e3ff66 2px, transparent 2px, transparent 7px);
	margin: 0 auto;
/* 	white-space: nowrap; */
	font-size: clamp(0.875rem, 0.844rem + 0.16vw, 1rem);
	text-align: center;
}
.method-base-dir {
  border-radius: 50px;
	width: clamp(17.5rem, 17.031rem + 2.34vw, 17.375rem);
	padding: 0.5em 0.5em;
	background-color: transparent;
  background-image: repeating-linear-gradient(45deg, #ffc65c66, #ffc65c66 2px, transparent 2px, transparent 7px);
	margin: 0 auto;
/* 	white-space: nowrap; */
	font-size: clamp(0.875rem, 0.844rem + 0.16vw, 1rem);
	text-align: center;
}
.method-base-rdi {
  border-radius: 50px;
	width: clamp(17.5rem, 17.031rem + 2.34vw, 17.375rem);
	padding: 0.5em 0.5em;
	background-color: transparent;
  background-image: repeating-linear-gradient(45deg, #ffdd4766, #ffdd4766 2px, transparent 2px, transparent 7px);
	margin: 0 auto;
/* 	white-space: nowrap; */
	font-size: clamp(0.875rem, 0.844rem + 0.16vw, 1rem);
	text-align: center;
}



/* 下矢印の▼*/
.under-triangle {
	position: absolute;
	display: inline-block;
/* 	bottom: clamp(-1.25rem, 69.94rem + -355.95vw, -375rem); */
	left: 0;
	right: 0;
	bottom: -3em;
	margin: 0 auto;
	z-index: 2;
	display: inline-block;
	width: clamp(9.375rem, 7.031rem + 11.72vw, 18.75rem);
	height: clamp(2.531rem, 1.898rem + 3.16vw, 5.063rem);
/* 	width: 300px;
	height: 81px; */
	background: #ecf4ff;
	clip-path: polygon(0 0, 100% 0%, 50% 100%);
	z-index: 3;
}
/* 下矢印の▼*/

/* ベースメソッドの装飾 */



/* ランタンの装飾 */

.method-lantern-wrapper {
	position: relative;
    border: 1px solid var(--ink-muted);
    background-color: white;
    color: var(--ink-1);
	border-radius: 20px;
	padding: 4rem 1rem 1rem 1rem;
	z-index: -2;
}
.method-lantern-title {
	position: absolute;
	border-radius: 20px;
    top: -2rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0rem 1rem;
    background-color: white;
	white-space: nowrap;
	font-size: clamp(0.875rem, 0.781rem + 0.47vw, 1.25rem);
}

.lantern-text {
    position: relative;
/*     padding: 5rem 0; */
    margin-bottom: 0.2rem;
    color: var(--ink-2);
    font-weight: bold;
    text-align: center;
}

.lantern-text:before {
    position: absolute;
    width: 210px;
    height: 210px;
    top: 50%;
    left: 50%;
    border-radius: 50%;
/*     background: var(--paper)f9e; */
    transform: translate(-50%, -50%);
	background-color: var(--paper);
  background-image: radial-gradient(circle, #ffe798 2.5px, transparent 2.5px), radial-gradient(circle, #ffe798 2.5px, transparent 2.5px);
  background-position: 0 0, 5px 10px;
  background-size: 10px 20px;
    content: '';
    z-index: -1;
}

.method-lantern-column {
    padding: 1rem 8% 1rem 9%;
	margin: 0 auto;
}

.method-lantern-photo {
	margin: 1rem;
}
/* ランタンの装飾 */


/* -------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------- */

/* プログラム */
/* プログラム */
/* プログラム */
/* プログラム */
/* プログラム */
/* -------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------- */



/* program-ラップ */
.program-top-wrapper {
	position: relative;
	height: clamp(11.25rem, 1.705rem + 47.73vw, 37.5rem);
	margin-bottom: 0em;
	z-index:0;
}

/* method-top画像 */
.program-top-photo img {
	position: absolute;
	border-radius: 10px;
	margin: 0 auto;
	left: 0;
	right: 0;
	z-index:0;
}

/* program-top-message */
.program-top-message {
	position: absolute;
	border-radius: 5px;
	padding-right: 1rem;
	background-color: white;
	top: clamp(5rem, -1.563rem + 32.81vw, 26.25rem);
	font-size: clamp(0.75rem, 0.547rem + 1.02vw, 2.063rem);
}

.program-feature-column {
	position: relative;
	z-index: 2;
}

/* 下矢印の▼*/
.program-under-triangle {
	position: absolute;
/* 	display: inline-block; */
/* 	bottom: clamp(-1.25rem, 69.94rem + -355.95vw, -375rem); */
	left: 0;
	right: 0;
/* 	bottom: -5em; */
	margin: 0 auto;
	width: clamp(18.75rem, 5.114rem + 68.18vw, 56.25rem);
	height: clamp(2.531rem, 1.898rem + 3.16vw, 5.063rem);
/* 	width: 300px;
	height: 81px; */
/* 	margin-bottom: 16rem; */
	background: #ecf4ff;
	clip-path: polygon(0 0, 100% 0%, 50% 100%);
	z-index: 3;
}
/* 下矢印の▼*/




/* リレートフル・プログラムの全体枠 */
.program-model-wrapper {
	position: relative;
    border: 1px solid var(--ink-muted);
    background-color: white;
    color: var(--ink-1);
	border-radius: 20px;
	padding: 4rem 1rem 1rem 1rem;
	z-index: -2;
}
.program-model-title {
	position: absolute;
	border-radius: 20px;
    top: -2rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0rem 1rem;
    background-color: white;
	white-space: nowrap;
	font-size: clamp(0.875rem, 0.781rem + 0.47vw, 1.25rem);
}

.program-model-message {
	position: absolute;
	top: 1.5rem;
    left: 0%;
	background-color: white;
	text-decoration: underline;
	text-decoration-color: var(--teal-light);
	border-radius: 20px;
	white-space: nowrap;	
	font-size: clamp(0.875rem, 0.781rem + 0.47vw, 1.25rem);
	transform:rotate(-15deg);    /* 中心を基準点に反時計回りに回転する */
	z-index: 2;
}

/* .program-model-message {
	position: absolute;
	top: 3.5rem;
    left: 0%;
	background-color: white;
	text-decoration: underline;
	text-decoration-color: var(--teal-light);
	border-radius: 20px;
	white-space: nowrap;	
	font-size: clamp(0.875rem, 0.781rem + 0.47vw, 1.25rem);
	transform:rotate(-20deg);    /* 中心を基準点に反時計回りに回転する */
	z-index: 2;
	
} */

/* ベースメソッドの全体枠 */
.program-model-column {
/*     padding: 3rem 3rem 3rem 3rem; */
}

.program-model-photo {
	margin: 1rem 1rem 3rem 1rem;
}

/* プログラムステップの装飾 */
.program-border {
  border-radius: 50px;
	width: fit-content;
	padding: 0.5em 0.5em;
	background-color: transparent;
  background-image: repeating-linear-gradient(315deg, #fdf4d4cc, #fdf4d4cc 5px, transparent 5px, transparent 9px);
	margin: 0 auto;
}
/* プログラムステップの装飾 */



/* 成長のステップ-ラップ */
/* 成長のステップ-ラップ */

.growth-model-wrapper {
	position: relative;
    border: 1px solid var(--ink-muted);
    background-color: white;
    color: var(--ink-1);
	border-radius: 20px;
	padding: 5rem 1rem 1rem 1rem;
	z-index: -2;
}
.growth-model-title {
	position: absolute;
	border-radius: 20px;
    top: -2rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0rem 1rem;
    background-color: white;
	white-space: nowrap;
	font-size: clamp(0.875rem, 0.781rem + 0.47vw, 1.25rem);
}

/* method-top画像 */
.growth-model-photo img {
	border-radius: 10px;
	margin: 0 auto;
	left: 0;
	right: 0;
	z-index:0;
}

.growth-model-message {
	position: absolute;
	top: 2.0rem;
    left: 0%;
	background-color: white;
	text-decoration: underline;
	text-decoration-color: var(--teal-light);
	border-radius: 20px;
	white-space: nowrap;	
	font-size: clamp(0.875rem, 0.781rem + 0.47vw, 1.25rem);
	transform:rotate(-10deg);    /* 中心を基準点に反時計回りに回転する */
	z-index: 2;
}

/* growth-model-message */
/* .growth-model-message {
	position: absolute;
	border-radius: 5px;
	padding-right: 1rem;
	background-color: white;
	top: clamp(5rem, -1.563rem + 32.81vw, 26.25rem);
	font-size: clamp(0.75rem, 0.547rem + 1.02vw, 2.063rem);
} */

.growth-model-column {
	position: relative;
	z-index: 2;
}


/* -------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------- */

/* 無料体験キャンペーン */
/* 無料体験キャンペーン */
/* 無料体験キャンペーン */
/* 無料体験キャンペーン */
/* 無料体験キャンペーン */
/* -------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------- */
/* first-text 装飾 */
.first-text {
  border-radius: 20px;
  padding: 1rem 2rem;
  outline: var(--line-1) solid 1px;
  outline-offset: -5px;
    background-image: repeating-linear-gradient(45deg, var(--butter) 0 2px, var(--paper) 2px 5px);
  background-repeat: no-repeat;
  background-position: 10px 10px;
  color: rgb(51, 51, 51);
  font-weight: bold;
	border-color: var(--line-1);
}
/* first-text 装飾 */



.campaign-fukidashi-1,
.campaign-fukidashi-2,
.campaign-fukidashi-3 {
	position: relative;
	padding: 1rem 2rem;
	border-radius: 999px;
	border: 2px solid var(--line-2);
/* 	outline-offset: -5px; */
	background-position: 10px 10px;
  background-image: repeating-linear-gradient(45deg, var(--sky), var(--sky) 3px, transparent 3px, transparent 12px);
	background-repeat: no-repeat;
	color: var(--ink-1);
	font-weight: bold;
	text-align: center;
}

.campaign-fukidashi-1::before {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    height: 20px;
    width: 2px;
    background-color: var(--line-2);
    content: "";
	transform:rotate(-15deg);    /* 中心を基準点に反時計回りに回転する */
}

.campaign-fukidashi-2::before {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    height: 20px;
    width: 2px;
    background-color: var(--line-2);
    content: "";
}

.campaign-fukidashi-3::before {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    height: 20px;
    width: 2px;
    background-color: var(--line-2);
    content: "";
	transform:rotate(15deg);    /* 中心を基準点に反時計回りに回転する */
}

.campaign-fukidashi-4,
.campaign-fukidashi-5,
.campaign-fukidashi-6 {
    position: relative;
    padding: 1rem;
    border-radius: 999px;
    border: 2px solid var(--line-2);
/*     background: repeating-linear-gradient(45deg, #aAE8F2 0 3px, var(--paper) 3px 8px); */
	background-position: 8px 8px;
	background-image: repeating-linear-gradient(45deg, var(--sky), var(--sky) 3px, transparent 3px, transparent 12px);
	background-repeat: no-repeat;
    color: var(--ink-1);
    font-weight: bold;
    text-align: center;
	writing-mode: vertical-rl;
}

.campaign-fukidashi-4::before {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    height: 20px;
    width: 2px;
    background-color: var(--line-2);
    content: "";
	transform:rotate(-15deg);    /* 中心を基準点に反時計回りに回転する */
}

.campaign-fukidashi-5::before {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    height: 20px;
    width: 2px;
    background-color: var(--line-2);
    content: "";
}

.campaign-fukidashi-6::before {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    height: 20px;
    width: 2px;
    background-color: var(--line-2);
    content: "";
	transform:rotate(15deg);    /* 中心を基準点に反時計回りに回転する */
}



/* 無料体験キャンペーン見出し */

/* 新たな選択肢 装飾 */
.campaign-head {
    padding: 1rem 3rem;
    border-radius: 999px;
/*     outline: 1px solid var(--accent-1); */
    outline-offset: 2px;
	border-top: 1px solid #EAD38A;
	border-bottom: 1px solid #EAD38A;
    background: linear-gradient(-45deg, transparent 0 20px, var(--paper) 80px calc(100% - 80px), transparent calc(100% - 20px)),
        repeating-linear-gradient(45deg, var(--accent-1) 0 2px, var(--paper) 2px 5px);
    text-shadow: -1px -1px 0 var(--color-1), -1px 1px 0 var(--color-1), 1px -1px 0 var(--color-1), 3px 3px 0 var(--color-1);
    font-weight: bold;
	font-size: clamp(0.688rem, 0.506rem + 0.91vw, 1.188rem);
    text-align: center;
	width: fit-content;
	margin: auto
}
/* 新たな選択肢 装飾 */

/* キャンペーンテキスト */
.campaign-text {
    margin: 0.5rem;
    padding: 1rem;
    box-shadow: 0 0 0 10px var(--lemon);
    border-left: 5px dashed white;
    border-right: 5px dashed white;
    background-color: var(--lemon);
}
/* キャンペーンテキスト */



/* -------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------- */
/* オンライン説明会 */
/* オンライン説明会 */
/* オンライン説明会 */
/* オンライン説明会 */
/* オンライン説明会 */

/* -------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------- */

/* オンライン説明会バナー */
.online-session-banner img {
	border-radius: 15px;
}
/* オンライン説明会テキスト */
.online-session-text {
    padding: 1rem;
    box-shadow: 0 0 0 10px var(--lemon);
    border-left: 15px dotted white;
    border-right: 15px dotted white;
    background-color: var(--lemon);
}
/* オンライン説明会テキスト */


/* オンライン説明会おすすめ */
.online-session-recommend-wrapper {
	position: relative;
	padding: 0rem;
	margin: 0rem;
}
.online-session-recommend-bg {
	position: relative;
	margin: 0 auto;
}
.online-session-recommend-text {
	position: absolute;
/* 	padding: 2rem 2rem 1rem 3rem; */
	padding-top: clamp(2rem, 0.909rem + 5.45vw, 5rem);
	padding-left: clamp(2rem, -1.273rem + 16.36vw, 11rem);
	padding-right: clamp(2rem, -0.182rem + 10.91vw, 8rem);
	margin: 0 auto;
	top: 0;
	left: 0;
	right: 0;
	max-width: 915px;
	font-size: clamp(1.125rem, 1.034rem + 0.45vw, 1.375rem);
}
/* オンライン説明会おすすめ */

/* 説明会を予約するボタン */
.session-reserve-button {
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	text-decoration: none !important;
	color: var(--paper);
	font-size: 18px;
	border-radius: 20px;
	width: 200px;
	height: 40px;
	font-weight: bold;
	border-bottom: 5px solid var(--brown);
	transition: 0.3s;
	background-color: #eb8b54;
}

.session-reserve-button:hover {
  border-bottom-width: 0;
  transform: translateY(5px);
}

.session-reserve-button > a {
	text-decoration: none !important;
}

/* 説明会を予約するボタン */


/* -------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------- */

/* 認知行動療法（CBT） */
/* 認知行動療法（CBT） */
/* 認知行動療法（CBT） */
/* 認知行動療法（CBT） */
/* 認知行動療法（CBT） */
/* -------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------- */


/* 認知行動療法（CBT）-ラップ */

.paragraph-wrapper {
	position: relative;
    border: 1px solid #dcdce2;
    background-color: white;
    color: var(--ink-1);
	border-radius: 10px;
	padding: 3rem 1rem 2rem 1rem;
	z-index: -2;
	margin: 5rem 0 5rem 0;
}

h2.paragraph-title-2 {
	position: absolute;
/* 	border-radius: 25px 25px 5px 5px; */
	top: -2rem;
	left: -0.5rem;
	/*     transform: translateX(-50%); */
	background-color: white;
	white-space: nowrap;
	font-size: clamp(1rem, 0.727rem + 1.36vw, 1.75rem);
	padding: 0em 1em;
	background-image: linear-gradient(90deg, #ffe10080 0%, #ff000080 100%);
	background-position: left bottom;
	background-size: 100% 0.8em;
	background-repeat: no-repeat;
/* 	width: fit-content; */
}


/* -------------------------------------------------------------------------------------------- */
/* 投稿リストブロックをおしゃれに */
/* 投稿リストブロックをおしゃれに */
/* 投稿リストブロックをおしゃれに */

/* -------------------------------------------------------------------------------------------- */

/** トップページのお知らせ一覧 **/
/* 日付とカテゴリー並べ替え */
.newslist .p-postList__cat {
	order: 1;
}
.newslist .p-postList__times.c-postTimes.u-thin {
	order: 2;
}
/* 日付とカテゴリーのアイコン非表示 */
.newslist time.c-postTimes__posted.icon-posted::before,.newslist span.p-postList__cat.icon-folder::before{
	display: none;
}
/* 日付とカテゴリーの文字サイズ */
/* .newslist .p-postList__cat,.top-newslist time.c-postTimes__posted {
font-size: 15px;
} */
/* カテゴリーの装飾 */
.newslist .p-postList__cat {
	color: white;
	font-weight: bold;
	background-color: #d3bf81;
	border: solid 1px #d3bf81;
	border-radius: 10px;
	padding: 4px;
}



/* -------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------- */
/* ウィジェット装飾 */
/* ウィジェット装飾 */
/* ウィジェット装飾 */
/* ウィジェット装飾 */
/* ウィジェット装飾 */

/* -------------------------------------------------------------------------------------------- */

/* ヘッダーメニューを横並びに */
.field {
display: flex;
}

/* 無料体験キャンペーンボタン */
.campaign-button {
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	text-decoration: none;
	color: var(--paper);
	font-size: 14px;
	border-radius: 20px;
	width: fit-content;
	height: 40px;
	padding: 0 0.8rem 0 0.8rem;
	margin-top: 0.5rem;
	font-weight: bold;
	border-bottom: 5px solid var(--brown);
	transition: 0.35s;
	background-color: #eb8b54;
	white-space: nowrap;
}
.campaign-button:hover {
  border-bottom-width: 0;
  transform: translateY(5px);
}
/* 無料体験キャンペーンボタン */


/* オンライン説明会ボタン */
.online-session-button {
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	text-decoration: none;
	color: var(--paper);
	font-size: 14px;
	border-radius: 20px;
	width: fit-content;
	height: 40px;	
	padding: 0 0.8rem 0 0.8rem;
	margin-top: 0.5rem;
	margin-left: 0.5rem;
	font-weight: bold;
	border-bottom: 5px solid var(--brown);
	transition: 0.35s;
	background-color: #8cbfff;
	white-space: nowrap;
}
.online-session-button:hover {
  border-bottom-width: 0;
  transform: translateY(5px);
}
/* オンライン説明会ボタン */




/* ヘッダーメニューにカーソルを乗せたときに反転色にする */
/* ヘッダーメニューにカーソルを乗せたときに反転色にする */


/* ヘッダーの箱 */
div.l-header__inner.l-container {
}



/* グローバルナビ */
.c-gnav > li:hover > a, .c-gnav > .-current > a {
	background: transparent;
	color: var(--gold-dark);
	transition: all .25s;
 	transform: translateY(4px); /*ボタン押した感 */
	transition: 0.8s;
	background: linear-gradient(transparent 50%, rgb(from var(--gold-dark) r g b / 0.102) 90%);
	border-radius: 0 0 30px 30px;
}



/* グローバルナビの各メニュー */




/* ヘッダーメニューにカーソルを乗せたときに反転色にする */
/* ヘッダーメニューにカーソルを乗せたときに反転色にする */


/* ヘッダーナビのフォントサイズ・文字色・太さ・文字間隔を変更 */
.c-gnav>.menu-item>a .ttl {
	font-size: 16px;
	/* color: #006d4d; */
	font-weight: bold;
	/* letter-spacing: 1.3px; */
}
/* ヘッダーナビのフォントサイズ・文字色・太さ・文字間隔を変更 */

/* サブメニュー */
/* サブメニュー */
/* サブメニュー */

/* ===== ヘッダーの固定メニューにすりガラス効果 ===== */
.l-fixHeader {
  background-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10000;
}

/* ===== サブメニュー：すりガラス風に（通常ヘッダー） ===== */
.sub-menu {
/* 	position: absolute;  */
	top: 100%;
	left: 0;
	width: max-content;
	background-color: transparent !important;
	border-radius: 10px;
	overflow: hidden;
	padding: 0.75em 1em;
	backdrop-filter: blur(8px) !important;
	-webkit-backdrop-filter: blur(8px) !important;
	z-index: 5;
	font-weight: bold;
}

/* ===== サブメニュー：すりガラス風に（追従ヘッダー） ===== */
.l-fixHeader .sub-menu {
	position: absolute; 
	top: 100%;
	left: 0;
	width: max-content;
	background-color: rgba(255, 255, 255, 0.55) !important;
	border-radius: 10px;
	overflow: hidden;
	padding: 0.75em 1em;
	backdrop-filter: blur(8px) !important;
	-webkit-backdrop-filter: blur(8px) !important;
	z-index: 5;
	font-weight: bold;
}


/* サブメニューのリンクスタイル（ホバー時） */
.sub-menu a:hover {
  color: var(--gold-dark); /* ホバー時の文字色（お好みで） */
   background-color: transparent !important; /* 背景色を変えない */ 
	transition: all .3s !important;
	background: linear-gradient(transparent 50%, rgb(from var(--gold-dark) r g b / 0.102) 90%);
	border-radius: 0 0 15px 15px;
}



/* ===== スマホメニュー：すりガラス風に===== */
@media screen and (max-width: 768px) {
.l-header, 
.l-fixHeader {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.6); 
    backdrop-filter: blur(10px);              
    -webkit-backdrop-filter: blur(10px);       
    z-index: 9999;
    border-bottom: 1px solid rgba(200, 200, 200, 0.3); 
} 
} 
/* サブメニュー */
/* サブメニュー */
/* サブメニュー */

	
/* ===== ロゴをホバーエフェクト（追従ヘッダー） ===== */	
.img.image.wp-image-2585.attachment-medium size-medium,
.img.c-headLogo__img.-top,
.c-headLogo__img {
	transition: 0.6s;
}
	
.img.image.wp-image-2585.attachment-medium size-medium,
.img.c-headLogo__img.-top,
.c-headLogo__img:hover {
	border-bottom-width: 0;
	transform: translateY(5px);
}

	
	
/* ヘッダーロゴを縦中央＋微調整 */
.l-header__logo {
	display: flex;
	align-items: center; /* ← 縦中央揃え */
}

.c-headLogo__img.-top {
	display: block;
	max-height: 60px; /* ロゴの縦サイズ上限（調整可） */
	margin-top: -4px;  /* 少しだけ上にずらす */
	vertical-align: middle;
}





/* フッターメニュー */
/* フッターメニュー */
/* フッターメニュー */
	
#before_footer_widget > div {
	background-color: #fcf3e0 !important;
}

/* .l-footer__nav li:first-child a {
border-left: none;
}
.l-footer__nav a {
border: none;
}
.l-footer__nav a:hover {
color: var(--gold-dark);
text-decoration: none;
transition: all .25s;
} */

/* フッターメニュー */
/* フッターメニュー */



/* -------------------------------------------------------------------------------------------- */


/* 設定系の装飾 */
/* 設定系の装飾 */

/* パンくずリスト削除 */
.l-breadcrumb,
.p-breadcrumb,
.c-breadcrumb,
.breadcrumb,
#breadcrumb {
  display: none !important;
}
/* パンくずリスト削除 */



/* SNSボタン並べ替え */
.c-iconList__item.-twitter {
	order: 2;
}
.c-iconList__item.-instagram {
	order: 1;
}
.c-iconList__item.-line {
	order: 3;
}
/* .c-iconList__item.-youtube {
	order: 8;
} */

/* .c-iconList__item.-feedly {
	order: 10;
} */
/* .c-iconList__item.-rss {
	order: 11;
} */
.c-iconList__item.-contact {
	order: 4;
}
/* SNSボタン並べ替え */

/* 設定系の装飾 */
/* 設定系の装飾 */


/* -------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------- */
	
	
/* =========================================
  SWELL フルワイド：斜めストライプ＋下境界ウェーブ（完成版）
========================================= */

/* 背景ストライプ */
.swell-block-fullWide.stripe-wave{
  position: relative;
  overflow: hidden; /* 波のはみ出しを切る */
  background-image: repeating-linear-gradient(
    135deg,
    #FFF9E4 0px,
    #FFF9E4 14px,
    #FFFFFF 14px,
    #FFFFFF 28px
  ) !important;

  /* ✅ 波の分だけ下に余白を作る（ここ重要） */
  padding-bottom: clamp(36px, 5vw, 70px);
}

/* インナーが白で塗って邪魔するのを防ぐ */
.swell-block-fullWide.stripe-wave .swell-block-fullWide__inner{
  background: transparent !important;
}

/* ✅ 下の境界を“波で切る” */
.swell-block-fullWide.stripe-wave::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: clamp(36px, 5vw, 70px);

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,60,583,72.05c69.27,11.8,138.3-1.23,207-17.69,71.73-17.2,142.84-35.61,214-27.25,62.78,7.39,119.23,31.2,179,34.53,31.06,1.73,62.16-2.2,93-10.55V0Z' fill='%23ffffff'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 1200px 100%;
  background-position: bottom;

  /* ✅ 反転して “下が白で塗られる波” にする */
  transform: rotate(180deg);

  z-index: 3;
  pointer-events: none;
}

/* 上の波（必要なら） */
.swell-block-fullWide.stripe-wave::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: clamp(36px, 5vw, 70px);

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,60,583,72.05c69.27,11.8,138.3-1.23,207-17.69,71.73-17.2,142.84-35.61,214-27.25,62.78,7.39,119.23,31.2,179,34.53,31.06,1.73,62.16-2.2,93-10.55V0Z' fill='%23ffffff'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 1200px 100%;
  background-position: top;

  z-index: 3;
  pointer-events: none;
}

.stripe-wave{
  background-size: 40px 40px;
  animation: stripeMove 15s linear infinite;
}

@keyframes stripeMove{
  0%   { background-position: 0 0; }
  100% { background-position: 120px 120px; }
}

@media (max-width: 600px){
  .swell-block-fullWide.stripe-wave::before,
  .swell-block-fullWide.stripe-wave::after{
    height: 80px !important;
    background-size: 520px 120% !important;
  }
}

/* =========================
  フルワイド：右斜めストライプ＋波の境界
========================= */

/* =========================
ふわふわ浮く
========================= */
/* 舞台（フルワイド） */
.swell-block-fullWide.stripe-wave{
  position: relative;
  overflow: hidden; /* キャラがはみ出しても横スクロールさせない */
}

/* キャラを“自由に動ける状態”にする */
.floaty{
  position: absolute;      /* ← カラムの制約から外す */
  left: 0;
  bottom: -90px;            /* 下の位置はお好み */
  width: 120px;            /* キャラのサイズ（お好み） */
  z-index: 20;
  will-change: transform;
  animation: floaty 25.2s ease-in-out infinite;
}

/* 左→右→左へ“ぴょんぴょん移動” */
@keyframes floaty{
  0%   { transform: translateX(0) translateY(0); }
  15%  { transform: translateX(15vw) translateY(-16px); }
  30%  { transform: translateX(30vw) translateY(0); }
  45%  { transform: translateX(50vw) translateY(-12px); }
  60%  { transform: translateX(70vw) translateY(0); }
  75%  { transform: translateX(85vw) translateY(-16px); }
  100% { transform: translateX(0) translateY(0); }
}


/* =========================
ふわふわ浮く
========================= */
/* =========================
キラキラ粒が舞う
========================= */
.sparkle{
  position: relative;
  overflow: hidden;
}

.sparkle::before{
  content:"";
  position:absolute;
  inset:-40px;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.55) 1px, transparent 2px),
    radial-gradient(circle, rgba(255,230,160,.55) 1px, transparent 2px);
  background-size: 60px 60px, 90px 90px;
  animation: sparkleMove 18s linear infinite;
  pointer-events:none;
  z-index: 0;
}

.sparkle > *{ position: relative; z-index: 1; }

@keyframes sparkleMove{
  0%   { transform: translate(0,0); }
  100% { transform: translate(120px,80px); }
}

/* =========================
キラキラ粒が舞う
========================= */

/* reCAPTCHAマークの非表示*/
.grecaptcha-badge {
    visibility: hidden;
}
/* reCAPTCHAマークの非表示*/


/* =========================
コンタクトフォーム装飾
========================= */

/* フォーム全体の幅を調整して中央寄せ */
.wpcf7 {
    max-width: 600px;
    margin: 0 auto;
}

/* 各項目の見出し（ラベル）の調整 */
.wpcf7-form label {
    font-weight: bold;
    color: #4a3b32; /* サイトに合わせた優しい焦げ茶色 */
    display: block;
    margin-bottom: 20px;
}

/* 入力欄（テキスト・メール・メッセージ）のデザイン */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea {
    width: 100%;
    padding: 15px;
    border: 1px solid #dcdcdc;
    border-radius: 8px; /* 角を少し丸く */
    background-color: #fafafa;
    font-size: 16px; /* スマホでのズーム防止 */
    box-sizing: border-box;
    margin-top: 8px;
    transition: 0.3s;
}

/* 入力欄をクリックした時の枠線の色 */
.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form textarea:focus {
    border-color: #d87c51; /* ヘッダーに合わせたオレンジ */
    outline: none;
    background-color: #ffffff;
}

/* 送信ボタンのデザイン */
.wpcf7-form input[type="submit"] {
    background-color: #d87c51; /* ヘッダーに合わせたオレンジ */
    color: #ffffff;
    font-weight: bold;
    font-size: 18px;
    padding: 15px 40px;
    border: none;
    border-radius: 30px; /* ヘッダーのボタンのような丸み */
    cursor: pointer;
    display: block;
    width: 250px;
    margin: 40px auto 0; /* ボタンを中央に配置 */
    transition: 0.3s;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* 軽い影をつける */
}

/* 送信ボタンにマウスを乗せた時の動き */
.wpcf7-form input[type="submit"]:hover {
    background-color: #bf653c; /* 少し濃い色に */
    transform: translateY(-2px); /* 少し浮き上がる */
    box-shadow: 0 6px 10px rgba(0,0,0,0.15);
}
/* =========================
コンタクトフォーム装飾
========================= */