@charset "UTF-8";
/* =====================================================
   responsive.css — スマホ・タブレット対応（Phase3 Step5）
   style.css の後に読み込む上書き専用ファイル。
   幅1000px以上（PC）では一切適用されない。

   設計方針：
   - 768〜999px：本文カラムを元デザイン幅706pxのまま中央寄せ。
     背景アート（一枚絵）は元の寸法で崩れない。
   - 〜767px：1カラム流動化。可変高さに耐えない一枚絵背景は
     元画像から採色した単色＋角丸に置き換える。

   スマホ帯の統一トークン（場当たり調整の禁止）：
   - 画面端の余白  = --sp-gutter (12px)
   - 箱の内側余白  = --sp-pad (16px)
   - 箱の角丸      = --sp-radius (8px)
   - 箱内の見出し帯 = --sp-radius-s (4px)
   - 整列軸の幅    = --sp-cta-width (330px)
   横方向のルール：箱はカラム全幅・内側余白は一律16px。
   箱の中の子要素に追加のインデント・固定幅・負オフセットを残さない。
   ただし「押せるもの」（CTAボタン・下部メニュー・コースカード）だけは
   --sp-cta-width で中央寄せし、CTAボタン画像と同じ整列軸に乗せる。
   ===================================================== */

:root {
	--sp-gutter: 12px;
	--sp-pad: 16px;
	--sp-radius: 8px;
	--sp-radius-s: 4px;
	/* お問い合わせ/お申込みボタン画像の実幅。押せる要素の整列軸 */
	--sp-cta-width: 330px;
}

/* ---------- 〜999px：枠組みの流動化 ---------- */
@media (max-width: 999px) {

	/* 全体の固定幅を解除して画面幅に追従させる */
	#body,
	#header,
	#footer {
		width: auto;
	}

	/* 本文を先・サイドバーを後に並べ替える（DOMはleftboxが先） */
	#body {
		display: flex;
		flex-direction: column;
		padding: 0 var(--sp-gutter);
	}
	#rightbox,
	#rightboxs {
		order: 1;
	}
	#leftbox {
		order: 2;
	}
	/* flexアイテムが中身の最小幅（固定幅iframe等）で広がるのを防ぐ */
	#body > * {
		min-width: 0;
	}

	/* 画像は親要素の幅まで縮小 */
	img {
		max-width: 100%;
		height: auto;
	}

	/* パンくず：固定幅980pxが本文カラムを超えて
	   ページ全体を横に押し広げる（横スクロールの原因）ため解除 */
	.bread_crumb {
		width: auto;
	}

	/* ヘッダー：ロゴ中央寄せ＋ナビ折返し */
	#header h1 {
		float: none;
		margin: 0 auto;
		padding: 11px 0 0;
	}
	#menu-head_navi {
		float: none;
		width: auto;
		height: auto;
		margin: 10px 0 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	/* スライドショー（トップページ）：流動化 */
	div.slideshow {
		width: auto;
		height: auto;
	}
	div.slideshow div {
		position: static;
		width: auto;
		margin: 0;
		aspect-ratio: 973 / 530;
		background-size: 100% auto;
	}
	div.slideshow div img {
		width: 100%;
		height: auto;
	}

	/* 本文カラム：元デザイン幅706pxを上限に中央寄せ。
	   768〜999pxでは元の背景アートがそのまま崩れず表示される */
	#rightbox,
	#rightboxs {
		float: none;
		width: 100%;
		max-width: 706px;
		margin-left: auto;
		margin-right: auto;
	}

	/* サイドバーは元の240px幅のまま中央寄せ（バナーのデザイン維持） */
	#leftbox {
		float: none;
		width: 240px;
		margin: 25px auto 0;
	}

	/* 本文内の固定幅要素を親幅までに制限（列幅が狭いときだけ効く） */
	#rightbox div, #rightbox p, #rightbox ul, #rightbox ol, #rightbox li,
	#rightbox dl, #rightbox dt, #rightbox dd, #rightbox a,
	#rightbox h1, #rightbox h2, #rightbox h3, #rightbox h4,
	#rightboxs div, #rightboxs p, #rightboxs ul, #rightboxs ol, #rightboxs li,
	#rightboxs dl, #rightboxs dt, #rightboxs dd, #rightboxs a,
	#rightboxs h1, #rightboxs h2, #rightboxs h3, #rightboxs h4 {
		max-width: 100%;
	}

	/* YouTube埋め込み：幅に追従して縦横比を維持 */
	iframe.youtube {
		max-width: 100%;
		height: auto;
		aspect-ratio: 661 / 390;
	}
	iframe[width="420"] {
		max-width: 100%;
		height: auto;
		aspect-ratio: 420 / 315;
	}

	/* 固定1000pxレイアウト用の負オフセット（左ずらし）を一括解除。
	   幅いっぱい表示では左はみ出しの原因になる */
	.youtube,
	.youtubetext,
	.youtube_lead,
	.bodys h3,
	.bread_crumb li,
	#submit,
	#sitemap {
		left: 0;
	}
	#rightbox h1.ars_h1,
	#rightboxs h1.ars_h1 {
		margin-left: 0;
	}

	/* 地図（access） */
	.map_area {
		width: auto;
	}

	/* フッター */
	#foot {
		height: auto;
	}
	#footer {
		height: auto;
		padding-bottom: 20px;
	}
	#footer p {
		width: auto;
	}
	#violin {
		float: none;
		padding: 0 var(--sp-gutter);
		text-align: center;
	}
	#violin img {
		display: block;
		max-width: 300px;
		margin: 0 auto 6px;
	}
	#footer_navi {
		float: none;
		width: auto;
		margin-top: 20px;
		padding: 0 var(--sp-gutter);
	}
}

