@charset "utf-8";
/* CSS Document */


section{z-index: 1;}

/*-------------------------*/
/* ===== セクション全体 ===== */
/*-------------------------*/
.section-about{
  position: relative;
  overflow: hidden;
	z-index: 1!important;
}

/* ===== 上：画像（PCとSPをCSSで切替） ===== */
.about-visual{
  width: 100%;
  /* 画面比率に応じた高さ（横幅に対して可変） */
  height: clamp(280px, 45vw, 520px);
}

/* 画像は基本非表示にしておき、PC用だけ表示 */
.about-visual img{
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;       /* 横幅いっぱい、はみ出しはトリミング */
  object-position: center;
  pointer-events: none;
  user-select: none;
}
.about-visual .img-pc{ display:block; }   /* デフォルト＝PCを表示 */
.about-visual .img-sp{ display:none; }    /* SPは隠す */


/*----------------------------------------*/
/* ===== タイトル（ご指定の数値に準拠） ===== */
/*----------------------------------------*/
.keikobi-head{
  display:flex; align-items:center; justify-content:center;
  gap:12px; margin-top: 40px;margin-bottom:0px;
}
.keikobi-pill{
  padding:.6em 1.2em; border-radius:999px; background:#678DBB; color:#fff;
  font-family:"ZenOldMincho-Bold","Yu Mincho","Hiragino Mincho ProN",serif;
  letter-spacing:.08em; margin:0;
  font-size: clamp(16px, 2.2vw, 24px);
}
/* 共通ドット */
.keikobi-dot{
  border-radius:50%;
  background:#678DBB;
  display:inline-block;
}
.keikobi-dot.large { width:24px; height:24px; }
.keikobi-dot.small { width:12px; height:12px; }

/* 並び */
.dot-group{ display:flex; gap:14px; align-items:center; }



/* ===== ブレークポイント ===== */
@media (max-width: 767px){
  .section-about{ padding-bottom: 20px; padding-top:20px;}

  /* 767px以下ではSP画像を表示、PC画像を非表示 */
  .about-visual .img-pc{ display:none; }
  .about-visual .img-sp{ display:block; }

  /* 画像の高さ：必要なら少し高めにしたい場合は数値を調整 */
  .about-visual{ height: clamp(400px, 56vw, 520px); }

  .keikobi-head{ gap:10px; margin: 18px auto 12px; }
  .keikobi-dot.large { width:20px; height:20px; }
  .keikobi-dot.small { width:10px; height:10px; }
}


/*----------------*/
/* お稽古は月二回です */
/*----------------*/
/* セクション */
.keiko-section{
  padding: 40px 16px 64px 16px;
  color: #333;
	z-index: 1!important;
	
}

/* リード文 */
.keiko-lead{
  text-align: center;
  line-height: 1.9;
  font-size: clamp(14px, 2.7vw, 16px);
  margin: 0 auto 24px;
	font-family:"ZenOldMincho-Bold","Yu Mincho","Hiragino Mincho ProN",serif;
	margin-bottom:60px;
}

