@charset "UTF-8";

html{
    font-size:100%;
    scroll-behavior: smooth;
}

a{
    text-decoration:none;
}
img{
    max-width:100%;
}
/*レイアウト*/
.align-center{
    text-align: center;
}
/*ヘッダー*/
.page-header{
    padding-top:.5rem;
}
.logo{
    width:210px;
}
.main-nav {
    
    display:flex;
    justify-content: center;
    gap:1rem;
    font-size:0.8rem;
    list-style:none;
    background-color: aqua;
}

.main-nav a:hover{
    color: #0bd;
}
body{
    background-color: #ffeee;
}

.page-title{
    text-align: center;
}
.cover {
    background-size: cover;
    background-position: center bottom;
    height:800px;
}
.cover-home {
    background-image:url(../images/top1.jpg);
}
.banner {
    text-align: center;
    margin-top: 1.5rem;
}
.goaisatu {
    background-image: url(../images/２.png);
    text-align:center;
}
.oshirase-blog {
    display:flex;
    justify-content: center;
    text-align: center;

}
.blog{
    width:50%;
    border-style: ridge;
    border-color: aqua;

}




.piano1 {
    background-image:url(../images/salon.jpg);
    text-align:center;
}





/*コース・クラス紹介
---------------------------------------------------------------------------*/
.list-cource2-parts * {margin: 0;padding: 0;}

/*ボックス全体*/
.list-cource2-parts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));	/*ボックス１個あたりの最低幅が260pxで自動改行*/
	gap: 2rem;	/*ボックス同士の余白。2文字分。*/
	font-size: 0.9rem;	/*文字サイズ90%*/
}

/*ボックス１個あたり*/
.list-cource2-parts .list-parts {
	background: #fff;	/*背景色を白に*/
	border-radius: 16px;	/*角を丸くする*/
	overflow: hidden;
	box-shadow: 0 4px 20px rgba(0,0,0,0.06);	/*ボックスの影。右へ、下へ、ぼかす量。0,0,0は黒のことで0.06は色が6%出た状態。*/
	display: flex;
	flex-direction: column;
}

/*ボックス上部のカラーバー*/
.list-cource2-parts .list-parts .color-bar-parts {
	height: 6px;	/*バーの高さ*/
	background: var(--primary-color);	/*背景色。theme.cssのprimary-colorを読み込みます。*/
}

/*アクセントカラーのバー*/
.list-cource2-parts .list-parts.accent-parts .color-bar-parts {
	background: var(--accent-color);	/*背景色。theme.cssのaccent-colorを読み込みます。*/
}

/*ライトカラーのバー（年齢で色分け用）*/
.list-cource2-parts .list-parts.light-parts .color-bar-parts {
	background: var(--bg-inverse-color);	/*背景色。theme.cssのbg-inverse-colorを読み込みます。*/
}

/*ボックスの写真*/
.list-cource2-parts .list-parts figure {
	width: 100%;
	aspect-ratio: 16 / 9;	/*横長の比率*/
	overflow: hidden;
}
.list-cource2-parts .list-parts figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;	/*コンテナいっぱいにカバー、余分な部分はカット*/
	object-position: center;	/*中央部分を表示*/
}

/*テキストエリア*/
.list-cource2-parts .list-parts .text-parts {
	padding: 1.2rem 1.5rem 1.5rem;	/*上に1.2文字分、左右に1.5文字分、下に1.5文字分の余白。*/
	display: flex;
	flex-direction: column;
	gap: 0.6rem;	/*テキスト要素同士の余白。0.6文字分。*/
	flex: 1;
}

/*対象年齢ラベル*/
.list-cource2-parts .list-parts .age-parts {
	display: inline-block;
	font-size: 0.75rem;	/*文字サイズ75%*/
	font-weight: bold;	/*太字*/
	color: var(--primary-color);	/*文字色。theme.cssのprimary-colorを読み込みます。*/
	background: var(--light-color);	/*背景色。theme.cssのlight-colorを読み込みます。*/
	padding: 0.2rem 0.8rem;	/*上下に0.2文字分、左右に0.8文字分の余白。*/
	border-radius: 20px;	/*角を丸くする（ピル型）*/
	width: fit-content;	/*テキストに合わせた幅*/
}

