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


/* 全共通 */
.nowrap { 
	white-space: nowrap;
}

/* 固定ページのタイトルを非表示 */
.page .c-pageTitle {
  display: none !important;
}
/* 固定ページのタイトルを非表示 */

/* 固定ページのパンくずリストを非表示 */
.page .c-breadcrumb {
  display: none !important;
}
/* 固定ページのパンくずリストを非表示 */


.picture-rounder img{
  border-radius: 12px;
}

: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 へ */

/* 一旦全部非表示 */
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の余白を無くす */



.cap_box_ttl {
  border-radius: 12px;
}

.cap_box_content {
  border-radius: 32px;
}


/* 全共通 */


/* メインビジュアル直下 */
.main-visual-nowrap { 
	white-space: nowrap;
	font-size:clamp(0.75rem, 0.455rem + 1.48vw, 1.563rem);
        /* 	min12 max25 vo min320 max1200 */
}
/* メインビジュアル直下 */

/* top-keymessage */
/* top-keymessage */

.top-keymessage-txt {
  white-space: nowrap;
	font-size:clamp(0.875rem, 0.625rem + 1.25vw, 1.563rem);
        /* 	min14 max25 vo min320 max1200 */
}


.top-keymessage-wrapper {
  position: relative;
  z-index: 0; /* コンテンツより背面に */
  background-color: transparent !important;
}

/* すべての直下コンテンツを前面へ */
.top-keymessage-wrapper > *{
  position: relative;
  z-index: 1;
}

/* 擬似要素で “白 + ドット” を描画（四辺に余白もここで） */  /* まず白を敷く → その上にパターン（repeat） */
/* .top-keymessage-wrapper::before{
  content: "";
  position: absolute;
  top: 120px; right: 50px; bottom: 80px; left: 50px;

  background:
    url("https://yotsuba-ongaku.com/wp-content/uploads/2025/08/bg-greendot-clear.png")
    center/cover repeat,
    #ffffff;
  border-radius: 12px;
  z-index: 0;  
  pointer-events: none;
  border-radius: 8%;
  opacity: 0.7;
} */

/* top-keymessage */
/* top-keymessage */


/* for-parents */
/* for-parents */

/* ふきだし共通 */
/* 共通：線なし・やわらかい角・淡い影 */
.need-bubble{
  display:inline-block;
  position:relative;
  padding: 14px 16px 16px 14px;
  border: 0;
  border-radius: 22px;          /* 角丸でやさしく */
  line-height: 1.7;
  font-weight: 700;
  box-shadow: 0 2px 0 rgba(0,0,0,.04);
  max-width: 28ch;              /* 横に伸びすぎ防止（必要に応じて調整） */
  overflow: visible;            /* しっぽを見せる */
  font-size: clamp(0.875rem, 0.739rem + 0.68vw, 1.25rem); /* v min14 max20 vp min320 max1200 */
}

/* しっぽ：親と同じ背景を継承して自然につなげる */
.need-bubble::after{
  content:"";
  position:absolute;
  bottom:-9px;                  /* 下へ少しはみ出す */
  width:18px; height:18px;
  background: inherit;          /* 背景を継承 */
  background-size: inherit;
  background-position: inherit;
  /* 三角形（ダイヤ）っぽいしっぽ */
  clip-path: polygon(50% 0, 0 100%, 100% 100%);
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.04)); /* 影をほんのり */
}

/* しっぽの位置 */
.need-bubble.-tail-left::after   { left: 22px; }
.need-bubble.-tail-center::after { left: 50%; transform: translateX(-50%); }
.need-bubble.-tail-right::after  { right: 22px; }

/* ---------------------------------------
   バリエーション（線なし＋模様つき背景）
   --------------------------------------- */

/* need-1：ミント系 × 小さな水玉（さりげないポルカドット） */
.need-1{
  --bg:  #F3FBF7;                /* 背景色 */
  --dot: rgba(108,200,162,.22);   /* ドット色（薄め） */
  background:
    radial-gradient(var(--dot) 1.2px, transparent 1.2px) 0 0 / 12px 12px,
    radial-gradient(var(--dot) 1.2px, transparent 1.2px) 6px 6px / 12px 12px,
    var(--bg);
}

