@charset "utf-8";



/*全端末（PC・タブレット・スマホ）共通設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*cssファイルの読み込み
---------------------------------------------------------------------------*/
@import url("keyframes.css");
@import url("inview.css");

/*Google Fontsの読み込み
---------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@300&display=swap');

/*全体の設定
---------------------------------------------------------------------------*/
body {
	margin: 0px;
	padding: 0px;
	color: #fff;	/*全体の文字色*/
	font-family: "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	/*フォント種類*/

	font-size: 20px;		/*文字サイズ*/
	line-height: 2.0;		/*行間*/
	background: #d33737;	/*背景色*/
	-webkit-text-size-adjust: none;
}
h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure,form {margin: 0px;padding: 0px;font-size: 100%;}
ul {list-style-type: none;}
ol {padding-left: 40px;padding-bottom: 15px;}
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}
a img {
	text-decoration: none;		/*画像リンクの下線を消す設定*/
	border: none;
}


a img:hover {
	opacity: 0.7;	/*マウスオン時に画像を半透明にする設定。0.7は70%の透明度の意味。*/
	text-decoration: none;		/*画像リンクの下線を消す設定*/
	border: none;
}
table {border-collapse:collapse;font-size: 100%;border-spacing: 0;}
iframe {width: 100%;}

/*リンク（全般）設定
---------------------------------------------------------------------------*/
a {
	color: #333;			/*リンクテキストの色*/
	transition: 0.5s;			/*マウスオン時の移り変わるまでの時間設定。0.5秒。*/
	text-decoration: none;		/*リンクの下線を消す設定*/
	border-bottom: 1px dashed #333333;	/*下線の幅・線種・色。transparentは透明。*/
}
a:hover {
	color: #ffff00;			/*マウスオン時の文字色*/
	text-decoration: none;		/*マウスオン時に下線を消す設定。残したいならこの１行削除。*/
	border: none;
	background: transparent;		/*背景色の影響を受けないよう透明(transparent)に*/
}


/*コンテナー（サイト全体を囲むブロック）
---------------------------------------------------------------------------*/
#container {
	max-width: 1400px;	/*最大幅。これ以上広くならない指定。*/
	margin: 0 auto;
}

/*ヘッダー（一番上の、ロゴやスライドショーが入っているブロック）
---------------------------------------------------------------------------*/
/*ヘッダーブロック*/
header {
	text-align: center;
	padding: 20px;
}
/*トップページのヘッダーブロックへの追加指定*/
.home header {
	padding: 0;
	position: relative;
}
/*ロゴ画像*/
header #logo {margin: 0;}




/*トップページのロゴ画像への追加指定*/
.home header #logo  {
	position: absolute;z-index: 1;
	width: 20%;	/*画像の幅*/
	left: 8%;		/*ロゴやメニューが入っているブロックに対して、左からの配置場所の指定。*/
	top: 20px;	/*ロゴやメニューが入っているブロックに対して、上からの配置場所の指定。*/
	background: #fff;		/*ロゴの背景色*/
	border-radius: 58% 42% 61% 39% / 44% 55% 45% 56%;	/*角丸の指定*/
	border: 10px solid #fff;	/*枠線の幅、線種、色*/
}

.home header #logo a  {
	text-decoration: none;		/*画像リンクの下線を消す設定*/
	border: none;
}


/*ロゴ画像（トップページ以外）*/
header #logo2 {
	margin: 0;
	width: 15%;	/*画像の幅*/
	border-radius: 58% 42% 61% 39% / 44% 55% 45% 56%;	/*角丸の指定*/
	background: #ffff00;	/*背景を透明にする*/
	border: 2px dashed #ff0000;	/*枠線の幅、線種、色*/
}

header #logo2 a  {
	text-decoration: none;		/*画像リンクの下線を消す設定*/
	border: none;
}



/* マーカーアンダーラインの設定（水色）*/
.under1 {
 background: linear-gradient(transparent 50%, #a8eaff 50%);
}

/* マーカーアンダーラインの設定（薄黄色）*/
.under2 {
 background: linear-gradient(transparent 50%, #fafad2 50%);
}

/* マーカーアンダーラインの設定（ピンク）*/
.under3 {
 background: linear-gradient(transparent 50%, #ffe4e1 50%);
}

/* マーカーアンダーラインの設定（ゴールド）*/
.under4 {
 background: linear-gradient(transparent 50%, #ffd700 50%);
}

/* アンダーラインの設定（破線）*/

.under5{ 
  border-bottom: dashed 2px #fafad2;
}


/* ラインの設定 */
.hr1 {
  border-top: 1px solid #EEE8AA; width: 100%;  /* 淡い黄緑 */}

.hr2 {
  border: none;  border-top: 5px dashed #333;  width: 100%; /* グレー破線 */}

.hr3{
  border: none;  border-top: 5px dotted #ff4500;  width: 100%; /* 濃いピンク点線 */}



/*メニュー
---------------------------------------------------------------------------*/
/*メニューブロック全体への指定*/
#menubar {
	line-height: 2;
	text-align: center;
	font-size: 20px;		/*文字サイズ*/	
}
/*メニュー１個あたりの指定*/
#menubar li {
	display: inline-block;	/*横並びにする指定*/
	margin: 0px 5px;		/*上下、左右へのメニューの外側にとる余白*/
}
#menubar li a {
	color: #fff;		/*文字色*/
	text-decoration: none;
	display: block;
	padding: 0px 20px;		/*上下、左右へのメニューの内側にとる余白*/
	text-decoration: none;	/*リンクの下線を消す設定*/
	border: none;
}
/*現在表示中(current)と、マウスオン時の指定*/
#menubar li.current a, #menubar li a:hover {
	background: #fff;		/*背景色*/
	color: #b30f0f;		/*文字色*/
	border-radius: 100px;	/*角丸のサイズ。大きめであれば適当で構いません。この１行を削除すると、長方形になります。*/
	text-decoration: none;	/*リンクの下線を消す設定*/
	border: none;
}

/*野原の画像部分設定
---------------------------------------------------------------------------*/
#nohara {
	line-height: 2;
	text-align: center;
	font-size: 18px;		/*文字サイズ*/	
}
/*メニュー１個あたりの指定*/
#nohara li {
	display: inline-block;	/*横並びにする指定*/
	margin: 0px 10px;		/*上下、左右へのメニューの外側にとる余白*/
}


/*コンテンツ（ヘッダーとフッター以外を囲むブロック）
---------------------------------------------------------------------------*/
#main {
	overflow: hidden;
	padding: 50px 8%;		/*上下、左右へのブロック内の余白*/
}
/*コンテンツ内にあるh2(見出し)タグの指定*/
#main h2 {
	clear: both;
	margin-bottom: 30px;
	font-size: 110%;		/*文字サイズ*/
	text-align: center;		/*文字をセンタリング*/
	letter-spacing: 0.1em;	/*文字間隔を少しだけ広くする指定*/
}

/*コンテンツ内にあるh3(見出し)タグの指定*/
#main h3 {
	clear: both;
	margin-bottom: 30px;
	font-size: 25px;		/*文字サイズ*/
	text-align: center;		/*文字をセンタリング*/
}


/*mainコンテンツのh5タグの設定（各ページのタイトル）*/
#main h5 {
	clear: both;
	margin-bottom: 15px;
	font-size: 100%;
	color: #666600;		/*文字色*/
	padding: 5px 20px;	/*上下、左右への余白*/
	background: #ffff99;	/*背景色*/
	border-radius: 2px;	/*角丸のサイズ*/
}
/*mainコンテンツのh5タグの１文字目への設定*/
#main h5::first-letter {
	border-left: 10px solid #feee35;	/*左線の幅・線種・色。*/
	padding-left: 10px;	/*ボックス内の余白*/
}



/*コンテンツ内にあるp(段落)タグ設定*/
#main p {
	padding: 0px 20px 30px;	/*上、左右、下への余白*/
}
/*他。微調整。*/
#main p + p {
	margin-top: -5px;
}
#main h2 + p,
#main h3 + p {
	margin-top: -10px;
}

