@charset "utf-8";

/* ＝＝＝＝＝＝＝＝＝＝＝　初期設定　＝＝＝＝＝＝＝＝＝＝＝ */
*{
	margin: 0px;
	padding: 0px;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	     -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
	        box-sizing: border-box;
	font-family: Verdana,"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",sans-serif;
/*	font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; */
/*	font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif; */
}


img{
 	max-width: 100%;
 	vertical-align: middle;
}


h1,h2,h3,p{
	max-height: 999999px;
}

/* ＝＝＝＝＝＝＝＝＝＝　基本設定　＝＝＝＝＝＝＝＝＝＝ */
body{
	width: 100%;
	-webkit-text-size-adjust: 100%;
	   -moz-text-size-adjust: none;
}

h1{
	font-size: 20px;
	font-weight: normal;
	margin-bottom: 15px;
	line-height: 1.2em;
	border-bottom: solid 1px gray;
}
h2{
	font-size: 18px;
	font-weight: normal;
	background: url(../img/mark-h2.png) no-repeat left;
	margin-bottom: 6px;
	padding-top: 0px;
	padding-left: 22px;
}
h3{
	font-size: 16px;
	font-weight: normal;
	margin-bottom: 15px;
	line-height: 1.2em;
/*	border-bottom: solid 1px gray;*/
}

a{
	color: royalblue;
	text-decoration: none;
}
a:hover {
	color: indianred;
	text-decoration: underline;
}

article{
	margin-bottom: 25px;
	color: #333;
}

section{
	margin-bottom: 25px;
	color: #333;
}

/* リセットCSSでリセットされたselectの矢印復活（IE,Edge以外） */
select{
	-webkit-appearance: menulist;
	   -moz-appearance: menulist;
}

/* リセットCSSでリセットされたselectの矢印復活（IE,Edge用） */
select::-ms-expand{
	display: block;
}

/* ＝＝＝＝＝＝＝＝＝＝　ヘッダー　＝＝＝＝＝＝＝＝＝＝ */
header{
/*    position: fixed; */
	width: 100%;
	padding: 0px;
	margin: 0px auto;
	color: silver;
	background-color: black;
}

/* ＝＝＝＝＝＝＝＝　ヘッダー　トップ　＝＝＝＝＝＝＝＝ */
#header-top{
	max-width: 1030px;
	padding: 0px 15px;
	margin: 0px auto;
}

/* ＝＝＝＝＝＝＝＝　ヘッダー　トップ　１行目　＝＝＝＝＝＝＝＝ */
#header-top-line1{
	width: 100%;
	display: flex;
	background-color: white;
	background-image: url("../img/bg-line-3px-black.png");
	background-position: center left;
	background-repeat: repeat-x;
}

#header-top-line1-logo{
	align-self: flex-end;
	padding: 10px 10px 10px 0px;
	margin-right: 15px;
	border-radius: 0px 6px 6px 0px;
	background-color: black;
}

/* ＝＝＝＝＝＝＝＝　ヘッダー　トップ　２行目　＝＝＝＝＝＝＝＝ */
#header-top-line2{
	width: 100%;
	display: flex;
	justify-content: flex-end;
	border-radius: 6px 0px 6px 6px;
	padding: 0px 10px 0px 0px;
	background-color: white;
}

#header-top-line2-search{
	width: 300px;
	min-height: 50px;
	align-self: flex-end;
	margin-left: 15px;
}

/* ＝＝＝　ヘッダートップ　Googleカスタム検索　＝＝＝ */
#header-top-line2-search .gsc-search-box .gsc-input {
	font-size: 14px;
	color: #333;
}

/* ＝＝＝＝＝＝＝＝　ヘッダー　グローバルナビ　＝＝＝＝＝＝＝＝ */
nav{
	max-width: 1030px;
	font-size: 14px;
	padding: 0px;
	margin: 0px auto;
}
/* タブレットサイズ以上 */
@media only screen and (min-width:651px) {
	nav{
		padding: 0px 15px;
	}
}

nav ul{
	width: 100%;
	list-style-type: none;
	display: none;
}
/* タブレットサイズ以上 */
@media only screen and (min-width:651px) {
	nav ul{
		margin: 0px;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}
}

nav ul li{
	width: 100%;
	line-height: 50px;
	border-top: solid 1px silver;
	background-image: url("../img/mark-link-arrow-silver.png");
	background-position: 100% center;
	background-repeat: no-repeat;
}
nav ul li:last-child{
	border-bottom: solid 1px silver;
}
/* タブレットサイズ以上 */
@media only screen and (min-width:651px) {
	nav ul li{
		width: 20%; /* ５等分 */
		line-height: 40px;
		border-top: none;
		background-image: none;
	}
	nav ul li:last-child{
		border-bottom: none;
	}
}