/* need-2：ペールブルー × 斜めストライプ */
.need-2{
  --bg:   #F5F9FF;
  --line: rgba(124,180,232,.18);
  background:
    repeating-linear-gradient(135deg, var(--line) 0 6px, transparent 6px 18px),
    var(--bg);
}

/* need-3：ピーチ系 × 細かい格子（グリッド） */
.need-3{
  --bg:   #FFF7F2;
  --grid: rgba(240,180,145,.18);
  background:
    linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 16px 16px,
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 16px 16px,
    var(--bg);
}

/* モバイル微調整：文字少し小さく・模様目を細かく */
@media (max-width: 599px){
  .need-bubble{ max-width: 100%; font-size: .95rem; }
  /* .need-1{ background-size: 10px 10px, 10px 10px, auto; }
  .need-3{ background-size: 14px 14px, 14px 14px, auto; } */
}


/* スマホ時：2番目（「リトミックやピアノ…」）だけ右寄せ */
@media (max-width: 599px){

  /* SWELLの has-text-align-left を上書きして右寄せ */
  .swell-block-columns__inner > .swell-block-column:nth-child(2) .has-text-align-left{
    text-align: right !important;
  }

  /* 気泡（ふきだし）を“右側に置く” */
  .swell-block-columns__inner > .swell-block-column:nth-child(2){
    display: flex;                /* コンテンツを柔軟配置 */
    justify-content: flex-end;    /* 右寄せ */
  }

  /* しっぽも右側に変更（HTMLの -tail-center をCSSで上書き） */
  .swell-block-columns__inner > .swell-block-column:nth-child(2) .need-bubble::after{
    left: auto;
    right: 22px;
    transform: none;
  }
}

/* for-parents */
/* for-parents */


/* feature */
/* feature */


/* =========================================================
   1) セクション全体：白＋ドット背景（四辺に余白あり）
   ========================================================= */
.features-section{ position:relative; z-index:-2; }
.features-section > *{ position:relative; z-index:1; }

.features-section::before{
  content:"";
  position:absolute;
  /* 四辺の余白（PC/SPで変えたい場合は後ろのメディアクエリで上書き） */
  /* top:24px; right:24px; bottom:24px; left:24px; */

  /* 下地の白＋ドット画像（画像タイルで粒感を固定） */
  /* background-color:#fff;
  background-image:url("https://yotsuba-ongaku.com/wp-content/uploads/2025/08/bg-greendot-clear.png");
  background-repeat:repeat;
  background-position: top left;
  background-size:20px 20px; ← 粒のピッチを統一（16/20/24px など好みで） */

  border-radius:12px;
  z-index:0;
  pointer-events:none;
}

/* =========================================================
   2) 見出し
   ========================================================= */
.sec-title{
  font-weight:800;
  font-size: clamp(20px, 3.2vw, 32px);
  margin-bottom: clamp(12px, 2vw, 24px);
}

/* =========================================================
   3) 行レイアウト（写真＋テキスト）
   ========================================================= */
.feature-row{
  display:flex;
  align-items:center;
  gap: clamp(16px, 4vw, 40px);
  margin: clamp(20px, 5vw, 56px) 0;
}
.feature-row.is-reverse{ flex-direction: row-reverse; }

/* スマホは縦並びに */
@media (max-width: 768px){
  .feature-row,
  .feature-row.is-reverse{ flex-direction: column; }
}

/* =========================================================
   4) 写真（点線枠は画像側に含まれている想定）
   ========================================================= */
/* 写真の最大サイズだけコントロール（円形トリミングは不要なら外してOK） */
.feature-photo{
  width: clamp(350px, 35vw, 480px); 
  /* clamp(220px, 28vw, 320px); */
  /* 画像が正円でない時だけ丸くしたい場合：下2行を有効化
     aspect-ratio:1/1;
     border-radius:50%; overflow:hidden; */
}
.feature-photo img{
  width:100%; height:auto; display:block;
  /* ↑ もし上で丸型にするなら object-fit:cover; height:100%; に変更 */
}

/* =========================================================
   5) テキストの帯（やさしいカプセル背景）
   ========================================================= */
.feature-text{ 
  max-width: 42rem; 
  white-space: nowrap;
}

.bubble{
  display:inline-block;
  padding: 14px 18px;
  border-radius: 18px;
  line-height: 1.9;
  font-weight:700;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}