/*アクセントカラーの年齢ラベル*/
.list-cource2-parts .list-parts.accent-parts .age-parts {
	color: var(--accent-color);	/*文字色。theme.cssのaccent-colorを読み込みます。*/
	background: rgba(91,181,162,0.12);	/*背景色。accent-colorの薄い版。*/
}

/*クラス名（h4）*/
.list-cource2-parts .list-parts h4 {
	font-size: 1.1rem;	/*文字サイズ1.1倍*/
	line-height: 1.5;	/*行間*/
}

/*クラスの説明文*/
.list-cource2-parts .list-parts .desc-parts {
	font-size: 0.85rem;	/*文字サイズ85%*/
	line-height: 1.8;	/*行間*/
	opacity: 0.8;	/*透明度。色が80%出た状態。*/
}

/*定員・曜日などの情報*/
.list-cource2-parts .list-parts .info-parts {
	font-size: 0.78rem;	/*文字サイズ78%*/
	line-height: 1.6;	/*行間*/
	opacity: 0.6;	/*透明度。色が60%出た状態。*/
	margin-top: auto;	/*下に寄せる*/
	padding-top: 0.5rem;	/*上に0.5文字分の余白。*/
	border-top: 1px dashed var(--bg-border-color);	/*上に点線の区切り。色はtheme.cssのbg-border-colorを読み込みます。*/
}
.list-cource2-parts .list-parts .info-parts i {
	margin-right: 0.3rem;	/*アイコンの右に0.3文字分のスペース*/
	color: var(--primary-color);	/*アイコン色。theme.cssのprimary-colorを読み込みます。*/
	opacity: 0.7;	/*透明度。色が70%出た状態。*/
}

/*bg1-light-parts上のボックス影・背景調整*/
.bg1-light-parts .list-cource2-parts .list-parts {
	box-shadow: 0 4px 20px rgba(0,0,0,0.04);	/*ボックスの影を控えめに*/
}

/*bg-parts上の調整（暗い背景向け）*/
.bg1-parts .list-cource2-parts .list-parts,
.bg1-primary-parts .list-cource2-parts .list-parts,
.bg1-accent-parts .list-cource2-parts .list-parts {
	background: rgba(255,255,255,0.1);	/*白の半透明*/
	box-shadow: none;	/*影を消す*/
}
.bg1-parts .list-cource2-parts .list-parts .age-parts,
.bg1-primary-parts .list-cource2-parts .list-parts .age-parts,
.bg1-accent-parts .list-cource2-parts .list-parts .age-parts {
	background: rgba(255,255,255,0.15);	/*白の半透明*/
	color: #fff;
}
.bg1-parts .list-cource2-parts .list-parts .info-parts,
.bg1-primary-parts .list-cource2-parts .list-parts .info-parts,
.bg1-accent-parts .list-cource2-parts .list-parts .info-parts {
	border-top-color: rgba(255,255,255,0.2);	/*白の半透明*/
}
.bg1-parts .list-cource2-parts .list-parts .info-parts i,
.bg1-primary-parts .list-cource2-parts .list-parts .info-parts i,
.bg1-accent-parts .list-cource2-parts .list-parts .info-parts i {
	color: inherit;
}

	/*画面幅600px以下の追加指定*/
	@media (max-width:600px) {

	/*ボックス全体*/
	.list-cource2-parts {
		grid-template-columns: 1fr;	/*1列にする*/
		gap: 1.5rem;	/*ボックス同士の余白。1.5文字分。*/
	}

	}/*追加指定ここまで*/


.setumei2{
    background-color: aliceblue;
    color:rgb(53, 164, 219);
    
}
.footer {
    text-align: center;
    color:rgb(239, 242, 245);
    height: 700px;
    background-image: url(../images/鍵盤画像.jpg);
}
.gallery-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 300px;
}

.gallery {
    margin: 5px;
    border: 1px solid #ccc;
    float: left;
    width: 180px;
}

.gallery:hover {
    border: 1px solid #777;
}

.gallery img {
    width: 100%;
    height: auto;
}

.gallery-desc {
    padding: 15px;
    text-align: center;
  	font-size:14px;
}