nav a{
	display: block;
	color: silver;
	font-weight: normal;
	padding-left: 15px;
	text-decoration: none;
}
/* タブレットサイズ以上 */
@media only screen and (min-width:651px) {
	nav a{
		text-align: center;
		padding-left: 0;
	}
}

nav a:hover{
	color: white;
	text-decoration: none;
	background-image: url("../img/mark-link-arrow-white.png");
	background-position: right center;
	background-repeat: no-repeat;
}
/* タブレットサイズ以上 */
@media only screen and (min-width:651px) {
	nav a:hover{
		background-image: none;
	}
}

#nav-sp-menu{
	width: 100%;
	height: 50px;
	padding: 0px 15px;
	cursor: pointer;
}
/* タブレットサイズ以上 */
@media only screen and (min-width:651px) {
	#nav-sp-menu{
		display: none;
	}
}

#nav-sp-menu-o{
	width: 100%;
	height: 100%;
	background-image: url("../img/icon-sp-menu-o-silver.png");
	background-position: left center;
	background-repeat: no-repeat;
}

#nav-sp-menu-o:hover{
	background-image: url("../img/icon-sp-menu-o-white.png");
}

#nav-sp-menu-x{
	width: 100%;
	height: 50px;
	background-image: url("../img/icon-sp-menu-x-silver.png");
	background-position: left center;
	background-repeat: no-repeat;
	display: none;
}

#nav-sp-menu-x:hover{
	background-image: url("../img/icon-sp-menu-x-white.png");
}

/* ＝＝＝＝＝＝＝＝＝　パンくずナビ　＝＝＝＝＝＝＝＝＝ */
ul#breadcrumb{
	width: 100%;
	font-size: 12px;
	list-style-type: none;
	margin: 0px 0px 10px 0px;
}

#breadcrumb li{
	display: inline;
}

#breadcrumb li:first-child::before{
	padding-right: 5px;
	content: url(../img/breadcrumb-home.png);
}

#breadcrumb li:not(:first-child){
	padding-left: 5px;
}

#breadcrumb li::after{
	content: url(../img/breadcrumb-arrow.gif);
	padding-left: 10px;
	color: gray;
}

#breadcrumb li a{
	text-decoration: none;
	color: gray;
}

#breadcrumb li a:hover{
	color: black;
}

/* ＝＝＝＝＝＝　コンテナ（メイン＋サイドバー）　＝＝＝＝ */
#container{
/*	max-width: 700px;*/
	width: 100%;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
/*	flex-direction: row-reverse;*/
	padding: 0px;
	margin: 0px auto;
	background-color: white;
}
/* 最大サイズ 1031+16（スクロールバー）=1047 */
@media only screen and (min-width:1047px) {
	#container{
		max-width: 1030px;
	}
}

/* ＝＝＝＝＝＝＝＝＝＝　メイン　＝＝＝＝＝＝＝＝＝＝ */
main{
	display: block; /* IE11対策 */
	width: 100%;
	font-size: 15px;
	line-height: 1.8em;
	margin: 0px;
	padding: 0px 15px;
}
/* 最大サイズ 1031+16（スクロールバー）=1047 */
@media only screen and (min-width:1047px) {
	main{
		width: 700px;
	}
}

main p{
	margin-bottom: 1.5em;
}

main ul{
	list-style-image: url("../img/list-mark-gray.png");
	margin: 0px 0px 0px 1.5em;
}

main ol{
	margin: 0px 0px 0px 1.5em;
}

/* ＝＝＝＝＝＝＝＝＝＝　サイドバー　＝＝＝＝＝＝＝＝＝＝ */
aside{
	width: 100%;
	font-size: 15px;
	line-height: 1.8em;
	margin: 0px;
	padding: 25px 15px 0px 15px;
}
/* 最大サイズ 1031+16（スクロールバー）=1047 */
@media only screen and (min-width:1047px) {
	aside{
		width: 330px;
	}
}

aside p{
	margin-bottom: 1.5em;
}

aside ul{
	list-style-image: url("../img/list-mark-gray.png");
	margin: 0px 0px 0px 1.5em;
}

/* ＝＝＝＝＝＝＝＝＝＝　フッター　＝＝＝＝＝＝＝＝＝＝ */
footer{
	width: 100%;
	padding: 0px 15px;
	margin: 0px auto;
	background-color: black;
}