/* 色バリエーション */
.bubble--mint  { background:#EAF7F1; }
.bubble--green { background:#EBF5E8; }
.bubble--peach { background:#FFF2E9; }

/* スマホ時の微調整 */
@media (max-width: 768px){
  .features-section::before{ top:16px; right:16px; bottom:16px; left:16px; }
  .bubble{ font-size: .95rem; }
}


/* feature */
/* feature */


/* コース紹介 */
/* コース紹介 */

/* ===== セクション土台（白＋水玉：四辺余白） ===== */
.courses-section{
  position: relative;
  z-index: 0;
  isolation: isolate;              /* スタックを独立させる */
}
.courses-section > *{ position: relative; z-index: 1; }
.courses-section::before{
  content: "";
  position: absolute;
  inset: 24px;                     /* top/right/bottom/left をまとめて指定 */
  background:
    url("https://yotsuba-ongaku.com/wp-content/uploads/2025/08/bg-greendot-clear.png")
    top left / 20px 20px repeat;   /* 水玉敷き詰め */
  background-color: #fff;
  border-radius: 12px;
  z-index: 0;
  pointer-events: none;            /* ← 背景はクリックを通す */
}

/* ===== 3カラムのグリッド ===== */
.courses-grid{
  display: grid !important;
  gap: clamp(16px, 3.6vw, 36px);
  grid-template-columns: repeat(3, minmax(0,1fr));
  margin-top: clamp(8px, 1.6vw, 16px);
}
@media (max-width: 1024px){
  .courses-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .courses-grid{ grid-template-columns: 1fr; }
}

/* ===== カード本体 ===== */
.course-card{
  --accent: #9AD977;
  position: relative;
  isolation: isolate;              /* カード内に独立スタックを作る */
  border: 3px solid #CFE9B6;
  border-radius: 20px;
  /* padding: clamp(18px, 3.4vw, 26px); */
  background: transparent;
  box-shadow: 8px 8px 0 rgba(201,236,182,.8);
  padding: 70px 40px 40px 40px;
}
.course-card::before{
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 14px;
  background:
    radial-gradient(rgba(144,207,142,.16) 1.6px, transparent 1.6px) 0 0/14px 14px,
    radial-gradient(rgba(144,207,142,.16) 1.6px, transparent 1.6px) 7px 7px/14px 14px,
    #F5FBF3;
  z-index: 0;                      /* ← 背景は最背面 */
  pointer-events: none;            /* ← クリックを通す */
}
.course-card > *{ position: relative; z-index: 1; } /* 中身は背景より前面 */

/* ===== 見出しピル（バッジ） ===== */
.course-badge{
  position: absolute;
  top: -100px;
  left: -15%;
  margin: 0;
  display: inline-block;
  padding: 10px 30px;
  border-radius: 9999px;
  background: var(--accent);
  color: #fff;
  font-weight: 800;
  letter-spacing: .04em;
  font-size: clamp(20px, 2.6vw, 25px);
  box-shadow: 0 6px 0 rgba(154,217,119,.5);
  white-space: nowrap;
  pointer-events: none;            /* ← バッジもクリックを通す */
}
@media (max-width: 640px){
  .course-card{ 
    padding-top: 50px; 
  }
  .course-badge{ 
    left: -15%; 
    top: -80px; 
  }
}

/* ===== 画像 ===== */
.course-photo{
  width: 100%;
  max-width: 100%;
  margin: 0;
  border-radius: 50%;
  overflow: hidden;
}
.course-photo img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* ===== 説明テキスト ===== */
.course-desc{
  text-align: left;
  line-height: 1.9;
  font-weight: 700;
  margin-top: clamp(6px, 1.6vw, 10px);
}

/* ===== ボタン：確実に最前面・クリック可能に ===== */
.course-card .swell-block-button{
  position: relative;
  z-index: 3;                      /* 背景や装飾より前 */
}
.course-card .swell-block-button__link{
  position: relative;
  z-index: 4;                      /* 念のため一段上 */
  display: inline-flex;            /* ヒットボックス安定 */
  align-items: center;
  pointer-events: auto;            /* 明示的に有効化 */
}

/* ===== クリックを邪魔しそうな上位ラッパーの背景 ===== */
.courses-section-wrapper::before,
.features-section::before{
  pointer-events: none !important; /* ← 必要なら上位の装飾も無効化 */
}

.swell-block-button__link{ position: relative !important; z-index: 99999 !important; }

/* ===================================
   SWELLのセクション装飾SVGがクリックを妨げる対策
   =================================== */
.swell-block-fullWide__SVG {
  pointer-events: none !important;  /* ← SVGの透明部分をクリック通過させる */
  z-index: 0 !important;            /* 念のため後ろに下げる */
}

/* 念のため、背景などの重なり要素もクリック通過に */
.swell-block-fullWide::before,
.swell-block-fullWide::after,
.top-keymessage-wrapper::before,
.features-section::before,
.courses-section-wrapper::before {
  pointer-events: none !important;
}

/* ボタンを最前面に確実に */
.swell-block-button,
.swell-block-button__link {
  position: relative !important;
  z-index: 50 !important;
  pointer-events: auto !important;
}

/* ===================================
   背景ブロック全体がクリックを奪う問題の最終対策
   =================================== */

/* すべてのフルワイド背景をクリック透過に */
.swell-block-fullWide {
  position: relative;
  z-index: 0 !important;
  pointer-events: none !important;  /* ← クリックを通す */
}

/* ただし中のコンテンツ部分は操作可能に戻す */
.swell-block-fullWide__inner,
.swell-block-fullWide__inner * {
  pointer-events: auto !important;  /* ← 内部のボタンなどを有効化 */
}

/* 念のためボタン類は最前面 */
.swell-block-button,
.swell-block-button__link {
  position: relative !important;
  z-index: 100 !important;
}

/* コース紹介 */
/* コース紹介 */






/* 講師紹介 */
/* 講師紹介 */

/* セクション全体（必要なら） */
.teachers-section{ background: transparent !important; }

/* ラッパー：重なりの基準 */
.teacher-hero-set{
  position: relative;
  max-width: 1040px;
  margin-inline: auto;
  text-align: center; /* CTAの中央寄せにも効く */
}

/* 写真を前面に */
.teacher-hero{
  width: min(880px, 100%);
  margin: 0 auto;
  position: relative;
  z-index: 3;           /* ← hero を最前面に */
}
.teacher-hero img{ width:100%; height:auto; display:block; }

/* コピー帯：少し上に持ち上げて写真と“重ねる”、heroより背面 */
.teacher-copy{
  position: relative;
  z-index: 2;           /* hero(3)より背面、CTA(4)より背面 */
  margin: clamp(-32px, -4vw, -44px) auto 0; /* ←上に引き上げて重ねる */
  padding: 16px 22px 40px 22px;
  max-width: 860px;
  background: #EAF7D9;
  border-radius: 18px;
  line-height: 1.9;
  font-weight: 700;
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
  top: -40px;
  font-size: clamp(0.875rem, 0.739rem + 0.68vw, 1.25rem);
}

/* CTA：帯の下端に“半分かぶせ”で中央配置＆最前面 */
.teacher-cta{
  position: relative;
  z-index: 4;                       /* 一番前に */
  display: inline-block;
  margin: clamp(-22px, -3vw, -30px) auto 0; /* ←帯と重ねるためのマイナス余白 */
  top: -70px;
}
.teacher-cta a{
  display:inline-block;
  background:#9AD977;
  color:#fff !important;
  font-weight:800;
  padding: 10px 22px;
  border-radius: 9999px;
  text-decoration:none;
  box-shadow: 0 6px 0 rgba(154,217,119,.5);
}
.teacher-cta a:hover{ opacity:.9; }

@media (max-width: 768px){
  .teacher-copy{ top: -20px; }
  .teacher-cta{ top: -60px; }
}

/* 講師紹介 */
/* 講師紹介 */


/* ====================================================== */
  /* ピアノコースページ  */
/* ====================================================== */
/* piano ヒーローの中だけ、内側コンテナの左右パディングを消す */
.piano-hero-frame > .wp-block-group__inner-container{
  padding-left: 0;
  padding-right: 0;
}

/* 内側を relative（重ねる基準） */
.piano-hero-section .swell-block-fullWide__inner{
  position: relative;
}

/* 画像とオーバーレイの共通“基準枠”（画像と同じ幅で中央寄せ） */
.piano-hero-frame{
  position: relative;
  /* 画像に合わせた最大幅：alignwide/size-largeに近い値に調整 */
  max-width: min(1100px, 92vw);
  margin-inline: auto; /* 中央寄せ */
}

/* 画像（従来どおり中央寄せのまま） */
.piano-hero-img{
  position: relative;
  z-index: 1;
}
.piano-hero-img img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 12px;  /* 角丸が不要なら削除 */
}

/* オーバーレイ：frameの左端にぴったり合わせる */
.piano-hero-overlay{
  position: absolute;
  left: -10px;                                  /* ← これで画像の左端に揃う */
  bottom: clamp(12px, 6%, 48px);            /* 好みで微調整 */
  z-index: 5;                               
  /* max-width: min(680px, 70%);               横幅（画像幅に対する%でもOK） */
  /* max-width: min(170%);  */
  width: clamp(18.75rem, -6.25rem + 125vw, 56.25rem);
  background: rgba(154,217,119,0.92);
  color: #fff;
  /* padding: clamp(10px,1.8vw,16px) clamp(16px,2.4vw,24px); */
  padding: clamp(16px,2.4vw,24px);
  border-radius: 18px;
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
  line-height: 1.6;
}

/* タイトル／サブタイトル（既存どおり） */
.piano-hero-title{
  margin: 0 0 .35em;
  font-weight: 800;
  font-size: clamp(20px, 5.2vw, 42px);
  letter-spacing: .03em;
}
.piano-hero-subtitle{
  margin: 0;
  font-weight: 700;
  font-size: clamp(15px, 3.2vw, 25px);
  line-height: 1.7;
}

/* スマホは左右に少し余白を確保しつつ左寄せキープ */
@media (max-width: 768px){
  .piano-hero-frame{ max-width: min(100%, 92vw); }
  .piano-hero-overlay{
    /* left: clamp(10px, 4vw, 18px); */
    left:-20px;
    right: clamp(10px, 4vw, 18px);  /* はみ出し防止用 */
    bottom: clamp(-6.25rem, -8.333rem + 10.42vw, -3.125rem); /* vl-min-100 max-50 vp-min320 max800 */
    max-width: none;
  }
}

/* 個別レッスン */
/* 個別レッスン */
/* 個別レッスン */

/* ================== ベース ================== */
.inperson-wrapper{
  position: relative;
  width: min(73vw, 1480px);
  margin: 0 auto;                               /* モバイルはこれで中央 */
  padding: 0 clamp(16px, 3.5vw, 40px);
  box-sizing: border-box;
}

.inperson-wrapper-2{
  position: relative;
  width: min(73vw, 1480px);
  margin: 0 auto;                               /* モバイルはこれで中央 */
  padding: 40px clamp(16px, 3.5vw, 40px);
  box-sizing: border-box;
}

/* 画像共通 */
.inperson-photo img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
}

/* タイトル */
.inperson-title{
  margin: 0 0 .6em;
  font-weight: 800;
  /* font-size: clamp(1rem, 2.0vw, 2rem); */
  font-size: clamp(1.125rem, 0.966rem + 0.8vw, 1.563rem);
  line-height: 1.2;
  color: #425b3f;
  position: relative;
}
.inperson-title::after{
  content:"";
  position:absolute;
  left:0; bottom:-6px;
  width:84px; height:6px; border-radius:9999px; background:#8ad163;
}

/* ================== PC (absolute配置) ================== */
@media (min-width:968px){
  /* ★ 中央固定の肝（親のalignwide等を無視して中央にピン留め） */
  .inperson-wrapper{
    min-height: clamp(500px, 48vw, 560px);
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
  }

  .inperson-wrapper-2{
    min-height: clamp(920px, 48vw, 1060px);
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
  }

  /* 右：写真（カード幅に連動） */
  .inperson-photo{
    position: absolute;
    top: 80px;
    right: 0; 
    /* left: auto; */
    width: clamp(500px, 66%, 760px);
    z-index: 1;
    border-radius: 10px;
  }

  /* 左：テキスト＋半透明背景 */
  .inperson-text{
    position: absolute;
    top: 40px;               
    left: 0;
    width: clamp(250px, 36%, 560px);
    z-index: 3;
    font-size: clamp(1.1rem, 1.1vw, 1.125rem);
    line-height: 1.9;
  }
  .inperson-text::before{
    content:"";
    position:absolute;
    inset:-10px -14px -10px -14px;
    background:#FFF2E9; opacity:.7; border-radius:14px;
    z-index:-1; pointer-events:none;
  }
}

/* --- スマホ専用（～767px）：絶対配置をやめてフローに戻す --- */
@media (max-width: 967px){
  .inperson-wrapper{
    min-height: auto;        /* PC用のmin-heightの影響を打ち消し */
    width: 100%;
    padding: 40px;      /* ← カード内の上下左右の余白 */
    overflow: hidden;   /* ← 角丸外への描画をカット */
  }

  .inperson-wrapper-2{
    min-height: auto;        /* PC用のmin-heightの影響を打ち消し */
    width: 100%;
    padding: 40px 22px;      /* ← カード内の上下左右の余白 */
    overflow: hidden;   /* ← 角丸外への描画をカット */
  }

  .inperson-text,
  .inperson-photo{
    position: static;        /* ← これが最重要。absoluteを無効化 */
    width: 100%;
  }

  .inperson-photo{
    margin-top: 16px;        /* テキストの下に適度な余白で配置 */
  }

  /* alignwideのはみ出し対策（カード内だけ無効化） */
  .inperson-wrapper .inperson-photo.alignwide{
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
    inset-inline-start: auto !important;
  }
}

/* --- スマホ文字調整（～967px）--- */
@media (max-width: 967px){
  /* 1) 段落の共通指定からタイトルを除外 */
  .inperson-text p:not(.inperson-title){
    font-size: clamp(0.9rem, 2.6vw, 1rem);
    line-height: 1.8;
  }

  /* 2) タイトルは“後に/高い詳細度で”指定（pを上書き） */
  .inperson-text .inperson-title{
    margin-top: 0;
    line-height: 1.2;
  }

  .inperson-text-2,
  .inperson-text-3{
    font-size: clamp(0.9rem, 2.9vw, 1.05rem);
    line-height: 1.8; /* 読みやすさのため。不要なら削除 */
  }
  /* 子要素は親サイズをそのまま使う */
  .inperson-text-2 p,
  .inperson-text-2 p{ font-size: inherit; }
}


/* 個別レッスン */
/* 個別レッスン */
/* 個別レッスン */



/* ペアレッスン */
/* ペアレッスン */
/* ぺアレッスン */

/* ================== ベース ================== */
.inperson-wrapper{
  position: relative;
  width: min(73vw, 1480px);
  margin: 0 auto;                               /* モバイルはこれで中央 */
  padding: 0 clamp(16px, 3.5vw, 40px);
  box-sizing: border-box;
}

/* 画像共通 */
.pair-photo-1 img,
.pair-photo-2 img,
.pair-photo-3 img,
.pair-photo-4 img,
.pair-photo-5 img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
}