/* 2カラム → SPで1カラム */
.keiko-grid{
  width: min(1080px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
@media (max-width: 767px){
	.keiko-section{
  padding: 0px 16px 64px 16px;}
  .keiko-grid{ grid-template-columns: 1fr; gap: 18px; }
}

/* カード */
/* 表ブロックを中央に置く（幅を絞って左右に余白を作る） */
.keiko-card{ 
  /* 既存 */ 
  background:rgba(255, 255, 255, 0.6); border-radius:18px; 
  padding: 24px 24px;
  display: flex;              /* ← 中身を中央幅で並べやすくする */
  flex-direction: column;
  align-items: center;        /* 見出し・表をカードの中央基準に */
}

/* タイトル */
.keiko-title{
  text-align: center;
  font-weight: 700;
  font-size: clamp(18px, 2.2vw, 20px);
  margin: 6px 0 12px;
	font-family:"ZenOldMincho-Bold","Yu Mincho","Hiragino Mincho ProN",serif;
}

//* 定義リスト（＝表）の横幅を制限して中央寄せ）*/
.keiko-list{
  width: 100%;
  max-width: 640px;           /* ← ここで表の横幅を決める（お好みで調整） */
  margin: 0 auto 14px;        /* 中央 */
  padding: 0;
}

/* 行（ラベル列＋本文列）― ラベル列は文字幅ぴったり */
.keiko-list .row{
  display: grid;
  grid-template-columns: max-content minmax(0,1fr); /* ←ここを変更 */
  column-gap: 24px;                                  /* 読みやすい間隔に */
  gap: 24px;                                         /* 古いブラウザ対策で併記してOK */
  padding: 6px 0;
  justify-content: center;                           /* 表全体は中央基準 */
}

/* ラベル（dt）の余白ゼロ＆右寄せ */
.keiko-list dt{
  margin: 0;
  padding: 0;                /* ←内側余白をなくす */
  min-width: 0;              /* ←固定幅を解除 */
  text-align: right;         /* ←右端に寄せて“隙間”を消す */
  display: flex;             /* ←高さ揃え＆微調整のため */
  align-items: center;
  justify-content: flex-end; /* ←右端にピタッ */
		font-family:"ZenOldMincho-Bold","Yu Mincho","Hiragino Mincho ProN",serif;
}

.keiko-list dd{ 
  margin: 0; 
  line-height: 1.6; 
  font-size: 15px; 
		font-family: "Noto Sans JP","Yu Mincho","Hiragino Mincho ProN",serif;
}

/* 指導の行の高さを揃える */
.keiko-list .row.instructor{
  min-height: 60px;
  align-items: center;
}
@media (max-width: 767px){
  .keiko-list .row{ grid-template-columns: auto 1fr; gap: 10px; }
  .keiko-list dd{ font-size: 14px; }
  .keiko-list .row.instructor{ min-height: auto; }
}

/* ===== PC/SP 画像切り替え（SP基準） ===== */
/* figure の既定マージンをリセット */
.keiko-photo{
  margin: 0;          /* ← これで左右・上下の余白が消える */
  padding: 0;
}
.keiko-photo img { 
  width:100%; 
  display:block; 
  border-radius:12px; 
  object-fit:cover; 
}

/* 初期：スマホ表示（SP） */
.keiko-photo .pc-only { display: none !important; }
.keiko-photo .sp-only { display: block !important; }

/* 768px以上：PC表示（画像は横長に戻す） */
@media (min-width: 768px){
  .keiko-photo .pc-only { display: block !important; }
  .keiko-photo .sp-only { display: none !important; }
}

/* 余白を変数化：既定は24px、SPで少しタイトに */
.keiko-card{ --pad: 24px; padding: var(--pad); }
@media (max-width:767px){
  .keiko-card{ --pad: clamp(14px, 4vw, 20px); }
}

/* 画像ラッパをフル幅に（flex 中央寄せを上書き） */
.keiko-card .keiko-photo{
  align-self: stretch;      /* ← これが肝 */
  width: 100%;
  margin: var(--pad) 0 0;   /* 上だけ余白＝カードのpaddingと同じ */
  padding: 0;
}

/* 画像はコンテナいっぱい。左右の隙間はカードのpaddingに任せる */
.keiko-card .keiko-photo img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  object-fit: cover;
}

/* ← ここ、CSSは // コメント不可。必ずこう書く：*/
/* 定義リスト（＝表）の横幅を制限して中央寄せ） */



/*------*/
/*入会前に*/
/*------*/
/* ===== カラー変数（必要なら調整） ===== */
:root{
  --panel-blue: #678DBB;            /* 外パネルの青 */
  --panel-blue-soft: #6D8FBE;       /* 影/濃淡用（微差） */
  --note-text: #333333;             /* 文字色 */
}

.notice-section{
  box-sizing: border-box;
  margin-inline: auto;      /* 中央寄せ */
  padding: 48px 0;          /* 横paddingは外す */
}
.notice-panel{ padding: 0 16px; } /* 内側にだけ左右余白を戻す */

/* ===== 青い角丸パネル ===== */
.notice-panel{
  width: min(80%, 1080px);  /* 80%か最大1080pxの小さい方 */
  margin: 0 auto;
  background: var(--panel-blue);
  border-radius: 22px;
  padding: clamp(16px, 3vw, 28px);
  box-shadow: 0 10px 26px rgba(0,0,0,.10);
}

/* ===== リスト（白い角丸メモ） ===== */
.notice-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(10px, 2.2vw, 16px);
}

.notice-list li{
  position: relative;
  background: #fff;
  color: var(--note-text);
  border-radius: 16px;
  padding: 14px 18px 14px 44px;      /* 左を広めにして「※」を置く */
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
  line-height: 1.9;
}

/* 調整量（環境差に合わせて 0〜2px で微調整） */
:root{ --mark-nudge: 1px; }   /* ←上に1px持ち上げる */
/* 先頭の「※」マーク（擬似要素で表示） */

.notice-list li::before{
  content: "※";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(180deg, var(--panel-blue), var(--panel-blue-soft));
  box-shadow: 0 2px 5px rgba(0,0,0,.12) inset;
	/* 既存に追加／変更 */
  line-height: 1;                                    /* 余分な行間をカット */
  font-size: 13px;                                   /* お好みで */
  top: 50%;
  transform: translateY(calc(-50% - var(--mark-nudge)));
}