/* ---------- 〜767px：1カラム化と一枚絵背景の置き換え ---------- */
@media (max-width: 767px) {

	/* ヘッダー帯のPCナビ用一枚絵背景（#head=トップ/#heads=サブページで別画像）は
	   テキストナビの背後に縞状に残って「未対応」に見えるため無効化 */
	#head,
	#heads {
		background-image: none;
	}

	/* ヘッダーナビ：3列×2段のテキストグリッド。
	   元CSSにボタン別のID指定固定幅（li 98px／a 81〜158px）が残っており
	   詳細度で勝つため、同じID指定で全ボタンを一括上書きする */
	#menu-head_navi li#menu-item-32,
	#menu-head_navi li#menu-item-33,
	#menu-head_navi li#menu-item-34,
	#menu-head_navi li#menu-item-35,
	#menu-head_navi li#menu-item-36,
	#menu-head_navi li#menu-item-37 {
		width: 33.333%;
		height: auto;
		box-sizing: border-box;
		background-image: none;
		border-bottom: 1px solid #d8d0c2;
	}
	#menu-head_navi li#menu-item-32 a,
	#menu-head_navi li#menu-item-33 a,
	#menu-head_navi li#menu-item-34 a,
	#menu-head_navi li#menu-item-35 a,
	#menu-head_navi li#menu-item-36 a,
	#menu-head_navi li#menu-item-37 a {
		width: auto;
		height: auto;
		padding: 14px 4px;
		display: flex;
		align-items: center;
		justify-content: center;
		background-image: none;
		/* テキスト表示化：画像を隠し、a要素のtitle属性をラベルとして描画 */
		text-indent: 0;
		font-size: 13.5px;
		color: #5C4630;
		letter-spacing: 1px;
		text-align: center;
	}
	#menu-head_navi a img,
	#menu-head_navi li#menu-item-37 img {
		display: none;
	}
	#menu-head_navi li#menu-item-32 a::before,
	#menu-head_navi li#menu-item-33 a::before,
	#menu-head_navi li#menu-item-34 a::before,
	#menu-head_navi li#menu-item-35 a::before,
	#menu-head_navi li#menu-item-36 a::before,
	#menu-head_navi li#menu-item-37 a::before {
		content: attr(title);
	}
	/* フッターのリンク一覧はナビ・サイドバーと重複のため非表示 */
	#footer_navi {
		display: none;
	}

	/* ---- サイドバー：お問い合わせ/お申込みボタン画像（実幅330px）と
	        同じ幅のブロックとして中央寄せ。中身のリストは左揃え・
	        バナー画像は中央寄せ（ボタン群と整列軸を合わせる） ---- */
	#leftbox {
		width: auto;
		max-width: var(--sp-cta-width);
		padding-right: 0;
		margin: 25px auto 0;
	}
	#leftbox ul.left_list1 li,
	#leftbox ul.left_list1s li,
	#leftbox ul.left_list3 li,
	#leftbox ul.left_list2 li {
		width: auto;
	}
	#leftbox ul.left_list1 li dl dd,
	#leftbox ul.left_list1s li dl dd {
		width: auto;
	}
	#leftbox .left_list3 a img {
		margin-left: auto;
		margin-right: auto;
	}

	/* コース紹介（トップ等）：外枠の固定幅と負マージンを解除し
	   カードを1列に。カードは押せる要素なので、すぐ下のCTAボタンと
	   同じ整列軸（--sp-cta-width）に乗せて中央寄せする。
	   極小フォントも読める大きさへ */
	#container {
		width: auto;
	}
	#container-inner {
		margin: 0;
	}
	#container-inner .course {
		float: none;
		width: auto;
		max-width: var(--sp-cta-width);
		margin: 0 auto 20px;
	}
	/* 見出し帯（248x35の帯画像）は帯ごと幅に追従させる */
	.corse1,
	.corse2,
	.corse3 {
		display: block;
		width: auto;
		height: auto;
		padding: 10px 0;
		background-size: 100% 100%;
	}
	.course_textarea {
		width: auto;
		font-size: 12px;
	}

	/* グレーの説明ボックス（トップ・FAQ導入文）も箱のトークンに合わせる */
	.container_area p,
	.faqbox p {
		padding: var(--sp-pad);
		border-radius: var(--sp-radius);
	}

	/* 2分割ボックス（お問い合わせ/お申込みボタン等）は縦積み・中央寄せに */
	.left_box,
	.right_box {
		width: auto;
		float: none;
		text-align: center;
		margin-bottom: 10px;
	}
	.left_box img,
	.right_box img {
		display: block;
		margin: 0 auto;
	}

	/* トップのInformation欄：一枚絵背景（680px・タイトル焼き込み）と
	   固定幅ティッカー(514px)・固定幅リンク(484px)を流動化 */
	#information {
		width: auto;
		height: auto;
		padding: var(--sp-pad);
		background-image: none;
		background-color: #430907;
		border-radius: var(--sp-radius);
	}
	#information::before {
		content: "Information";
		display: block;
		color: #c9a063;
		font-size: 24px;
		letter-spacing: 3px;
		font-family: Georgia, "Times New Roman", serif;
		margin: 0 0 10px;
	}
	/* 内側の width:90% 中央寄せを解除し、箱のpaddingに揃える */
	#ticker_area_wrap {
		width: auto;
	}
	.scroll_area {
		width: auto;
	}
	#ticker_area {
		width: auto;
		flex: 1;
		min-width: 0;
	}
	#information .scroll_area ul li,
	#information .scroll_area ul li a {
		width: auto;
		max-width: 100%;
	}
	/* jscrollpaneはロード時の幅をインラインstyleで固定するため、
	   リサイズ後に崩れる。スマホ幅ではプラグインを無効化して
	   ネイティブスクロールに戻す（!importantでインラインstyleに勝つ） */
	#information .scroll_area .jspContainer,
	#information .scroll_area .jspPane {
		width: auto !important;
		height: auto !important;
		position: static !important;
	}
	#information .scroll_area .jspVerticalBar,
	#information .scroll_area .jspHorizontalBar {
		display: none !important;
	}
	#information .scroll_area {
		/* jscrollpaneがインラインで書き込む overflow:hidden に勝たせる。
		   これが無いとタッチスクロールできず古いニュースが見えない */
		overflow-y: auto !important;
	}

	/* FAQの箱：一枚絵背景（683x175固定）は可変高さに耐えないため
	   実画像から採色した単色＋角丸に置き換える */
	.text_freams,
	.text_freams_2,
	.text_freams_3,
	.text_freams_4 {
		width: auto;
		background-image: none;
		background-color: #351f16;
		border: 1px solid #c1aa89;
		border-radius: var(--sp-radius);
		padding: var(--sp-pad);
	}
	.text_freams .questions,
	.text_freams_2 .questions,
	.text_freams_3 .questions,
	.text_freams_4 .questions {
		width: auto;
		left: 0;
		top: 0;
		padding: 8px 12px;
		background-color: #e6e1dc;
		border-radius: var(--sp-radius-s);
	}
	.text_freams .questions::before,
	.text_freams_2 .questions::before,
	.text_freams_3 .questions::before,
	.text_freams_4 .questions::before {
		content: "Q. ";
		font-weight: bold;
	}
	.anser {
		width: auto;
		left: 0;
	}

	/* 特徴ページ等の一枚絵ボックスも単色＋角丸へ置き換え */
	.text_fream,
	.text_fream_02,
	.text_fream_03 {
		width: auto;
		background-image: none;
		background-color: #674f45;
		border-radius: var(--sp-radius);
		padding: var(--sp-pad);
	}
	.step1,
	.step2,
	.step3,
	.step4 {
		width: auto;
		background-image: none;
		background-color: #533920;
		border-radius: var(--sp-radius);
		padding: var(--sp-pad);
	}
	.step1::before,
	.step2::before,
	.step3::before,
	.step4::before {
		display: inline-block;
		font-weight: bold;
		color: #533920;
		background-color: #dadadb;
		border-radius: var(--sp-radius-s);
		padding: 2px 10px;
		margin-bottom: 8px;
		letter-spacing: 2px;
	}
	.step1::before { content: "STEP 1"; }
	.step2::before { content: "STEP 2"; }
	.step3::before { content: "STEP 3"; }
	.step4::before { content: "STEP 4"; }
	.text_fream_04 {
		width: auto;
		background-image: none;
		background-color: #eee9e1;
		border-radius: var(--sp-radius);
	}
	/* text_fream_04内の2カラムdl（説明460px＋ボタン200px）は縦積みに */
	.fream_04_top,
	.fream_04_bottom {
		padding: 12px var(--sp-pad);
	}
	.fream_04_top dt,
	.fream_04_bottom dt,
	.fream_04_top dd,
	.fream_04_bottom dd {
		float: none;
		width: auto;
	}
	.fream_04_top dd img,
	.fream_04_bottom dd img {
		left: 0;
		margin: 8px auto 0;
	}
	.text_fream_access {
		width: auto;
		background-image: none;
		background-color: #FFFFFF;
		border: 1px solid #d8c48f;
		border-radius: var(--sp-radius);
		padding: var(--sp-pad);
	}

	/* レッスンコース等の三分割ボックス（t/m/b 670px幅）も単色＋角丸へ */
	#myboxs {
		width: auto;
		background-image: none;
		background-color: #351f16;
		border: 1px solid #c1aa89;
		border-radius: var(--sp-radius);
		padding-bottom: var(--sp-pad);
	}
	#myboxs .headers {
		width: auto;
		height: auto;
		background-image: none;
		line-height: 1.6em;
		padding: 12px var(--sp-pad) 0;
	}
	/* 見出しの金文字テキストは狭い画面では1段小さく（折り返しを防ぐ） */
	.course_price {
		font-size: 17px;
		letter-spacing: 1px;
	}
	#myboxs .bodys {
		width: auto;
		background-image: none;
		padding: 0 var(--sp-pad);
	}
	.bodys h3 {
		width: auto;
		background-image: none;
		background-color: #e6e1dc;
		border-radius: var(--sp-radius-s);
		padding: 8px 12px;
	}

	/* 発表会チケット風ボックス（lessonprice）：一枚絵背景を単色＋角丸へ */
	.container_areas {
		background-image: none;
		background-color: #E8E2D8;
		border-radius: var(--sp-radius);
		padding: var(--sp-pad);
	}

	/* 講師紹介のプロフィール枠（684x493固定の一枚絵）も単色化して縦積みに */
	.photo_fream {
		width: auto;
		height: auto;
		background-image: none;
		background-color: #351f16;
		border: 1px solid #f1d9af;
		border-radius: var(--sp-radius);
		padding: var(--sp-pad);
	}
	.photo_fream_left,
	.photo_fream_right {
		float: none;
		width: auto;
	}
	.photo_fream_left img {
		display: block;
		margin: 0 auto;
	}
	/* 元指定10pxは狭い画面では読めないため読書サイズへ */
	.photo_fream_right {
		font-size: 12px;
		line-height: 1.7;
	}

	/* 問い合わせの枠（form_bg三分割683px幅）を単色＋角丸へ。表は縦積みに */
	#table_bg {
		width: auto;
		background-image: none;
		background-color: #351f16;
		border: 1px solid #efd6ab;
		border-radius: var(--sp-radius);
		padding-bottom: 20px;
	}
	.table_header {
		height: auto;
		background-image: none;
	}
	.table_body {
		background-image: none;
		padding: 12px var(--sp-pad) 0;
	}
	.form-1,
	.form-1 th,
	.form-1 td {
		width: auto;
	}
	.form-1 th,
	.form-1 td {
		display: block;
		padding: 12px 0;
	}
	.form-1 th {
		border-bottom: none;
		padding-bottom: 0;
	}
	.form-1 td {
		overflow-wrap: anywhere;
	}
	.font-small {
		width: auto;
	}

	/* 区切り線・注記類の固定幅（683〜693px）と左ずらしを解除して
	   カラム左端に揃える */
	.c_b_text,
	.c_b_texts {
		width: auto;
		margin-left: 0;
	}
	.cb,
	.cl_bs,
	.clear_both,
	.cl_b {
		width: auto;
		left: 0;
	}
	.gold {
		left: 0;
	}

	/* よくある質問・お客様の声（アコーディオン）：固定幅683pxと
	   本文の左右インデントを解除（番号アイコンの字下げは維持） */
	.faq {
		width: auto;
	}
	.faq_dd {
		padding: 8px 0 13px;
	}

	/* お願いページ（request）：三分割ボックスと2カラムdlを縦積みに */
	#req_bottom,
	#mi_content_b,
	#mi_content_bs {
		width: auto;
		margin-left: 0;
	}
	#req_middle,
	.mi_content_m,
	.mi_content_ms {
		padding: var(--sp-pad) var(--sp-pad) 1px;
	}
	#req_middle dl dt,
	.mi_content_m dl dt,
	.mi_content_ms dl dt {
		float: none;
		margin: 0 0 8px;
	}
	#req_middle dl dt img,
	.mi_content_m dl dt img,
	.mi_content_ms dl dt img {
		margin-left: auto;
		margin-right: auto;
	}
	#req_middle dl dd,
	.mi_content_m dl dd,
	.mi_content_ms dl dd {
		float: none;
		width: auto;
		margin-left: 0;
	}

	/* お知らせ・まとめの一覧表（column-1 180px＋column-2 440pxのfloat）は
	   縦積みに。リンクの固定幅も解除 */
	#wp-table-reloaded-id-9-no-2 td.column-1,
	.wp-table-reloaded td.column-1,
	.wp-table-reloaded-id-9 td.column-1,
	.table-styles td.column-1,
	#wp-table-reloaded-id-9-no-2 td.column-2,
	.wp-table-reloaded td.column-2,
	.wp-table-reloaded-id-9 td.column-2,
	.table-styles td.column-2 {
		float: none;
		width: auto;
	}
	.table-styles td a,
	.table-style td a {
		width: auto;
	}
	.table-styles td {
		padding: 12px 0 !important;
	}

	/* まとめのカテゴリ2列リストは1列に */
	ul.child-list {
		width: 100%;
		float: none;
	}

	/* カテゴリ別記事一覧（cat_*）：サムネイル120px＋本文560pxのfloatを
	   縦積みに。固定高さ120pxは本文が溢れるため解除 */
	.left-areas {
		float: none;
		width: auto;
		height: auto;
		margin-bottom: 8px;
	}
	.left-areas img {
		margin: 0 auto;
	}
	.right-areas {
		float: none;
		width: auto;
		height: auto;
	}

	/* サイトマップ：93%＋左ずらしを解除してカラムに揃える */
	#sitemap {
		width: auto;
	}
	.sitemap_disp_level_0,
	#sitemap_list {
		width: auto;
	}

	/* 表は枠内で横スクロールさせて崩れを防ぐ */
	#rightbox table,
	#rightboxs table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* フッターナビの列は自然折返しに任せる */
	#footer_navi ul {
		width: auto;
		float: none;
	}

	/* 地図は少し低く */
	.map_area iframe {
		height: 320px;
	}
}