/* タイトル */
.inperson-title{
  margin: 0 0 .6em;
  font-weight: 800;
  /* font-size: clamp(1rem, 2.0vw, 2rem); */
  font-size: clamp(1.125rem, 0.966rem + 0.8vw, 1.563rem);
  line-height: 1.2;
  color: #425b3f;
  position: relative;
}
.inperson-title::after{
  content:"";
  position:absolute;
  left:0; bottom:-6px;
  width:84px; height:6px; border-radius:9999px; background:#8ad163;
}

/* ================== PC (absolute配置) ================== */
@media (min-width:968px){
  /* ★ 中央固定の肝（親のalignwide等を無視して中央にピン留め） */
  .inperson-wrapper{
    min-height: clamp(550px, 48vw, 600px);
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
  }

  /* 右：写真（カード幅に連動） */
  .pair-photo-1{
    position: absolute;
    top: 20px;
    right: 90px; 
    /* left: auto; */
    width: clamp(200px, 66%, 300px);
    z-index: 1;
    border-radius: 10px;
  }

  .pair-photo-2{
    position: absolute;
    top: 240px;
    right: 0; 
    /* left: auto; */
    width: clamp(200px, 66%, 300px);
    z-index: 1;
    border-radius: 10px;
  }

  .pair-photo-3{
    position: absolute;
    top: 20px;
    right: 0px; 
    /* left: auto; */
    width: clamp(200px, 66%, 300px);
    z-index: 1;
    border-radius: 10px;
  }

  .pair-photo-4{
    position: absolute;
    top: 240px;
    right: 90px; 
    /* left: auto; */
    width: clamp(200px, 66%, 300px);
    z-index: 1;
    border-radius: 10px;
  }

  .pair-photo-5{
    position: absolute;
    top: 480px;
    right: 70px; 
    /* left: auto; */
    width: clamp(200px, 66%, 300px);
    z-index: 1;
    border-radius: 10px;
  }

  /* 左：テキスト＋半透明背景 */
  .inperson-text-2{
    position: absolute;
    top: 40px;               
    left: 0;
    width: clamp(420px, 36%, 560px);
    z-index: 3;
    font-size: clamp(1rem, 1.1vw, 1.125rem);
    line-height: 1.9;
  }
  .inperson-text-2::before{
    content:"";
    position:absolute;
    inset:-10px -14px -10px -14px;
    background:#feffe9; opacity:.7; border-radius:14px;
    z-index:-1; pointer-events:none;
  }

  .inperson-text-3{
    position: absolute;
    top: 740px;               
    left: 0;
    width: clamp(620px, 36%, 1260px);
    z-index: 3;
    font-size: clamp(1rem, 1.1vw, 1.125rem);
    line-height: 1.9;
  }
  .inperson-text-3::before{
    content:"";
    position:absolute;
    inset:-10px -14px -10px -14px;
    background:#feffe9; opacity:.7; border-radius:14px;
    z-index:-1; pointer-events:none;
  }
}