/* 文中の小さな強調チップ（任意） */
.note-chip{
  display: inline-block;
  padding: .1em .5em;
  background: #E2F8FC;
}

/* ===== レスポンシブ微調整 ===== */
@media (max-width: 767px){
  .notice-panel{ border-radius: 18px; }
  .notice-list li{ border-radius: 14px; padding: 12px 14px 12px 40px; }
  .notice-list li::before{ left: 12px; width: 20px; height: 20px; }
}




/*--------------------------*/
/*---------会費-------------*/
/*--------------------------*/

/* === タイル背景＋白パネル（feeセクション用） === */
.fee-section .foot-panels{
  position: relative;
  padding: clamp(32px,6vw,64px) 0 0;
  overflow: hidden;
}
.fee-section .foot-tile{
  position: absolute;
  inset: 0;                       /* 上下左右いっぱい */
  width: 100%;
  height: auto !important;
  min-height: 440px;
  background: url("../img/柄シームレス素材4.webp") repeat;
  background-size: 600px 600px;
  z-index: 0;
}

/* 中身のレイヤー */
.fee-section .fee-inner{
  position: relative;
  z-index: 1;
  width: min(80%, 1080px);
  margin: 0 auto;
  padding: 0 clamp(12px, 3vw, 24px);
  display: flow-root;             /* マージン折り畳み防止 */
}

/* 見出し（半透明） */
.fee-heading{
  text-align: center;
  letter-spacing: .2em;
  font-weight: 700;
  font-family: "ZenOldMincho-Bold","Yu Mincho","Hiragino Mincho ProN",serif;
  background: rgba(255,255,255,.95);   /* ← 0.95 透過 */
  border-radius: 20px;
  padding: clamp(16px,2.5vw,24px);
  width: min(600px, 80%);
  margin: 20px auto;
}

/* 上段2カード */
.fee-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(18px,3vw,24px);
  margin-bottom: clamp(22px,4vw,32px);
}
@media (max-width: 767px){
  .fee-grid{ grid-template-columns: 1fr; }
}

/* カード共通（半透明） */
.fee-card{
  background: rgba(255,255,255,.95);   /* ← 0.95 透過（上段2枚＋見学体験） */
  border-radius: 20px;
  padding: clamp(16px,2.5vw,24px);
}
.fee-card p{ text-align: center; }

.fee-title{
  text-align: center;
  font-weight: 700;
  margin: 4px 0 10px;
  font-family: "ZenOldMincho-Bold","Yu Mincho","Hiragino Mincho ProN",serif;
}
.fee-price{ text-align: center; margin: 4px 0 8px; }
.fee-note { font-size: 16px; line-height: 1.9; text-align: center; }

/* 画像ボックス（初期＝SP基準） */
.fee-photo{
  margin: 12px auto;
  border-radius: 12px;
  overflow: hidden;
}
.fee-photo img{
  display: block;
  width: 100%;
  object-fit: cover;
  aspect-ratio: 3 / 1;            /* ← SPは横長に */
}

/* 説明文 */
.fee-text p{
  line-height: 1.95;
  margin: .6em 0;
  text-align: left;
}

/* 見学・体験カードの下に余白 */
.fee-card.fee-full{ margin-bottom: 40px; }

/* PC/SP切替（画像の出し分け） */
.pc-only{ display: none !important; }
.sp-only{ display: block !important; }
@media (min-width: 768px){
  .pc-only{ display: block !important; }
  .sp-only{ display: none !important; }
}

/* ───────── ここから「見学・体験」カードのレイアウト ───────── */

/* ベース：Grid化 */
.fee-card.fee-full{
  display: grid;
  gap: clamp(12px, 2vw, 20px);
}

/* SP：縦並び */
@media (max-width: 767px){
  .fee-card.fee-full{
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "price"
      "note"
      "photo"
      "text";
  }
}

/* PC：テキスト3/4 + 画像1/4（縦長では上限なしで伸びる） */
@media (min-width: 768px){
  .fee-card.fee-full{
    grid-template-columns: 3fr 1fr;   /* 左:右 = 3:1 */
    grid-template-areas:
      "title title"
      "price price"
      "note  note"
      "text  photo";
    align-items: stretch;
    gap: clamp(12px, 2vw, 20px);
  }

  .fee-card.fee-full > .fee-title{ grid-area: title; }
  .fee-card.fee-full > .fee-price{ grid-area: price; }
  .fee-card.fee-full > .fee-note { grid-area: note;  }
  .fee-card.fee-full > .fee-text { grid-area: text;  }
  .fee-card.fee-full > .fee-photo{ 
    grid-area: photo;
    position: relative;
    height: 100%;          /* 左テキスト量に追従 */
    margin: 0;
    border-radius: 12px;
    overflow: hidden;
    max-height: none;      /* 縦長では上限なし */
  }
  .fee-card.fee-full > .fee-photo img{
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
  }
}