/*listブロック
---------------------------------------------------------------------------*/
/*各ブロックごとの設定*/
.list {
	overflow: hidden;
	font-size: 100%;		/*文字サイズ*/
	margin-bottom: 30px;	/*ブロックの下に空けるスペース*/

}
/*各ブロックごとの設定（サムネイルタイプへの追加指定）*/
.list.thumb {
	width: 48%;			/*画像幅*/
	margin: 0 1% 30px;
	padding-top: 1%;
	float: left;			/*画像を左に回り込み*/
	text-align: center;
}
/*画像の設定*/
.list img {
	border-radius: 50%;	/*円形にする指定*/
	width: 30%;		/*画像の幅*/
	float: left;			/*画像を左に回り込み*/
	margin-right: 3%;		/*画像の右に空けるスペース*/
}
/*画像の設定（サムネイルタイプへの追加指定）*/
.list.thumb img {
	margin: 0;
	float: none;
	width: 60%;		/*画像の幅*/
}
/*マウスオン事*/
.list a:hover img {
	transition: 0.5s;
	opacity: 0.7;		/*透明度。70%色が出た状態。*/
}
/*マウスオン事（サムネイルタイプへの追加指定）*/
.list.thumb a:hover img {
	transform: scale(1.05);	/*ほんの少し画像を大きくする指定*/
}
/*h4タグ*/
.list h4 {
	font-size: 100%;	/*文字サイズ*/
}
/*h4タグ（サムネイルタイプへの追加指定）*/
.list.thumb h4 {
	font-size: 100%;	/*文字サイズ*/
}
/*p(段落)タグ*/
.list p {
	padding: 0 !important;
	line-height: 2;
}

/*リンクテキストの文字色*/
.list a {
	text-decoration: none;		/*画像リンクの下線を消す設定*/
	border: none;
}






/*list2ブロック（ＢＯＸを横並びにするための設定）
---------------------------------------------------------------------------*/
/*list2ブロック全体を囲むブロック*/
.list2-container {
	display: flex;			/*flexボックスを使う指定*/
	flex-wrap: wrap;			/*折り返す指定*/
	justify-content: space-between;	/*並びかたの種類の指定*/
	flex-direction: row;			/*子要素を横並びにする*/
}

/*「２カラムタイプ」のlistボックス。１個あたりのボックスの指定です。*/
.list2-container .list2{
	width: 46%;	/*ボックスの幅*/
}


/*１個あたりのボックス設定*/
.list2-container .list2 {
	display: flex;			/*flexボックスを使う指定*/
	flex-direction: column;		/*子要素を縦並びにする*/
	align-items: center;			/*垂直揃えの指定。上下中央に配置されるように。*/
	margin: 0 0px 40px;		/*上、左右、下へ空けるスペース*/
	background: #fff;			/*背景色。*/
	padding: 10px;				/*ボックス内の余白*/
	box-shadow: 2px 2px 10px rgba(0,0,0,0.15);	/*ボックスの影。右へ、下へ、ぼかし幅の順。0,0,0は黒の事で0.15は色が15%出た状態。*/
	border-radius: 20px;				/*角を丸くする指定*/
	overflow: hidden;				/*はみ出た要素を非表示にする。画像の角が飛び出ないようにする為の指定です。*/
	position: relative;		/*子要素でabsolute(絶対配置)を使うための指定*/
	color: #333;
}



/*2023/01/19追記*/
.list2 div {
	flex: 1;
}

/*ボックス内のfigure画像*/
.list2 figure {
	margin: -10px -10px 0;	/*上の.list2で設定しているpadding分を相殺して画像をブロックいっぱいに出す*/
}

/*ボックス内のh4タグ*/
.list2 h4 {
	text-align: center;
	margin: 0;
	font-size: 1.2em;		/*文字サイズを120%に*/
	font-weight: normal;	/*hタグのデフォルトの太字を標準にする。太字がいいならこの１行を削除。*/
	margin-bottom: 50px;	/*下に空けるスペース*/
}

/*ボックス内のtextブロック*/
.list2 .text {
	flex: 1;
}

/*ボックス内のpタグ*/
.list2 p {
	margin: 0;
	font-size: 1.0em;		/*文字サイズを100%に*/
}

.list2 a {
	font-weight: bold;		/*太字にする*/
}


.list2 a:hover {
	color: #ff4500;
	text-decoration: none;		/*マウスオン時に下線を消す設定。残したいならこの１行削除。*/
	border: none;
}




/*list3ブロック（ザ・フルートなどのページで画像を丸くしない・大きくしないため）
---------------------------------------------------------------------------*/
/*各ブロックごとの設定*/
.list3 {
	overflow: hidden;
	font-size: 100%;		/*文字サイズ*/
	margin-bottom: 10px;	/*ブロックの下に空けるスペース*/

}
/*画像の設定*/
.list3 img {
	border-radius: 5%;	/*角丸にする指定*/
	width: 12%;		/*画像の幅*/
	float: left;			/*画像を左に回り込み*/
	margin-right: 5%;		/*画像の右に空けるスペース*/
}

/*マウスオン事*/
.list3 a:hover img {
	transition: 0.5s;
	opacity: 0.7;		/*透明度。70%色が出た状態。*/
}

/*h4タグ*/
.list3 h4 {
	font-size: 100%;	/*文字サイズ*/
}

/*p(段落)タグ*/
.list3 p {
	padding: 0 !important;
	line-height: 2;
}

/*リンクテキストの文字色*/
.list3 a {
	text-decoration: none;		/*画像リンクの下線を消す設定*/
	border: none;
}


/*lis4tブロック（ＢＯＸを横並びにするための設定☆各楽器のページで画像を横並びにしたいため）
---------------------------------------------------------------------------*/
/*list4ブロック全体を囲むブロック*/
.list4-container {
	display: flex;			/*flexボックスを使う指定*/
	flex-wrap: wrap;			/*折り返す指定*/
	justify-content: space-between;	/*並びかたの種類の指定*/
	flex-direction: row;			/*子要素を横並びにする*/
}


/*「２カラムタイプ」のlistボックス。１個あたりのボックスの指定です。*/
.list4-container .list4{
	width: 46%;	/*ボックスの幅*/
}


/*１個あたりのボックス設定*/
.list4-container .list4 {
	display: flex;			/*flexボックスを使う指定*/
	flex-direction: column;			/*子要素を縦並びにする*/
	align-items: center;			/*垂直揃えの指定。上下中央に配置されるように。*/
	margin: 0 0px 40px;		/*上、左右、下へ空けるスペース*/
	background: #fff url(../images/kabe2.jpg)  ;	/*背景色と背景画像の読み込み。*/
	padding: 10px;				/*ボックス内の余白*/
	box-shadow: 2px 2px 10px rgba(0,0,0,0.15);	/*ボックスの影。右へ、下へ、ぼかし幅の順。0,0,0は黒の事で0.15は色が15%出た状態。*/
	border-radius: 20px;				/*角を丸くする指定*/
	position: relative;		/*子要素でabsolute(絶対配置)を使うための指定*/
	overflow: hidden;				/*はみ出た要素を非表示にする。画像の角が飛び出ないようにする為の指定です。*/
	color: #333;
}

/*2023/01/19追記*/
.list4 div {
	flex: 1;
}


/*ボックス内のh4タグ*/
.list4 h4 {
	text-align: center;
	margin: 0;
	font-size: 1.4em;		/*文字サイズを140%に*/
	font-weight: normal;	/*hタグのデフォルトの太字を標準にする。太字がいいならこの１行を削除。*/
	margin-bottom: 50px;	/*下に空けるスペース*/
}

/*ボックス内のtextブロック*/
.list4 .text {
	flex: 1;
}

/*ボックス内のpタグ*/
.list4 p {
	margin: 0;
	font-size: 1.0em;		/*文字サイズを100%に*/
}

.list4 a:hover {
	color: #2082aa;
}

.list4 {
	table-layout: auto;
	border-top: 1px solid #d33737;		/*上の線の幅、線種、色*/
}