/* ================== テーマのalignwide対策（最小限） ================== */
/* figureに alignwide が付いていても、このカード内では無効化 */
.inperson-wrapper .inperson-photo.alignwide,
.inperson-wrapper .pair-photo-1.alignwide,
.inperson-wrapper .pair-photo-2.alignwide,
.inperson-wrapper .pair-photo-3.alignwide,
.inperson-wrapper .pair-photo-4.alignwide,
.inperson-wrapper .pair-photo-5.alignwide{
  margin:30px !important;
  max-width:none !important;
  transform:none !important;
  inset-inline-start:auto !important;
}


/* --- スマホ専用（～767px）：絶対配置をやめてフローに戻す --- */
@media (max-width: 967px){
  .inperson-wrapper{
    min-height: auto;        /* PC用のmin-heightの影響を打ち消し */
    width: 100%;
    padding: 40px 25px;      /* ← カード内の上下左右の余白 */
    overflow: hidden;   /* ← 角丸外への描画をカット */
  }
 /* 画像ラッパーの共通（ブロック要素で幅を持たせる） */
  .pair-photo-1,
  .pair-photo-2,
  .pair-photo-3,
  .pair-photo-4,
  .pair-photo-5{
    position: static;      /* ← absolute解除 */
    display: block;        /* 念のため明示 */
    width: 70%;            /* 小さめ（好みで60〜80%） */
    max-width: 360px;
    margin-top: 16px;
  }

  /* 左 → 右 のジグザグ */
  .pair-photo-1,
  .pair-photo-4,
  .pair-photo-5{
     margin-left: 0;    margin-right: auto; 
    } /* 左寄せ */
  .pair-photo-2,
  .pair-photo-3{
     margin-left: auto; margin-right: 0;    
    } /* 右寄せ ←ここが鍵 */

  /* alignwideのはみ出し対策：左右で“別”に指定しないと右寄せが消える */
  .inperson-wrapper .pair-photo-1.alignwide,
  .inperson-wrapper .pair-photo-4.alignwide, 
  .inperson-wrapper .pair-photo-5.alignwide{
    margin-left: 0 !important;
    margin-right: auto !important;   /* ← 左寄せ維持 */
    transform: none !important;
    inset-inline-start: auto !important;
  }
  .inperson-wrapper .pair-photo-2.alignwide,
  .inperson-wrapper .pair-photo-3.alignwide{
    margin-left: auto !important;    /* ← 右寄せを確定 */
    margin-right: 0 !important;
    transform: none !important;
    inset-inline-start: auto !important;
  }
}

