@charset 'utf-8';
/* こども用 */

/* =============================================================
ボタンリンク設定
================================================================ */
/* カラー設定
---------------------------------------------------------------- */
/*btn-primary*/
body.kids .btn.btn-primary{
	background-color: var(--vivid-green);
	color: var(--white);
}
body.kids .btn.btn-primary:hover,
body.kids .btn.btn-primary:active,
body.kids .btn.btn-primary:focus{
	background-color: var(--vivid-green-cwh20);
	color: var(--white);
}
/*btn-default*/
body.kids .btn.btn-default{
	background-color: var(--grayish-green);
	color: var(--dark-brown);
}
body.kids .btn.btn-default:hover,
body.kids .btn.btn-default:active,
body.kids .btn.btn-default:focus{
	background-color: var(--vivid-green);
	color: var(--white);
}
/*btn-join*/
body.kids .btn.btn-join{
	background-color: var(--sky-blue);
	color: var(--white);
}
body.kids .btn.btn-join:hover,
body.kids .btn.btn-join:active,
body.kids .btn.btn-join:focus{
	background-color: var(--sky-blue-cwh20);
	color: var(--white);
}

/* =============================================================
ヘッダー：音楽教室ヘッダー
================================================================ */
/*全体*/
body.kids .lessonHeader{
	background-color: var(--vivid-green);
}
/*開閉ボタン*/
@media screen and (max-width: 639px){
	body.kids .lessonHeader .lessonNavBtn p{
		background-color: var(--creamy-green);
	}
	body.kids .lessonNavBar .lessonNavBtn p svg{
		fill: var(--vivid-green);
	}
}
/* メニュー本体
---------------------------------------------------------------- */
/*全体*/
body.kids nav.lessonNavMenu{
	background: rgba( var(--vivid-green-rgb), .98);
}
/*リンク設定-メイン*/
body.kids nav.lessonNavMenu > ul > li > a,
body.kids nav.lessonNavMenu > ul > li.hasSubMenu > p{
	border-bottom: 1px solid var(--creamy-green);
}

/* =============================================================
色付きメインセクション(section.main)
================================================================ */
body.kids section.main{
	background-color: var(--creamy-green);
}

/* =============================================================
メインビジュアル直後の通常コンテンツ(.mainView)
================================================================ */
body.kids .mainView{
	background-color: var(--creamy-brown);
}
/*背景画像*/
@media screen and (min-width: 769px){
	body.kids .mainView{
		background: var(--creamy-brown) url(/lesson/about/img/illust-kids_brand-pc.png) center center no-repeat;
		background-size: 780px auto;
	}
}

/* =============================================================
交互にレイアウトが変わるコンテンツ(alternateView)
================================================================ */
/*交互の背景色*/
body.kids .alternateView > div:nth-of-type(odd){
	background-color: var(--creamy-green);
}
body.kids .alternateView > div:nth-of-type(even){
	background-color: var(--creamy-brown);
}

/* =============================================================
吹き出し型タブメニュー(nav.bubbleTab)
================================================================ */
/*色設定-通常*/
body.kids nav.bubbleTab ul li > *{
	background-color: var(--grayish-green);
	color: var(--dark-brown);
}
body.kids nav.bubbleTab ul li:after{
	border-top-color: var(--grayish-green);
}
/*色設定-ホバー*/
body.kids nav.bubbleTab ul li:hover > *{
	background-color: var(--light-green);
	color: var(--dark-brown);
}
body.kids nav.bubbleTab ul li:hover:after{
	border-top-color: var(--light-green);
}
/*色設定-アクティブ*/
body.kids nav.bubbleTab ul li[data-status=active] > *{
	background-color: var(--vivid-green);
	color: var(--white);
}
body.kids nav.bubbleTab ul li[data-status=active]:after{
	border-top-color: var(--vivid-green);
}

/* =============================================================
ブロック型メニューリスト(ul.blockMenu)
================================================================ */
/*リンク設定-色*/
body.kids ul.blockMenu li a,
body.kids ul.blockMenu li{
	background-color: var(--light-green);
	color: var(--dark-brown);
}
body.kids ul.blockMenu li a:hover,
body.kids ul.blockMenu li:hover{
	background-color: var(--vivid-green);
	color: var(--white);
}

/* =============================================================
拠点一覧(.shopList)
================================================================ */
/*リンク設定*/
body.kids .shopList ul li a:hover{
	background-color: var(--vivid-green-o20);
	color: var(--dark-brown);
}

/* =============================================================
右下固定体験レッスン申し込みボタン(#trialBtn)
================================================================ */
body.kids #trialBtn a{
	background-image: url(/lesson/img/btn-trial_kids_illust.png);
	background-size: 100% auto;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: 50%;
	background-color: var(--shima-orange);
	color: rgba(0,0,0,0);
}
body.kids #trialBtn a:hover,
body.kids #trialBtn a:focus{
	background-color: var(--creamy-pink);
}


/* =============================================================
入会のご案内ページ用
- /lesson/flow/index.html
- /lesson/flow/kids.html
================================================================ */
/*持ち物リスト*/
body.kids section.flow .bringItems{
	background-color: var(--creamy-sky-blue);
}

/* =============================================================
各コースページ /lesson/course/
================================================================ */

/* メインビジュアル＋見出しh1
---------------------------------------------------------------- */
/*全体*/
body.kids.course .lessonWrapper .mainVisual{
}

/* 大人向け／こども向け切り替えリンク
---------------------------------------------------------------- */
body.kids.course .switchAge a{
	background-color: var(--vivid-green);
	color: var(--white);
}
body.kids.course .switchAge a:hover{
	background-color: var(--vivid-green-cwh20);
	color: var(--white);
}

/* レッスン内容・料金
---------------------------------------------------------------- */
/*全体*/
body.kids.course section.crsDetail .crsDetail-sc{
	background-color: var(--creamy-green);
}
/*グレードあり
------------------------------------------------- */
body.kids.course .gradeHeader:hover{
	background-color: var(--vivid-green-o20);
}
/*レッスン内容・料金共通
------------------------------------------------- */
/*見出し*/
body.kids.course .class_text h4,
body.kids.course .class_fee h4{
	border-color: var(--light-green);
}
/*レッスン内容
------------------------------------------------- */
/*定義リスト*/
body.kids.course .class_text > dl{
	border-color: var(--vivid-green);
}
body.kids.course .class_text > dl dt{
	background-color: var(--vivid-green);
	color: var(--white);
}

/* =============================================================
大人・こどもブランディングページ
- /lesson/about/adult.html
- /lesson/about/kids.html
================================================================ */

/*ブランディング動画
---------------------------------------------------------------- */
/*全体*/
body.kids section.movie-branding{
	background-color: var(--white);
}