/*tr（１行分）タグ設定*/
.list4 tr {
	border-bottom: 1px solid #ffd700;	/*テーブルの下線。幅、線種、色*/
}


/*テーブルの左側ボックス*/
.list4 th {
	text-align: center;			/*センタリング*/
	vertical-align: bottom;		/*下揃え*/
}

/*テーブルの右側ボックス*/
.list4 td {
	text-align: center;			/*左寄せ*/
	vertical-align: bottom;		/*下揃え*/
}

/* マーカーアンダーラインの設定（白）*/
.list4 h2 {
 background: linear-gradient(transparent 50%, #fafad2 50%);
}


/*テーブル内の水平方向の位置を指定する
---------------------------------------------------------------------------*/

.left {
　text-align: left;
}

.right {
　text-align: right;
}

.center {
　text-align: center;
}

.justify {
　text-align: justify;
}


/*テーブル内の垂直方向の位置を指定する
---------------------------------------------------------------------------*/

.baseline {
 vertical-align: baseline;
}

.top {
  vertical-align: top;
}

.middle {
  vertical-align: middle;
}

.bottom {
  vertical-align: bottom;
}




/*option1（productページのブロックの右上に斜めに配置している帯）
---------------------------------------------------------------------------*/
.option1 {
	text-align: center;display: block;
	width: 300px;		/*幅*/
	position: absolute;
	right: 0px;		/*ボックスに対して右から0pxの場所に配置*/
	top: 0px;			/*ボックスに対して上から0pxの場所に配置*/
	transform: rotate(45deg) translate(93px,-45px);	/*45度回転。右へ,下へ(マイナス設定なので上へ向けての指定)の移動距離*/
	background: #b30f0f;	/*背景色*/
	color: #fff;		/*文字色*/
	letter-spacing: 0.1em;	/*文字間隔をほんの少し広くとる*/
	box-shadow: -3px 3px 10px rgba(0,0,0,0.15);	/*ボックスの影。右へ、下へ、ぼかし幅、0.15は色が15%出た状態の事。*/
}


/*フッターメニュー設定
---------------------------------------------------------------------------*/
/*ボックス全体の設定*/
#footermenu {
	color: #ffffff;			/*文字色*/
	font-size: 0.9em;			/*文字サイズ*/
	display: flex;			/*flexボックスを使う指定*/
	justify-content: space-between;	/*並びかたの種類の指定*/
	background: #fff5e1 url(../images/bg_wood.jpg);	/*背景色、背景画像の読み込み*/
}

/*ulタグ（メニューの列単位）*/
#footermenu ul {
	margin: 0;
	padding: 0 25px;
	flex: 1;
	list-style: none;
}


/*ボックス内のリンクテキスト設定*/
#footermenu a {
	text-decoration: none;	/*リンクの下線を消す設定*/
	border: none;
	color: #ffffff;			/*文字色*/
	opacity: 0.7;	/*透明度。70%色がついた状態。*/
}

/*リンクテキストのマウスオン時*/
#footermenu a:hover {
	opacity: 1;		/*マウスオン時に色を100%にする*/
	border-bottom: 1px dashed #ffffff;	/*下線の幅・線種・色。transparentは透明。*/
	letter-spacing: 0.1em;	/*文字間隔をほんの少し広くとる*/
}

/*title*/
#footermenu .title {
	font-weight: bold;		/*太字にする*/
	color: #ffd700;			/*文字色*/
	padding-bottom: 5px;	/*下に空けるスペース*/
}



#footermenu {
	padding: 3% 50px;		/*上下、左右へのボックス内の余白*/
}


/*フッター設定
---------------------------------------------------------------------------*/
footer {
	clear: both;
	text-align: center;
	padding: 10px;
	font-size: 90%;
}
footer a {
	text-decoration: none;
	color: #fff;			/*リンクテキストの色*/
	text-decoration: none;		/*下線を消す設定。残したいならこの１行削除。*/
	border: none;
	}
footer a:hover {
	color: #ff6633;
}
footer .pr {display: block;}



/*box1指定（角丸のボックス）
---------------------------------------------------------------------------*/
.box1 {
	overflow: hidden;position: relative;
	padding: 30px 40px;	/*上下、左右へのボックス内の余白*/
	border-radius: 30px;	/*角丸のサイズ。この１行を削除すると、通常の長方形になります。*/
	margin-bottom: 30px;	/*下に空けるスペース*/
	background: #fff;		/*背景色*/
	color: #545454;		/*文字色*/
}

.box1 a {
	font-weight: bold;		/*太字にする*/
}

.box1 a:hover {
	color: #ff4500;
}



/*box2指定（背景が野原）
---------------------------------------------------------------------------*/
.box2 {
	overflow: hidden;position: relative;
	padding: 20px 40px;	/*上下、左右へのボックス内の余白*/
	border-radius: 30px;	/*角丸のサイズ。この１行を削除すると、通常の長方形になります。*/
	margin-bottom: 30px;	/*下に空けるスペース*/
	background: #fff url(../images/kabe2.jpg)  ;	/*背景色と背景画像の読み込み。*/
	color: #545454;		/*文字色*/
	font-size: 100%;
}


/*box3指定（下のひよこ広告用）
---------------------------------------------------------------------------*/
.box3 {
	overflow: hidden;position: relative;
	padding: 20px 40px;	/*上下、左右へのボックス内の余白*/
	border-radius: 30px;	/*角丸のサイズ。この１行を削除すると、通常の長方形になります。*/
	margin-bottom: 30px;	/*下に空けるスペース*/
	background: #fff;		/*背景色*/
	color: #545454;		/*文字色*/
	text-align: center;
}

.box3 a {
	font-weight: bold;		/*太字にする*/
	color: #545454;		/*文字色*/
}

.box3 a:hover {
	color: #ff0000;
}



/*box4指定（カウンター用ボックス）
---------------------------------------------------------------------------*/
.box4 {
	overflow: hidden;position: relative;
	padding: 10px 40px;	/*上下、左右へのボックス内の余白*/
	border-radius: 30px;	/*角丸のサイズ。この１行を削除すると、通常の長方形になります。*/
	margin-bottom: 30px;	/*下に空けるスペース*/
	background: #fff;		/*背景色*/
	color: #545454;		/*文字色*/
}




/*BOX内の背景などの設定
---------------------------------------------------------------------------*/

/*bg1タイプの背景色（背景薄黄色）*/
.bg1 {
	background: #FFFF66;	/*背景色*/
	color: #ff4500;		/*文字色*/
}