/* 画像タグは親幅にフィット */
.pair-photo-1 img,
.pair-photo-2 img,
.pair-photo-3 img,
.pair-photo-4 img,
.pair-photo-5 img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
}


/* ペアレッスン */
/* ペアレッスン */
/* ペアレッスン */
/* ====================================================== */
  /* ピアノコースページ  */
/* ====================================================== */










/* ====================================================== */
  /* 講師紹介  */
/* ====================================================== */


/* ===== 見出しピル（バッジ） ===== */
.title-badge{
  /* position: absolute;
  top: -60px;
  left: 24px;
  margin: 0; */
  display: inline-block;
  padding: 10px 22px;
  border-radius: 9999px;
  background: var(--accent);
  background: rgba(154,217,119,0.92);
  color: #fff;
  font-weight: 800;
  letter-spacing: .04em;
  font-size: clamp(14px, 1.6vw, 18px);
  box-shadow: 0 6px 0 rgba(154,217,119,.5);
  white-space: nowrap;
  pointer-events: none;            /* ← バッジもクリックを通す */
}
@media (max-width: 640px){
  .title-card{ padding-top: 26px; }
  .title-badge{ left: 16px; top: -50px; }
}

/* ====================================================== */
  /* 講師紹介  */
/* ====================================================== */