/* 横長（ワイド）画面のときだけ“縮めるための上限”を適用（任意） */
@media (min-width: 1024px) and (min-aspect-ratio: 4/3){
  .fee-card.fee-full > .fee-photo{
    max-height: clamp(220px, 28vw, 360px);
  }
}

/* グリッドのエリア割当（直下の子要素） */
.fee-card.fee-full > .fee-title{ grid-area: title; }
.fee-card.fee-full > .fee-price{ grid-area: price; }
.fee-card.fee-full > .fee-note { grid-area: note;  }
.fee-card.fee-full > .fee-text { grid-area: text;  }
.fee-card.fee-full > .fee-photo{ grid-area: photo; }





/*-----------------------------------*/
/*---------------稽古場所-------------*/
/*----------------------------------*/
/* ========= 教場案内（画像右・地図下） ========= */
.dojo-section{
  padding: 0px 16px 40px 16px;
}
.dojo-inner{
  width: min(1080px, 100%);
  margin: 0 auto;
}

.dojo-card{
  border-radius: 20px;
  padding: clamp(16px, 2.5vw, 24px);
  margin: 0 auto clamp(28px, 4vw, 40px);
}

/* 左=情報 2/5、右=画像 3/5 */
.dojo-grid{
  display: grid;
  grid-template-columns: 2fr 3fr;   /* ← 2:3 = 2/5 : 3/5 */
  gap: clamp(12px, 2vw, 20px);
  align-items: start;
}
@media (max-width: 767px){
  .dojo-grid{
    grid-template-columns: 1fr;
    grid-template-areas:
      "photo"
      "info";
  }
  .dojo-photo{ grid-area: photo; }
  .dojo-info{  grid-area: info;  }
}

/* タイトルピル */
.dojo-title{ margin: 0 0 8px; }
.dojo-pill{
  display: inline-block;
  padding: .5em 1.1em;
  border-radius: 999px;
  background: #678DBB;
  color: #fff;
  font-family: "ZenOldMincho-Bold","Yu Mincho","Hiragino Mincho ProN",serif;
  letter-spacing: .06em;
}

/* 住所文 */
.dojo-address p{
  margin: .35em 0;
  line-height: 1.8;
  color: #333;
	margin-left: 40px;
}

/* 右側の写真（使い回し） */
.dojo-photo{
  border-radius: 12px;
  overflow: hidden;
}
.dojo-photo img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 6;     /* PCは横長 */
  object-fit: cover;
}
@media (max-width: 767px){
  .dojo-photo img{ aspect-ratio: 4 / 1; } 
}

/* 下のGoogleマップ */
.dojo-map{
  margin-top: clamp(12px, 2vw, 16px);
  border-radius: 12px;
  overflow: hidden;
  background: #E9EEF4;      /* 読み込み前の下地（グレー） */
}
.dojo-map iframe{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;     /* PC */
  border: 0;
}
@media (max-width: 767px){
  .dojo-map iframe{
    aspect-ratio: 4 / 3;    /* SPは少し縦長に */
    min-height: 220px;
  }
}
/* === PC：右画像を左テキストの高さに追従させる === */
@media (min-width: 768px){
  .dojo-grid{
    align-items: stretch;                 /* 行の高さを揃える */
  }
  .dojo-photo{
    height: 100%;                         /* 行の高さ＝左カラムに合わせる */
    margin: 0;                            /* 余白があると高さが合わない */
    border-radius: 12px;
    overflow: hidden;
  }
  .dojo-photo img{
    width: 100%;
    height: 100%;                         /* コンテナいっぱいに伸縮 */
    object-fit: cover;                    /* トリミングOKで全面フィット */
    aspect-ratio: auto;                   /* ← 既存の 16/6 を解除 */
  }
}

/* SP：写真の横幅を地図とピッタリ揃える（figureの既定マージンをリセット） */
@media (max-width: 767px){
  .dojo-photo{
    margin: 0;            /* ← 既定の左右40pxなどを打ち消す */
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
  }
  .dojo-photo img{
    display: block;
    width: 100%;
    height: auto;         /* 横幅に合わせて自然に高さ調整 */
  }
}