/* ＝＝＝＝＝＝＝＝＝　フッター　ナビ　＝＝＝＝＝＝＝＝＝ */
footer ul{
	max-width: 1030px;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	font-size: 12px;
	list-style-type: none;
	padding: 10px 0px;
	margin: 0px auto;
}

footer ul li{
	width: 120px;
	text-align: left;
}

footer ul li a{
	display: block;
	color: silver;
	line-height: 30px;
}

footer ul li a:hover{
	color: white;
	text-decoration: none;
}

/* ＝＝＝＝＝＝＝＝＝　フッター　コピーライト　＝＝＝＝＝＝＝＝＝ */
#copyright{
	max-width: 1030px;
	color: silver;
	text-align: center;
	padding: 15px 0px;
	margin: 0px auto;
}
/* タブレットサイズ以上 */
@media only screen and (min-width:651px) {
	#copyright br{
		display: none;
	}
}

/* ＝＝＝＝＝＝＝＝＝＝　ページトップ戻るボタン　＝＝＝＝＝＝＝＝＝＝＝ */
#pagetop{
	position: fixed;
	right: 20px;
	bottom: 20px;
	cursor: pointer;
}

/* ＝＝＝＝＝＝＝＝＝＝　ページ移動ボタン　＝＝＝＝＝＝＝＝＝＝ */
#page-btn{
	display: flex;
	justify-content: space-between;
	background-color: white;
	background-image: url("../img/bg-line-1px-gray.png");
	background-position: center left;
	background-repeat: repeat-x;
}

#page-btn a{
	display: block;
	font-size: 14px;
	padding: 3px 10px;
	text-decoration: none;
	border: solid 1px gray;
	border-radius: 4px;
	background-color: white;
	color: gray;
}

#page-btn a:hover{
	text-decoration: none;
	background-color: gray;
	color: white;
}

/* ＝＝＝＝＝＝＝＝＝＝　グリッドシステム　＝＝＝＝＝＝＝＝＝＝ */
.row{
	display: flex;
	flex-wrap: wrap;
	margin: 0px -8px;
}

.sm-11-div, .sm-12-div, .sm-13-div, .sm-14-div, .sm-15-div, .sm-23-div, .sm-25-div, .sm-34-div, .sm-35-div{
	display: block;
	padding: 0px 8px 15px;
}
.sm-11-div{width: 100%;}
.sm-12-div{width:  50%;}
.sm-13-div{width:  33.33333333%;}
.sm-14-div{width:  25%;}
.sm-15-div{width:  20%;}
.sm-23-div{width:  66.66666666%;}
.sm-25-div{width:  40%;}
.sm-34-div{width:  75%;}
.sm-35-div{width:  60%;}
@media only screen and (min-width:651px) {
	.bg-11-div{width: 100%;}
	.bg-12-div{width:  50%;}
	.bg-13-div{width:  33.33333333%;}
	.bg-14-div{width:  25%;}
	.bg-15-div{width:  20%;}
	.bg-23-div{width:  66.66666666%;}
	.bg-25-div{width:  40%;}
	.bg-34-div{width:  75%;}
	.bg-35-div{width:  60%;}
}

/* 小画面－内余白ゼロ */
@media only screen and (max-width:651px) {
	.sm-nopad{
		padding: 0;
	}
}

/* 小画面－下の内余白あり */
@media only screen and (max-width:651px) {
	.sm-btm-pad{
		padding-bottom: 10px;
	}
}

/* ＝＝＝＝＝＝＝＝＝＝＝　googleアイコン　＝＝＝＝＝＝＝＝＝＝＝＝ */
.material-icons.common{
	vertical-align: middle;
}

/* ＝＝＝＝＝＝＝＝＝＝＝　枠　＝＝＝＝＝＝＝＝＝＝＝＝ */
/* mainコンテンツ枠 */
.frame-main-contents{
	padding: 15px;
	border-radius: 6px;
	border: solid 1px gray;
	background-color: whitesmoke;
}

/* main見出し枠 */
.frame-main-child{
	padding: 15px;
	border-radius: 6px;
	border: solid 1px gray;
	background-color: white;
}

/* mainＱ＆Ａ枠 */
.frame-main-qa{
	padding: 15px;
	border-radius: 6px;
	border: solid 1px gray;
	background-color: whitesmoke;
}

/* main楽譜枠 */
.frame-main-score{
	padding: 10px;
	border-radius: 6px;
	border: solid 1px gray;
	background-color: white;
}

/* main広告枠 */
.frame-main-ad{
	background-color: whitesmoke;
}

/* asideコンテンツ枠 */
.frame-aside-contents{
	padding: 15px;
	border-radius: 6px;
	border: solid 1px gray;
	background-color: whitesmoke;
}