/* ====================================================== */
  /* メニュー・ウィジェット設定  */
/* ====================================================== */



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


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



/* グローバルナビ */
.c-gnav > li:hover > a, .c-gnav > .-current > a {
	background: transparent;
	/* color: var(--gold-dark); */
	color: rgb(139, 231, 83);
	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%); */
	background: linear-gradient(transparent 50%, rgb(238, 255, 227) 100%);
	border-radius: 0 0 30px 30px;
  /* margin: 100px; */
  /* top: 0px; */
}

.l-header__inner.l-container.a{
  padding: 0;
}

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




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


/* ヘッダーナビのフォントサイズ・文字色・太さ・文字間隔を変更 */
.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);
  /* background-color: rgba(244, 255, 237, 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;
  /* background-color: rgba(244, 255, 237, 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%); */
  background: linear-gradient(transparent 50%, rgb(244, 255, 237) 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: 100;
    border-bottom: 1px solid rgba(200, 200, 200, 0.3); 
} 

.l-drawer {
  z-index: 10000 !important;
  position: fixed; /* 念のため固定 */
}

/* トップページのメインビジュアル画像をヘッダーの下に押し下げる */
@media (max-width: 768px) {
  .p-mainVisual__textLayer {
    position: relative !important; /* ← absoluteが効いてたら無効化 */
    top: 80px !important;          /* ← これで確実に下にずらす */
  }
}