/* マーカーアンダーラインの設定（オレンジ）*/
.bg1 h2 {
 background: linear-gradient(transparent 50%, #ffd700 50%);
}

.bg1 a {
	color: #333333;
}

.bg1 a:hover {
	color: #ff4500;
	text-decoration: none;		/*マウスオン時に下線を消す設定。残したいならこの１行削除。*/
	border: none;
}


/*bg2タイプの背景色（背景透明）*/
.bg2 {
	background: transparent;	/*背景を透明にする*/
	border: 2px dashed #fff;	/*枠線の幅、線種、色*/
	color: #fff;		/*文字色*/
}
.bg2 a {
	color: #eee8aa;		/*リンクの文字色*/
	border-bottom: 1px dashed #eee8aa;	/*下線の幅・線種・色。transparentは透明。*/
}

.bg2 a:hover {
	color: #ffff00;
	text-decoration: none;		/*マウスオン時に下線を消す設定。残したいならこの１行削除。*/
	border: none;
}



/* マーカーアンダーラインの設定（オレンジ）*/
.bg2 h2 {
 background: linear-gradient(transparent 50%, #ff4500 50%);
}


/*bg3タイプの背景色（背景薄ピンク）*/
.bg3 {
	background: #FFa07a;	/*背景色*/
	color: #d33737;		/*文字色*/
}

.bg3 a {
	color: #d33737;
	border-bottom: 1px dashed #d33737;	/*下線の幅・線種・色。transparentは透明。*/
}

.bg3 a:hover {
	color: #ffff99;
	text-decoration: none;		/*マウスオン時に下線を消す設定。残したいならこの１行削除。*/
	border: none;
}

/* マーカーアンダーラインの設定（モカシン）*/
.bg3 h2 {
 background: linear-gradient(transparent 50%, #ffe4b5 50%);
}



/*bg4タイプの背景色（背景クリーム）*/
.bg4 {
	background: #FFFF99;	/*背景色*/
	color: #666600;		/*文字色*/
}

.bg4 a {
	color: #666600;
	border-bottom: 1px dashed #6666600;	/*下線の幅・線種・色。transparentは透明。*/
}

.bg4 a:hover {
	color: #cccc00;
	text-decoration: none;		/*マウスオン時に下線を消す設定。残したいならこの１行削除。*/
	border: none;
}



/* マーカーアンダーラインの設定（黄緑）*/
.bg4 h2 {
 background: linear-gradient(transparent 50%, #cccc00 50%);
}


/*bg5（背景が画像★ドット）
---------------------------------------------------------------------------*/
.bg5 {
	background: #fff5e1 url(../images/bg_dot.png);	/*背景色、背景画像の読み込み*/
	color: #333333;	/*文字色*/
}


.bg5 a {
	color: #333333;
	border-bottom: 1px dashed #333333;	/*下線の幅・線種・色。transparentは透明。*/
}

.bg5 a:hover {
	color: #ff0000;
	text-decoration: none;		/*マウスオン時に下線を消す設定。残したいならこの１行削除。*/
	border: none;
}


/* マーカーアンダーラインの設定（ゴールド）*/
.bg5 h2 {
 background: linear-gradient(transparent 50%, #ffd700 50%);
}



/*bg6（背景が画像★ピンクの花びら）
---------------------------------------------------------------------------*/
.bg6 {
	background: #fff5e1 url(../images/bg_pink.jpg);	/*背景色、背景画像の読み込み*/
	color: #333333;	/*文字色*/
}

.bg6 a:hover {
	color: #ffff66;
	text-decoration: none;		/*マウスオン時に下線を消す設定。残したいならこの１行削除。*/
	border: none;
}

/* マーカーアンダーラインの設定（白）*/
.bg6 h2 {
 background: linear-gradient(transparent 50%, #fafad2 50%);
}



/*bg7（背景が画像★ハート大）
---------------------------------------------------------------------------*/
.bg7 {
	background: #fff5e1 url(../images/bg_heart.jpg);	/*背景色、背景画像の読み込み*/
	color: #333333;	/*文字色*/
}

.bg7 a {
	color: #dc143c;
	border-bottom: 1px dashed #dc143c;	/*下線の幅・線種・色。transparentは透明。*/
}

.bg7 a:hover {
	color: #6b8e23;
	text-decoration: none;		/*マウスオン時に下線を消す設定。残したいならこの１行削除。*/
	border: none;
}

/* マーカーアンダーラインの設定（白）*/
.bg7 h2 {
 background: linear-gradient(transparent 50%, #fafad2 50%);
}



/*bg8（背景が画像★渦）
---------------------------------------------------------------------------*/
.bg8 {
	background: #fff5e1 url(../images/bg_uzu.jpg);	/*背景色、背景画像の読み込み*/
	color: #333333;	/*文字色*/
}


/* マーカーアンダーラインの設定（ゴールド）*/
.bg8 h2 {
 background: linear-gradient(transparent 50%, #ffd700 50%);
}

.bg8 a {
	color: #808000;
	border-bottom: 1px dashed #808000;	/*下線の幅・線種・色。transparentは透明。*/
}

.bg8 a:hover {
	color: #008080;
	text-decoration: none;		/*マウスオン時に下線を消す設定。残したいならこの１行削除。*/
	border: none;
}

/*bg9（背景が画像★ウッド）
---------------------------------------------------------------------------*/
.bg9 {
	background: #fff5e1 url(../images/bg_wood.jpg);	/*背景色、背景画像の読み込み*/
	color: #ffffff;	/*文字色*/
}

.bg9 a {
	color: #ffffff;
	border-bottom: 1px dashed #ffffff;	/*下線の幅・線種・色。transparentは透明。*/
}

.bg9 a:hover {
	color: #eee8aa;
	text-decoration: none;		/*マウスオン時に下線を消す設定。残したいならこの１行削除。*/
	border: none;
}



/* マーカーアンダーラインの設定（黒）*/
.bg9 h2 {
 background: linear-gradient(transparent 50%, #000000 50%);
}


/*bg10（背景が画像★○まる）
---------------------------------------------------------------------------*/
.bg10 {
	background: #fff5e1 url(../images/bg_maru.jpg);	/*背景色、背景画像の読み込み*/
	color: #333333;	/*文字色*/
}

.bg10 a {
	color: #333333;
	border-bottom: 1px dashed #333333;	/*下線の幅・線種・色。transparentは透明。*/
}

.bg10 a:hover {
	color: #f08080;
	text-decoration: none;		/*マウスオン時に下線を消す設定。残したいならこの１行削除。*/
	border: none;
}



/* マーカーアンダーラインの設定（濃いピンク）*/
.bg10 h2 {
 background: linear-gradient(transparent 50%, #f08080 50%);
}



/*bg11（背景が画像★×ばつ）
---------------------------------------------------------------------------*/
.bg11 {
	background: #fff5e1 url(../images/bg_dame.jpg);	/*背景色、背景画像の読み込み*/
	color: #0000ffj;	/*文字色*/
}

.bg11 a {
	color: #0000ffj;
	border-bottom: 1px dashed #0000ffj;	/*下線の幅・線種・色。transparentは透明。*/
}

.bg11 a:hover {
	color: #6495ed;
	text-decoration: none;		/*マウスオン時に下線を消す設定。残したいならこの１行削除。*/
	border: none;
}



/* マーカーアンダーラインの設定（青）*/
.bg11 h2 {
 background: linear-gradient(transparent 50%, #00bfff 50%);
}


/*bg12（背景が画像★ピンクのアスタリスク）
---------------------------------------------------------------------------*/
.bg12 {
	background: #fff5e1 url(../images/kabe01.gif);	/*背景色、背景画像の読み込み*/
	color: #333333;	/*文字色*/
}

.bg12 a:hover {
	color: #ff4500;
	text-decoration: none;		/*マウスオン時に下線を消す設定。残したいならこの１行削除。*/
	border: none;
}

/* マーカーアンダーラインの設定（白）*/
.bg12 h2 {
 background: linear-gradient(transparent 50%, #fafad2 50%);
}



/*bg13（背景が画像★水色のアスタリスク）
---------------------------------------------------------------------------*/
.bg13 {
	background: #fff5e1 url(../images/kabe02.gif);	/*背景色、背景画像の読み込み*/
	color: #333333;	/*文字色*/
}

.bg13 a:hover {
	color: #6495ed;
	text-decoration: none;		/*マウスオン時に下線を消す設定。残したいならこの１行削除。*/
	border: none;
}

/* マーカーアンダーラインの設定（白っぽい）*/
.bg13 h2 {
 background: linear-gradient(transparent 50%, #fafad2 50%);
}



/*bg14（背景が画像★★黄色のアスタリスク）
---------------------------------------------------------------------------*/
.bg14 {
	background: #fff5e1 url(../images/kabe03.gif);	/*背景色、背景画像の読み込み*/
	color: #333333;	/*文字色*/
}

.bg14 a {
	color: #333333;
	border-bottom: 1px dashed #333333;	/*下線の幅・線種・色。transparentは透明。*/
}

.bg14 a:hover {
	color: #ff4500;
	text-decoration: none;		/*マウスオン時に下線を消す設定。残したいならこの１行削除。*/
	border: none;
}



/* マーカーアンダーラインの設定（ベージュ）*/
.bg14 h2 {
 background: linear-gradient(transparent 50%, #f0e68c 50%);
}


/*bg15タイプの背景色（背景白なんだけど長いアンダーライン使いたいとき）*/
.bg15 {
	background: #ffffff;	/*背景色*/
	color: #333333;		/*文字色*/
}

.bg15 a {
	color: #333333;
	border-bottom: 1px dashed #333333;	/*下線の幅・線種・色。transparentは透明。*/
}

.bg15 a:hover {
	color: #ff0000;
	text-decoration: none;		/*マウスオン時に下線を消す設定。残したいならこの１行削除。*/
	border: none;
}



/* マーカーアンダーラインの設定（ピーチパフ）*/
.bg15 h2 {
 background: linear-gradient(transparent 50%, #ffdab9 50%);
}



/*bg16（背景が画像★💛）
---------------------------------------------------------------------------*/
.bg16 {
	background: #fff5e1 url(../images/bg_pink2.gif);	/*背景色、背景画像の読み込み*/
	color: #333333;	/*文字色*/
}

.bg16 a:hover {
	color: #ff0000;
	text-decoration: none;		/*マウスオン時に下線を消す設定。残したいならこの１行削除。*/
	border: none;
}

/* マーカーアンダーラインの設定（白っぽい）*/
.bg16 h2 {
 background: linear-gradient(transparent 50%, #fafad2 50%);
}


/*bg17（背景が画像オーボエ用）
---------------------------------------------------------------------------*/
.bg17 {
	background: #fff5e1 url(../images/bg_oboe.jpg);	/*背景色、背景画像の読み込み*/
	color: #333333;	/*文字色*/
}

.bg17 a:hover {
	color: #6b8e23;
	text-decoration: none;		/*マウスオン時に下線を消す設定。残したいならこの１行削除。*/
	border: none;
}

/* マーカーアンダーラインの設定（白っぽい）*/
.bg17 h2 {
 background: linear-gradient(transparent 50%, #fafad2 50%);
}


/*bg18（背景が画像クラリネット用）
---------------------------------------------------------------------------*/
.bg18 {
	background: #fff5e1 url(../images/bg_cl.jpg);	/*背景色、背景画像の読み込み*/
	color: #333333;	/*文字色*/
}

.bg18 a:hover {
	color: #1e90ff;
	text-decoration: none;		/*マウスオン時に下線を消す設定。残したいならこの１行削除。*/
	border: none;
}

/* マーカーアンダーラインの設定（白っぽい）*/
.bg18 h2 {
 background: linear-gradient(transparent 50%, #fafad2 50%);
}



/*bg19（背景が画像サックス用）
---------------------------------------------------------------------------*/
.bg19 {
	background: #fff5e1 url(../images/bg_sax.jpg);	/*背景色、背景画像の読み込み*/
	color: #333333;	/*文字色*/
}

.bg19 a:hover {
	color: #ff0000;
	text-decoration: none;		/*マウスオン時に下線を消す設定。残したいならこの１行削除。*/
	border: none;
}

/* マーカーアンダーラインの設定（白っぽい）*/
.bg19 h2 {
 background: linear-gradient(transparent 50%, #fafad2 50%);
}


/*bg20（背景が画像ホルン用）
---------------------------------------------------------------------------*/
.bg20 {
	background: #fff5e1 url(../images/bg_horn.jpg);	/*背景色、背景画像の読み込み*/
	color: #333333;	/*文字色*/
}

.bg20 a:hover {
	color: #6b8e23;
	text-decoration: none;		/*マウスオン時に下線を消す設定。残したいならこの１行削除。*/
	border: none;
}

/* マーカーアンダーラインの設定（白っぽい）*/
.bg20 h2 {
 background: linear-gradient(transparent 50%, #fafad2 50%);
}


/*bg21（背景が画像トランペット用）
---------------------------------------------------------------------------*/
.bg21 {
	background: #fff5e1 url(../images/bg_tp.jpg);	/*背景色、背景画像の読み込み*/
	color: #333333;	/*文字色*/
}

.bg21 a:hover {
	color: #6495ed;
	text-decoration: none;		/*マウスオン時に下線を消す設定。残したいならこの１行削除。*/
	border: none;
}

/* マーカーアンダーラインの設定（白っぽい）*/
.bg21 h2 {
 background: linear-gradient(transparent 50%, #fafad2 50%);
}


/*bg22（背景が画像トロンボーン用）
---------------------------------------------------------------------------*/
.bg22 {
	background: #fff5e1 url(../images/bg_tb.jpg);	/*背景色、背景画像の読み込み*/
	color: #333333;	/*文字色*/
}


.bg22 a:hover {
	color: #ff4500;
	text-decoration: none;		/*マウスオン時に下線を消す設定。残したいならこの１行削除。*/
	border: none;
}


/* マーカーアンダーラインの設定（ゴールド）*/
.bg22 h2 {
 background: linear-gradient(transparent 50%, #ffd700 50%);
}



/*bg23（背景が画像ユーフォ・チューバ用）
---------------------------------------------------------------------------*/
.bg23 {
	background: #fff5e1 url(../images/bg_eup.jpg);	/*背景色、背景画像の読み込み*/
	color: #333333;	/*文字色*/
}

.bg23 a:hover {
	color: #ff4500;
	text-decoration: none;		/*マウスオン時に下線を消す設定。残したいならこの１行削除。*/
	border: none;
}

/* マーカーアンダーラインの設定（白っぽい）*/
.bg23 h2 {
 background: linear-gradient(transparent 50%, #fafad2 50%);
}


/*bg24（背景が画像パーカッション用）
---------------------------------------------------------------------------*/
.bg24 {
	background: #fff5e1 url(../images/bg_per.jpg);	/*背景色、背景画像の読み込み*/
	color: #333333;	/*文字色*/
}

.bg24 a:hover {
	color: #b22222;
	text-decoration: none;		/*マウスオン時に下線を消す設定。残したいならこの１行削除。*/
	border: none;
}

/* マーカーアンダーラインの設定（白っぽい）*/
.bg24 h2 {
 background: linear-gradient(transparent 50%, #fafad2 50%);
}


/*bg25（背景が画像おもしろそう用）
---------------------------------------------------------------------------*/
.bg25 {
	background: #fff5e1 url(../images/bg_omoshiro.jpg);	/*背景色、背景画像の読み込み*/
	color: #333333;	/*文字色*/
}


/* マーカーアンダーラインの設定（オレンジ）*/
.bg25 h2 {
 background: linear-gradient(transparent 50%, #ffd700 50%);
}

.bg25 a {
	color: #333333;
}

.bg25 a:hover {
	color: #ff4500;
	text-decoration: none;		/*マウスオン時に下線を消す設定。残したいならこの１行削除。*/
	border: none;
}



/*bg26（背景が画像数学用）
---------------------------------------------------------------------------*/
.bg26 {
	background: #fff5e1 url(../images/bg_suugaku.jpg);	/*背景色、背景画像の読み込み*/
	color: #333333;	/*文字色*/
}


.bg26 a:hover {
	color: #1e90ff;
	text-decoration: none;		/*マウスオン時に下線を消す設定。残したいならこの１行削除。*/
	border: none;
}

/* マーカーアンダーラインの設定（白っぽい）*/
.bg26 h2 {
 background: linear-gradient(transparent 50%, #fafad2 50%);
}



/*bg27（背景が画像童謡用）
---------------------------------------------------------------------------*/
.bg27 {
	background: #fff5e1 url(../images/bg_kininaru.png);	/*背景色、背景画像の読み込み*/
	color: #333333;	/*文字色*/
}

.bg27 a:hover {
	color: #6b8e23;
	text-decoration: none;		/*マウスオン時に下線を消す設定。残したいならこの１行削除。*/
	border: none;
}

/* マーカーアンダーラインの設定（白っぽい）*/
.bg27 h2 {
 background: linear-gradient(transparent 50%, #fafad2 50%);
}



/*情報量が多いページで下の方に飛ぶメニュー
---------------------------------------------------------------------------*/
/*メニューを囲むブロック*/
.inline-menu {
	text-align: left;
	margin-bottom: 20px;	/*下に空けるスペース*/
}

/*メニュー１個あたりの設定*/
.inline-menu li {
	display: inline-block;	/*横並びにする*/
	margin-bottom: 10px;	/*メニューが２段以上になった場合の、上下の間に空けるスペース*/
}

.inline-menu li a {
	display: block;text-decoration: none;
	padding: 0 10px;			/*上下、左右へのメニュー内の余白*/
	background: #ffffff;			/*背景色*/
	border: 3px solid #b22222;		/*枠線の幅、線種、色*/
	border-radius: 3px;			/*角丸のサイズ*/
	color: #d33737;
}

/*マウスオン時*/
.inline-menu li a:hover {
	background: #d33737;
	border: 3px solid #fff;		/*枠線の幅、線種、色*/
	color: #fff;
}


/*テーブル
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta1 caption {
	border-top: 1px solid #d33737;		/*下の線の幅、線種、色*/
	font-weight: bold;			/*太字に*/
	color: #ffffff;			/*文字色*/
	text-align: center;			/*文字をセンタリング*/
	padding: 10px;			/*ボックス内の余白*/
	background: rgba(211,55,55,1);	/*背景色。#d33737　1は100％色が出ている設定。薄くしたければ0.5など。*/
}

/*テーブル１行目に入った見出し部分（※tamidashi）*/
.ta1 th.tamidashi {
	width: auto;
	text-align: center;			/*文字をセンタリング*/
}

/*ta1テーブルブロック設定*/
.ta1 {
	table-layout: fixed;
	width: 100%;
	margin: 0 auto 30px;
	border-top: 1px solid #d33737;		/*上の線の幅、線種、色*/
}

/*tr（１行分）タグ設定*/
.ta1 tr {
	border-bottom: 1px solid #ffd700;	/*テーブルの下線。幅、線種、色*/
}

.ta1, .ta1 td, .ta1 th {
	word-break: break-all;
	padding: 10px;			/*テーブル内の余白*/
}

/*テーブルの左側ボックス*/
.ta1 th {
	text-align: center;			/*センタリング*/
	width: 30%;			/*幅*/
}

/*テーブルの右側ボックス*/
.ta1 td {
	text-align: left;			/*左寄せ*/
}

.ta1 a {
	text-decoration: none;		/*画像リンクの下線を消す設定*/
	border: none;
	color: #d33737;	/*リンク色*/
}

.ta1 a:hover {
	color: #ffd700;			/*マウスオン時の文字色*/
}




/*テーブル（背景をいかすテーブル）
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta2 caption {
	font-weight: bold;		/*太字に*/
	padding: 10px 5px;		/*上下、左右へのボックス内の余白。基本的に数行下の「.ta1 th, .ta1 td」のpaddingと揃えておけばOKです。*/
	color: #d33737;		/*文字色*/
	background: #fff8d5;	/*背景色*/
	font-size: 1.2em;		/*文字サイズ。親要素の1.2倍。*/
	margin-bottom: 15px;	/*下に空けるスペース*/
	border-radius: 5px;		/*角を丸くする指定*/
}



/*ta2テーブルブロック設定*/
.ta2 {
	border-top: 1px solid #fff;	/*テーブルの一番上の線。幅、線種、色*/
	width: 100%;
	margin: 0 auto 30px;	/*最後の「30px」がテーブルの下に空けるスペースです*/
}

/*tr（１行分）タグ設定*/
.ta2 tr {
	border-bottom: 1px solid #fff;	/*テーブルの下線。幅、線種、色*/
}

/*th（左側）、td（右側）の共通設定*/
.ta2 th, .ta1 td {
	padding: 10px 5px;		/*上下、左右へのボックス内の余白*。基本的に数行上の「.ta1 caption」のpaddingと揃えておけばOKです。*/
	word-break: break-all;	/*英語などのテキストを改行で自動的に折り返す設定。これがないと、テーブルを突き抜けて表示される場合があります。*/
}

/*th（左側）のみの設定*/
.ta2 th {
	width: 35%;		/*幅*/
	text-align: left;		/*左よせにする*/
}

/*td（右側）のみの設定*/
.ta2 td {
	text-align: left;		/*左よせにする*/
}

.ta2 a {
	text-decoration: none;		/*画像リンクの下線を消す設定*/
	border: none;
	color: #ffff00;	/*リンク色*/
}

.ta2 a:hover {
	color: #d2b48c;			/*マウスオン時の文字色*/
}


/*テーブル（トリルのページ）
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta3 caption {
	border-top: 1px solid #d33737;		/*下の線の幅、線種、色*/
	font-weight: bold;			/*太字に*/
	color: #333;			/*文字色*/
	text-align: center;			/*文字をセンタリング*/
	padding: 10px;			/*ボックス内の余白*/
	background: #fff5e1 url(../images/bg_dot.png);	/*背景色、背景画像の読み込み*/
}

/*テーブル１行目に入った見出し部分（※tamidashi）*/
.ta3 th.tamidashi {
	width: auto;
	text-align: center;			/*文字をセンタリング*/
}

/*ta1テーブルブロック設定*/
.ta3 {
	table-layout: fixed;
	width: 100%;
	margin: 0 auto 30px;
	border-top: 1px solid #d33737;	/*上の線の幅、線種、色*/
	color: #000000;			/*文字色*/
}

/*tr（１行分）タグ設定*/
.ta3 tr {
	border-bottom: 1px solid #ffd700;	/*テーブルの下線。幅、線種、色*/
}

.ta3, .ta3 td, .ta3 th {
	word-break: break-all;
	padding: 10px;			/*テーブル内の余白*/
	text-align: center;			/*文字をセンタリング*/
}

.ta3 th {
	text-align: center;			/*文字をセンタリング*/
}


/*----------------------------------------------------
  .count（あいさつうさぎまで含むテーブル）
----------------------------------------------------*/
.count {
	table-layout: fixed;
	width: 60%;
	margin: 0 auto 0px;
	border: 0px solid #ffd700;		/*上の線の幅、線種、色*/
}
.count th  { width: 100px; text-align: center;}
.count td  { width: 100%; text-align: center;}

 

/*----------------------------------------------------
  .sumaho（テーブル枠無しのスマホ対応）カウンター部分
----------------------------------------------------*/
.sumaho {
	table-layout: fixed;
	width: 100%;
	margin: 0 auto 0px;
	border: 0px solid #ffd700;		/*上の線の幅、線種、色*/
}
.sumaho th  { width: 50%; text-align: center;}
.sumaho td  { width: 50%; text-align: center;}
 

/*----------------------------------------------------
  .sumaho2（テーブル枠無しのスマホ対応）更新情報部分
----------------------------------------------------*/
.sumaho2 { width: 100%;}
.sumaho2 th  {
	text-align: center;
	width: 180px;
	padding: 0px; 
	border: 0px solid #ddd;
}

.sumaho2 td {
	text-align: left;
	width: auto;
}


/*----------------------------------------------------
  .hiyoko（ひよこ広告テーブル）
----------------------------------------------------*/
.hiyoko {
	table-layout: fixed;
	width: 60%;
	margin: 0 auto 30px;
	border: 0px solid #ffd700;		/*上の線の幅、線種、色*/
}
.hiyoko th  { width: 100px; text-align: center;}
.hiyoko td  { width: 100%; text-align: center;}


/*----------------------------------------------------
  .sozai（素材別一覧表用）多項目用
----------------------------------------------------*/
 .sozai {
	width: 100%;
	table-layout: fixed;
	width: 100%;
	margin: 0 auto 30px;
 }

/*tr（１行分）タグ設定*/
.sozai tr {
	border-bottom: 1px solid #d33737;	/*テーブルの下線。幅、線種、色*/
}

.sozai th {
	border-top: 1px solid #d33737;		/*下の線の幅、線種、色*/
	font-weight: bold;			/*太字に*/
	color: #ffffff;			/*文字色*/
	text-align: center;			/*文字をセンタリング*/
	padding: 10px;			/*ボックス内の余白*/
	background: #e9727e;		/*背景色。*/
}


.sozai, .sozai td, .sozai th {
	word-break: break-all;
	text-align: center;			/*文字をセンタリング*/
	padding: 10px;			/*テーブル内の余白*/
}




/*画像の上に文字や画像を書く設定。画像の上に画像も可能。*/

.moji{
	height:auto;
	position: relative;
}
.moji img{
	width:100%;
	height:auto;
}
.moji p{
	position: absolute;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
	padding:0;
	margin:0;
	font-size:20px;
	color: #333333;
}
/*画像の上に文字を書く設定ここまで*/

/*画像の上に画像を重ねる設定。練習の各楽器のドア用。*/
.door01 {
	position: relative;
	background: url(../images/tatemono01.png) no-repeat center center/cover; 
	width: 180px; 	/* フルート用建物の設定 */
	height: 180px; 
	padding: 0px; 	/* 適当な余白を指定 */
	}

.door02 {
	position: relative;
	background: url(../images/tatemono02.png) no-repeat center center/cover; 
	width: 180px; 	/* オーボエ用建物の設定 */
	height: 129px; 
	padding: 0px; 	/* 適当な余白を指定 */
	}

.door03 {
	position: relative;
	background: url(../images/tatemono03.png) no-repeat center center/cover; 
	width: 170px; 	/* クラ用建物の設定 */
	height: 180px; 
	padding: 0px; 	/* 適当な余白を指定 */
	}

.door04 {
	position: relative;
	background: url(../images/tatemono04.png) no-repeat center center/cover; 
	width: 180px; 	/* サックス用建物の設定 */
	height: 190px; 
	padding: 0px; 	/* 適当な余白を指定 */
	}

.door05 {
	position: relative;
	background: url(../images/tatemono05.png) no-repeat center center/cover; 
	width: 180px; 	/* ホルン用建物の設定 */
	height: 168px; 
	padding: 0px; 	/* 適当な余白を指定 */
	}

.door06 {
	position: relative;
	background: url(../images/tatemono06.png) no-repeat center center/cover; 
	width: 180px; 	/* トランペット用建物の設定 */
	height: 170px; 
	padding: 0px; 	/* 適当な余白を指定 */
	}

.door07 {
	position: relative;
	background: url(../images/tatemono07.png) no-repeat center center/cover; 
	width: 180px; 	/* トロンボーン用建物の設定 */
	height: 180px; 
	padding: 0px; 	/* 適当な余白を指定 */
	}

.door08 {
	position: relative;
	background: url(../images/tatemono08.png) no-repeat center center/cover; 
	width: 180px; 	/* ユーフォ・チューバ用建物の設定 */
	height: 185px; 
	padding: 0px; 	/* 適当な余白を指定 */
	}

.door09 {
	position: relative;
	background: url(../images/tatemono09.png) no-repeat center center/cover; 
	width: 180px; 	/* パーカッション用建物の設定 */
	height: 185px; 
	padding: 0px; 	/* 適当な余白を指定 */
	}


.door10 {
	position: relative;
	background: url(../images/tatemono10.png) no-repeat center center/cover; 
	width: 185px; 	/* 倉庫の設定 */
	height: 180px; 
	padding: 0px; 	/* 適当な余白を指定 */
	}

/*画像の上に画像を重ねる設定。練習の各楽器のドア用。ここまで。*/


/*ドアの位置設定*/
.door {
	position: absolute;
	bottom: 0px;
	left: 73px;
	width: 34px;
	height: 60px;
	}
/*ドアの位置設定　ここまで*/

/*泥棒の位置設定*/
.dorobo {
	position: absolute;
	bottom: 0px;
	left: 40px;
	}
.dorobo a  {
	opacity: 1.0;	/*マウスオン時に画像を半透明にする設定。0.7は70%の透明度の意味。*/
	text-decoration: none;		/*リンクの下線を消す設定*/
	border: none;
}
/*泥棒の位置設定　ここまで*/





/*画像をいびつな形にする設定（まだ使っていない）*/
.ibitu {
  margin:0 auto 5%;
  border-radius: 40% 80% 35% 65% / 50% 50% 70% 40%;
  background: #ffd700;
}
/*画像をいびつな形にする設定（まだ使っていない）*/



/*btn
---------------------------------------------------------------------------*/
input[type="submit"].btn,
input[type="button"].btn,
input[type="reset"].btn {
	-webkit-appearance: none;
	outline: none;
	border: 1px solid #b30f0f;
	background: #b30f0f;
	color: #fff;
	padding: 10px 30px;
	border-radius: 100px;
	font-size: 16px;
}
input[type="submit"].btn:hover,
input[type="button"].btn:hover,
input[type="reset"].btn:hover {
	background: #fff;
	color: #b30f0f;
}

/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/
body .nav-fix-pos-pagetop a {
	display: none;
}
body.is-fixed-pagetop .nav-fix-pos-pagetop a {
	display: block;text-decoration: none;text-align: center;position: fixed;animation-name: opa1;animation-duration: 1s;animation-fill-mode: forwards;
	width: 80px;			/*ボタンの幅*/
	line-height: 80px;			/*ボタンの高さ*/
	bottom: 50px;			/*画面の下からの配置場所指定*/
	right: 3%;			/*画面の右からの配置場所指定*/
	background: rgba(0,0,0,0.3);		/*背景色。0,0,0は黒の事で0.3は色が30%出た状態。*/
	border: 1px dashed #333;		/*枠線の幅、線種、色*/
	border-radius: 58% 42% 61% 39% / 44% 55% 45% 56%;	/*角丸の指定*/
}
/*マウスオン時*/
body.is-fixed-pagetop .nav-fix-pos-pagetop a:hover {
	background: #d33737;			/*背景色*/
	border: 2px dashed #fff;		/*枠線の幅、線種、色*/
}

/*トップページのNEWアイコン
---------------------------------------------------------------------------*/
.newicon {
	font-size: 70%;
	display: inline-block;
	line-height: 1.5;
	padding: 2px 5px;
	border-radius: 2px;
	margin: 0px 5px;
	vertical-align: text-top;
	background: #F00;		/*背景色*/
	color: #FFF;		/*文字色*/
}

/*ul.disc,olタグ
---------------------------------------------------------------------------*/
ul.disc {
	list-style: disc;
	padding: 0 20px 30px 42px;
}
ol {
	padding: 0 20px 30px 42px;
}

/*その他
---------------------------------------------------------------------------*/
.look {background: rgba(0,0,0,0.1);border: 1px solid #ccc;padding: 5px 10px;border-radius: 4px;}
.mb15,.mb1em {margin-bottom: 15px;}
.mb30 {margin-bottom: 30px;}
.clear {clear: both;}
.color1, .color1 a {color: #ffbb05;}
.box1 .color1,.box1 .color1 a {color: #FF4500;}
.pr {font-size: 14px;}
.wl {width: 96%;}
.ws {width: 50%;}
.c {text-align: center;}
.r {text-align: right;}
.l {text-align: left;}
.big1 {font-size: 40px;letter-spacing: 0.2em;}
.mini1 {font-size: 11px;}



/*画面幅600px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:600px){

/*全体の設定
---------------------------------------------------------------------------*/
body {
	font-size: 6.0vw;
}

/*ヘッダー（一番上の、ロゴやスライドショーが入っているブロック）
---------------------------------------------------------------------------*/
/*ロゴ画像*/
header #logo  {
	width: 300px;		/*画像の幅*/
}



/*ヘッダー（トップページ以外のロゴ）
---------------------------------------------------------------------------*/
/*ロゴ画像*/
header #logo2  {
	width: 40%;	/*画像の幅*/
}


/*メニュー
---------------------------------------------------------------------------*/
/*メニューブロック全体への指定*/
#menubar {
	font-size: 100%;
}
#menubar li a {
	padding: 0px 5px;		/*上下、左右へのメニューの内側にとる余白*/
}

/*listブロック
---------------------------------------------------------------------------*/
/*画像の設定（サムネイルタイプへの追加指定）*/
.list.thumb img {
	width: 100%;		/*画像の幅*/
}



/*list2ブロック（道の駅サンプルからコピー）
---------------------------------------------------------------------------*/
.list2-container {
	flex-direction: column;			/*子要素を縦並びにする*/
}

/*「２カラムタイプ」のlistボックス。１個あたりのボックスの指定です。*/
.list2-container .list2 {
	width: 95%;	/*ボックスの幅*/
}


/*１個あたりのボックス設定*/
.list2 {
	margin-bottom: 30px;			/*ボックス同士の上下間の余白*/
}

.list2 h4 {
	font-size: 1.1em;		/*文字サイズを120%に*/
}


/*list3ブロック
---------------------------------------------------------------------------*/
/*画像の設定（サムネイルタイプへの追加指定）*/
.list3 img {
	width: 30%;		/*画像の幅*/
}


/*list4ブロック（各楽器の家＆ドアの設定）
---------------------------------------------------------------------------*/




/*「２カラムタイプ」のlistボックス。１個あたりのボックスの指定です。*/
.list4-container .list4 {
	width: 95%;	/*ボックスの幅*/
}


/*１個あたりのボックス設定*/

.list4 {
	display:inline-block;		/*画像を横並びにする設定*/
	text-align: center;
	font-size: 80%;		/*文字サイズ*/
}

.list4 tr,list4 th,list4 td{
	width: 100%;
	display:flex			/*画像を横並びにする設定*/
	align-self: flex-end;			/*下揃え*/
}

.list4 img {
 	display:inline-block;			/*画像を横並びにする設定*/
	align-self: flex-end;			/*画像を下揃え*/
}



/*box1指定（角丸のボックス）
---------------------------------------------------------------------------*/
.box1 {
	padding: 10px 20px;	/*上下、左右へのボックス内の余白*/
	border-radius: 20px;	/*角丸のサイズ*/
}


/*box2指定（野原背景のボックス）
---------------------------------------------------------------------------*/
.box2 {
	padding: 10px 20px;	/*上下、左右へのボックス内の余白*/
	border-radius: 20px;	/*角丸のサイズ*/
	display:inline-block;		/*画像を横並びにする設定*/
	font-size: 80%;
}

/*box3指定（下の広告ひよこ用）
---------------------------------------------------------------------------*/
.box3 {
	padding: 10px 20px;	/*上下、左右へのボックス内の余白*/
	border-radius: 20px;	/*角丸のサイズ*/
	display:inline-block;		/*画像を横並びにする設定*/
	font-size: 90%;		/*文字サイズ*/
}

.box3 img {
	width: 50px;		/* 画像の大きさ */
}


/*----------------------------------------------------
  .count（あいさつうさぎ含むテーブル）
----------------------------------------------------*/
.count {
	table-layout: fixed;
	width: 100%;
}
.count th  { 
	width: 15%; 
	text-align: center; 
	display:inline-block;		/*画像を横並びにする設定*/
	}
.count td  { 
	width: 80%; 
	text-align: center;
	display:inline-block;		/*画像を横並びにする設定*/
}



/*----------------------------------------------------
  .sumaho（テーブル枠無しのスマホ対応）カウンター部分
----------------------------------------------------*/
.sumaho { margin: 0 -10px; }
.sumaho th,td{
	width: 100%;
	display: block;
}


/*----------------------------------------------------
  .sumaho2（テーブル枠無しのスマホ対応）更新情報部分
----------------------------------------------------*/

.sumaho2 th{
	width: 180px;
	background: #fff8dc;	/*背景色*/
	text-align: left;
}	
.sumaho2 th,
.sumaho2 td{
	width: 100%;
	display: block;
	.sumaho2 th,
	text-align: left;
	border-top: none;
	}


/*----------------------------------------------------
  .hiyoko（ひよこ広告テーブル）
----------------------------------------------------*/
.hiyoko {
	width: 100%;
	border: 0px solid #ffd700;		/*上の線の幅、線種、色*/
}

.hiyoko th  { 
	width: 55px; 
	display:inline-block;		/*画像を横並びにする設定*/
	text-align: center;
	border: 0px solid #ffd700;		/*上の線の幅、線種、色*/
}

.hiyoko td  {
	width: 50%;
	display:inline-block;		/*画像を横並びにする設定*/
	text-align: center;
	border: 0px solid #ffd700;		/*上の線の幅、線種、色*/
}



/*テーブル
---------------------------------------------------------------------------*/
th,td {
	width: 100%;
	display:inline-block;		/*画像を横並びにする設定*/
	text-align: center;
}


/*テーブル（ta1）
---------------------------------------------------------------------------*/
.ta1 th,td {
	width: 100%;
	display: block;
	text-align: left;
}

/*テーブル（ta2）
---------------------------------------------------------------------------*/
.ta2 caption {
	font-size: 1.0em;		/*文字サイズ。親要素の1.0倍。*/
}

.ta2 th,td {
	width: 100%;
	display: block;
	text-align: left;
}


.ta2 a{	border-bottom: 2px dashed #ffff00;	/*下線の幅・線種・色。*/

}

.ta2 a:hover {
	border: none;
}


/*テーブル（ta3：トリルのページ）
---------------------------------------------------------------------------*/
.ta3 th,td {
	width: 100%;
	display: block;
	text-align: center;
}


*----------------------------------------------------
  .sozai（素材別一覧表用）他項目用
----------------------------------------------------*/

  .sozai {
	width: 100%;
  }

 .sozai .thead {
	display: none;
  }

  .sozai  tr{
	width: 100%;
  }


 .sozai td {
	display: block;
	text-align: right;
	border-top: none;
	border-bottom: 1px solid #d33737;	/*テーブルの下線。幅、線種、色*/
 	width: 95%;
}
 
 .sozai td:first-child {
	background: #e9727e;
	color: #fff;
	font-weight: bold;
	text-align: center;
 }

 .sozai td:before {
	content: attr(data-label);
	float: left;
	font-weight: bold;
	margin-right: 10px;
 }
 
 .sozai td:last-child {
	text-align: left;
	border-bottom: none;	/*テーブルの下線。幅、線種、色*/
  }



/*ulタグ（メニューの列単位）*/
#footermenu ul {
	align-items: flex-start;		/*垂直揃えの指定。上に配置されるように。*/
}


}



/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){

/*ヘッダー（一番上の、ロゴやスライドショーが入っているブロック）
---------------------------------------------------------------------------*/
/*トップページのロゴ画像への追加指定*/
.home header #logo  {
	width: 30%;		/*画像の幅*/
	left: 10%;			/*ロゴやメニューが入っているブロックに対して、左からの配置場所の指定。*/
	top: 3px;			/*ロゴやメニューが入っているブロックに対して、上からの配置場所の指定。*/
}


/*コンテンツ（ヘッダーとフッター以外を囲むブロック）
---------------------------------------------------------------------------*/
#main {
	padding: 30px 3%;
}
/*コンテンツ内にあるh2(見出し)タグの指定*/
#main h2 {
	font-size: 25px;		/*文字サイズ*/
}
/*コンテンツ内にあるh3(見出し)タグの指定*/
#main h3 {
	font-size: 18px;		/*文字サイズ*/
}
/*コンテンツ内にあるp(段落)タグ設定*/
#main p {
	padding: 0px 10px 30px;	/*上、左右、下への余白*/
}


/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/
body.is-fixed-pagetop .nav-fix-pos-pagetop a {
	width: 50px;		/*ボタンの幅*/
	line-height: 50px;		/*ボタンの高さ*/
	background: rgba(0,0,0,0.3);	/*背景色。0,0,0は黒の事で0.3は色が30%出た状態。*/
}

/*ul.disc,olタグ
---------------------------------------------------------------------------*/
ul.disc {
	padding: 0 10px 20px 25px;
}
ol {
	padding: 0 10px 20px 25px;
}

/*その他
---------------------------------------------------------------------------*/
.big1 {font-size: 20px;}
.mini1 {font-size: 15px;}
.sh {display:block;}
.pc {display:none;}
.ws,.wl {width: 94%;}
.fl {float: none;}
.fr {float: none;}

}