/* asideメニュー枠 */
.frame-aside-menu{
	padding: 15px;
	border-radius: 6px;
	border: solid 1px gray;
	background-color: white;
}

/* aside広告枠 */
.frame-aside-ad{
	background-color: whitesmoke;
}

/* ＝＝＝＝＝＝＝＝＝＝　リンクリスト　＝＝＝＝＝＝＝＝＝＝ */
.link-list{
	list-style-image: none;
	list-style-type: none;
	margin: 0px 0px 15px 0px;
	background-color: white;
}
/* タブレットサイズ以上 */
@media only screen and (min-width:651px) {
	.link-list{
		margin: 0 0 0px 1.5em;
		list-style-type: disc;
	}
}

.link-list li{
	width: 100%;
	background-image: url("../img/mark-link-arrow-silver.png");
	background-position: 100% center;
	background-repeat: no-repeat;
	border: solid 1px gray;
	margin-bottom: -1px;
}
.link-list li:first-child{
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
}
.link-list li:last-child{
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
}
/* タブレットサイズ以上 */
@media only screen and (min-width:651px) {
	.link-list li{
		background-image: none;
		border: none;
		margin-bottom: 0px;
	}
}

.link-list a{
	display: block;
	line-height: 1.5em;
	padding-top: 12px;
	padding-bottom: 12px;
	padding-left: 15px;
	padding-right: 35px;
	color: gray;
}
/* タブレットサイズ以上 */
@media only screen and (min-width:651px) {
	.link-list a{
		display: inline;
		padding-left: 0px;
		color: royalblue;
	}
}

.link-list a:hover{
	text-decoration: none;
	background-image: url("../img/mark-link-arrow-white.png");
	background-position: 100% center;
	background-repeat: no-repeat;
	background-color: gray;
	color: white;
}
/* タブレットサイズ以上 */
@media only screen and (min-width:651px) {
	.link-list a:hover{
		background: none;
		text-decoration: underline;
		color: indianred;
	}
}

/* ＝＝＝＝＝＝＝＝＝＝　リンクボタン　＝＝＝＝＝＝＝＝＝＝ */
.link-btn{
	width: 150px;
	margin: 15px 0px 15px 0px;
	padding-left: 0px;
	border-radius: 4px;
	border: solid 1px gray;
	background-image: url("../img/mark-link-arrow-silver.png");
	background-position: 100% center;
	background-repeat: no-repeat;
	background-color: white;
}

.link-btn a{
	display: block;
	line-height: 1.5em;
	padding-top: 12px;
	padding-bottom: 12px;
	padding-left: 15px;
	color: gray;
}

.link-btn a:hover{
	text-decoration: none;
	background-image: url("../img/mark-link-arrow-white.png");
	background-position: 100% center;
	background-repeat: no-repeat;
	background-color: gray;
	color: white;
}

/* ＝＝＝＝＝＝＝＝＝＝　リスト　マーク無　＝＝＝＝＝＝＝＝＝＝ */
.list-none-mark{
	list-style-type: none;
	list-style-image: none;
}	

/* ＝＝＝＝＝＝＝＝＝＝　汎用クラス　＝＝＝＝＝＝＝＝＝＝ */
/* 画像の横幅をウインドウ幅に合わせる */
.width-full{
	width: 100%;
}

/* 画像の横幅をウインドウ幅に合わせたいが、原寸より大きくはしたくない */
.width-full-max{
	max-width: 100%;
}

/* マーカー */
.marker-pink{background:linear-gradient(rgba(254,254,152,0) 50%, #ffdeef 0%);}
.marker-blue{background:linear-gradient(rgba(204,229,255,0) 50%, #cce5ff 0%);}
.marker-yellow{background:linear-gradient(rgba(255,221,136,0) 50%, #ffdd88 0%);}

/* 文字サイズ */
.font-size-12{ font-size: 12px;}
.font-size-14{ font-size: 14px;}

/* テキスト位置 */
.text-right{text-align: right;}
.text-left{text-align: left;}

/* 文字色 */
.color-red{color: red; }
.color-white{color: white; }

/* 画像とテキストの位置 */
.vertical-align-bottom{ vertical-align: bottom; }
.vertical-align-baseline{ vertical-align: baseline; }

/* 表示しない */
.display-none{
	display: none;
}

/* スマホ、モバイル端末では表示しない */
@media only screen and (max-width:700px) {
	.display-none-max700{
		display: none;
	}
}

/* 背景色 */
.background-color-lightgray{
	background-color: lightgray;
}