@media (max-width: 768px) {
  .p-mainVisual {
    padding-top: 80px; /* ← 画像全体がヘッダーの下に来る */
  }
}

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

	
/* ===== ロゴをホバーエフェクト（追従ヘッダー） ===== */	
.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__icon {
  font-size: 32px !important;
  color: #444; /* または #222, #000 などに */
  transition: transform 0.3s ease;
}

.c-iconList__link:hover .c-iconList__icon {
  transform: scale(1.2); /* ホバーで拡大 */
  color: #8ad163; /* よつばのアクセントカラーなど */
}

.c-iconList__item {
  margin: 15px 15px; /* 左右にゆとりを出す */
}

.copyright{
  font-size: 15px !important;
}

/* ====================================================== */
  /* メニュー・ウィジェット設定  */
/* ====================================================== */


/* 全ページでシームレスにする */

/* 最背面の固定レイヤーにタイルを敷く：どのラッパー背景にも負けにくい */
body::before{
  content:""; position: fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.4), rgba(255,255,255,.4)),
    radial-gradient(circle 6px  at 22px  28px,  rgba(138,209,99,.62) 98%, transparent 100%),
    radial-gradient(circle 7px  at 92px  54px,  rgba(138,209,99,.58) 98%, transparent 100%),
    radial-gradient(circle 5px  at 168px 42px, rgba(138,209,99,.60) 98%, transparent 100%),
    radial-gradient(circle 6px  at 40px  110px, rgba(138,209,99,.56) 98%, transparent 100%),
    radial-gradient(circle 5px  at 120px 130px, rgba(138,209,99,.62) 98%, transparent 100%),
    radial-gradient(circle 7px  at 190px 98px,  rgba(138,209,99,.58) 98%, transparent 100%),
    radial-gradient(circle 6px  at 70px  188px, rgba(138,209,99,.60) 98%, transparent 100%),
    radial-gradient(circle 5.5px at 162px 178px,rgba(138,209,99,.57) 98%, transparent 100%);
  background-repeat: no-repeat, repeat;
  background-size: auto, 200px 200px;   /* ←密度アップ */
  background-position: top left, top left;
}

/* “箱ごとに貼る”背景は確実にオフ（あれば） */
.top-keymessage-wrapper::before{ background: none !important; }