/*
Theme Name: タカキ楽器のテーマ
Template:twentyseventeen
*/


/* ここから追加分  */
.twentyseventeen-front-page .site-content-contain {
/*	background-color: rgb(255, 255, 204);*/ /*全体背景色*/
}
.page-one-column .panel-content .wrap {
	margin-top: 2px;/*記事とアイキャッチとの間隔*/
	margin-bottom: 2px;/*記事とフッターとの間隔*/
	border: 0px solid rgb(204, 204, 204);/*記事の枠線の太さと色*/
	background-color: #fff;/*記事の背景色*/
	padding: 0% 5%;/*記事周り余白[上下][左右]*/
}
/*画面幅30em以上*/
@media screen and (min-width: 30em) {
	.page-one-column .panel-content .wrap {
		max-width: 1000px;/*記事幅の最大値（初期740px）*/
		margin-top: 2px;/*記事とアイキャッチとの間隔*/
		margin-bottom: 2px;/*記事とフッターとの間隔*/
	}
}




/* 全固定ページでタイトル非表示 */
.page .entry-title {
   display: none;
}

/* 全体で使う見出しラベルのスタイル（背景薄いグリーン） */
#label-sq {
  display:inline-block;/* spanに使うには邪道らしい */
  margin: 0px 0px 0.3em 0px; /* 上、右、下、左 */
  padding: 3px 5px 0px 5px; /* 上、右、下、左 */
  border-radius:5px;
  font-size: 100%; /* 文字サイズを120% */
  color: #eee; /* 文字色*/
  vertical-align:middle;
  background-color: olivedrab;/*#89a157; */  /* 背景色（薄いグリーン） */  
/*  border-left: 10px solid darkgray;*/
  text-shadow: 1px 1px 2px #333;
}
#label-double {
  display:inline-block;/* spanに使うには邪道らしい */
  margin: 0px 0px 0.3em 10px; /* 上、右、下、左 */
  padding: 3px 5px 0px 5px; /* 上、右、下、左 */
  color: olivedrab; /* 文字色*/
  vertical-align:middle;
  border-left:double 3px olivedrab;
  border-bottom:dotted 2px lightgray;
}





/*テーブルのスタイル */
.myTable table {
	border-collapse: collapse;
}
.myTable td.t_top_left {
    border-top: #b3b3b3 4px solid;
	border-bottom: #e3e3e3 1px solid;
	background: lightgray;/*#edd;*/
	text-align: left;
	padding: 10px;
}
.myTable td.t_top_right {
	border-top: #9b5 4px solid;
	border-bottom: #e3e3e3 1px solid;
	padding: 10px;
	text-align: left;
}
.myTable td.td_left {
	border-bottom: #e3e3e3 1px solid;
	border-left: #e3e3e3 1px solid;
	text-align: left;
	background: lightgray;/*#edd;*/
	padding: 10px;
	font-weight: normal;
}
.myTable td.td_right {
	border-bottom: #e3e3e3 1px solid;
/*	border-right: #e3e3e3 1px solid;*/
	text-align: left;
	padding: 10px;
}
#myLinkBtn{
  border: 2px solid rgb(204, 204, 204);/*枠線の太さと色*/
  border-radius:5px;
  margin:0px;;
  padding:2px;
  font-size: small; /* 文字サイズ */
  color: DarkGray; /* 文字色*/
  vertical-align:middle;
}


/*トップページの新着一覧の枠線指定
/wp/wp-content/plugins/shortcodes-ultimate/templates/myList-loop.phpの中で参照している。
また、Shortcodes Ultimateが生成するメニューのショートコードでも使用している
*/
.topPageList{
	border: 2px solid rgb(204,204,204);
	padding:10px 20px;
	border-radius:10px;
	margin:0px 10px 10px 10px;
}
.topPageList li{
  list-style:none!important;/* リスト項目の先頭に点を出さないようにする */
	  	line-height:1.5em;
	    width: 100%;
		white-space: nowrap;
  		overflow: hidden;
  		text-overflow: ellipsis;
}

.topPageList ul{
  list-style:none!important;/* リスト項目の先頭に点を出さないようにする */
}
@media screen and (max-width:600px) { /*600px以下(スマホ用)*/
	.topPageList{
		border: 2px solid rgb(204,204,204);
		padding:0;
		border-radius:10px;
		margin:5px 0;
	}
	.topPageList li{
	  	list-style:none!important;/* リスト項目の先頭に点を出さないようにする */
	  	line-height:2em;
	    width: 100%;
		white-space: nowrap;
  		overflow: hidden;
  		text-overflow: ellipsis;

	}

	.topPageList ul{
	  list-style:none!important;/* リスト項目の先頭に点を出さないようにする */
	}
}

/*
トップページの一覧用枠のコンテナと中の枠
*/
.topPageGrid{
/*
  display: grid;

  grid-gap: 10px;
  grid-template-columns: 1fr 1fr;
*/
	column-count: 2;
	width: 100%;



}
.topListBoxesCont{
/*	width:50%;*/
/*	display:inline-flex!important;*/
	break-inside: avoid !important;
	page-break-inside: avoid;
	-webkit-column-break-inside: avoid;
}
.topListBox{
	width:100%;
	display:inline-block;


}
/* 枠線 */
.faceBookWaku{
	border: 1px solid olivedrab;
	padding:10px 0px;
	border-radius:10px;
	margin:10px 10px;
	break-inside: avoid !important;
	page-break-inside: avoid;
	-webkit-column-break-inside: avoid;
	width:405px;
}
/*facebookのコンテンツ用*/
.myFbContents{
}
@media screen and (max-width:600px) { /*600px以下(スマホ用)*/
	.faceBookWaku{
		margin-left:0;
		width:100%;
	}

	.myFbContents{
	    transform:none;
	    margin: -10px 0 0 -23px;
    }

}
@media screen and (max-width:420px) { /*420px以下(iphone6/7/8+plus)*/
	.faceBookWaku{
		margin-left:0;
		width:100%;
	}

	.myFbContents{
	    transform:none;
	    margin: -10px 0 0 0px;
    }

}
@media screen and (max-width:320px) { /*320px以下(iphone5)*/
	.faceBookWaku{
		margin-left:0;
		width:100%;
	}

	.myFbContents{
transform: scale(0.85,0.85);
    margin: -10px 0 0 -23px;    }

}

@media screen and (max-width: 48em) { 
	.topListBoxesCont{
		width:100%;
/*		display:block!important;*/
	}
	.topListBox{
		width:100%;
	}
	.topPageGrid{
		column-count: 1;
	}

}

/* FLOAT解除用 */
.clear {
    clear: both;
}

/*--------------------------------------------------------------
5.0 Typography
--------------------------------------------------------------*/
p {
	margin: 0 0 0.7em;
	padding: 0;
}


/*--------------------------------------------------------------
13.2 Front Page
https://mtac.jp/wordpress/sidebar2017front-page/
--------------------------------------------------------------*/
/* フロントページでもサイドバーを表示したい場合は以下を有効にする */
/*
.twentyseventeen-front-page .site-content {
	padding: 2.5em 0 1.5em;
}

@media screen and (min-width: 48em) { 
	.twentyseventeen-front-page.page-one-column #primary {
		float: left;
		width: 64%;//58%;
	}
	.twentyseventeen-front-page.page-one-column #secondary {
		float: right;
		padding-top: 0;
		width: 30%;//36%;
	}
	.twentyseventeen-front-page .site-content {
		padding: 5.5em 0 2.5em;
	}
}
*/


/*--------------------------------------------------------------
10.0 Links
--------------------------------------------------------------*/

a {
	color: #222;
	text-decoration: none;
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	color: #000;
	outline: 0;
}

/* Hover effects */

.entry-content a,
.entry-summary a,
.widget a,
.site-footer .widget-area a,
.posts-navigation a,
.widget_authors a strong {
	-webkit-box-shadow: inset 0 -1px 0 rgba(15, 15, 15, 1);
	box-shadow: none;/*inset 0 -1px 0 rgba(15, 15, 15, 1);*/  /*リンクの下線をなくすsato*/
	-webkit-transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;
	transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;
	transition: color 80ms ease-in, box-shadow 130ms ease-in-out;
	transition: color 80ms ease-in, box-shadow 130ms ease-in-out, -webkit-box-shadow 130ms ease-in-out;
}

.entry-title a,
.entry-meta a,
.page-links a,
.page-links a .page-number,
.entry-footer a,
.entry-footer .cat-links a,
.entry-footer .tags-links a,
.edit-link a,
.post-navigation a,
.logged-in-as a,
.comment-navigation a,
.comment-metadata a,
.comment-metadata a.comment-edit-link,
.comment-reply-link,
a .nav-title,
.pagination a,
.comments-pagination a,
.site-info a,
.widget .widget-title a,
.widget ul li a,
.site-footer .widget-area ul li a,
.site-footer .widget-area ul li a {
	-webkit-box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 1);
	box-shadow: none;/*inset 0 -1px 0 rgba(255, 255, 255, 1); */ /*リンクの下線をなくすsato*/
	text-decoration: none;
	-webkit-transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;
	transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;
	transition: color 80ms ease-in, box-shadow 130ms ease-in-out;
	transition: color 80ms ease-in, box-shadow 130ms ease-in-out, -webkit-box-shadow 130ms ease-in-out;
}

.entry-content a:focus,
.entry-content a:hover,
.entry-summary a:focus,
.entry-summary a:hover,
.widget a:focus,
.widget a:hover,
.site-footer .widget-area a:focus,
.site-footer .widget-area a:hover,
.posts-navigation a:focus,
.posts-navigation a:hover,
.comment-metadata a:focus,
.comment-metadata a:hover,
.comment-metadata a.comment-edit-link:focus,
.comment-metadata a.comment-edit-link:hover,
.comment-reply-link:focus,
.comment-reply-link:hover,
.widget_authors a:focus strong,
.widget_authors a:hover strong,
.entry-title a:focus,
.entry-title a:hover,
.entry-meta a:focus,
.entry-meta a:hover,
.page-links a:focus .page-number,
.page-links a:hover .page-number,
.entry-footer a:focus,
.entry-footer a:hover,
.entry-footer .cat-links a:focus,
.entry-footer .cat-links a:hover,
.entry-footer .tags-links a:focus,
.entry-footer .tags-links a:hover,
.post-navigation a:focus,
.post-navigation a:hover,
.pagination a:not(.prev):not(.next):focus,
.pagination a:not(.prev):not(.next):hover,
.comments-pagination a:not(.prev):not(.next):focus,
.comments-pagination a:not(.prev):not(.next):hover,
.logged-in-as a:focus,
.logged-in-as a:hover,
a:focus .nav-title,
a:hover .nav-title,
.edit-link a:focus,
.edit-link a:hover,
.site-info a:focus,
.site-info a:hover,
.widget .widget-title a:focus,
.widget .widget-title a:hover,
.widget ul li a:focus,
.widget ul li a:hover {
	color: white;
	background:#2F4F4F;/*#000;	*/  /* マウスが乗ったときのフォント色，背景色sato */
	
	-webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0), 0 3px 0 rgba(0, 0, 0, 1);
	box-shadow:none;/* inset 0 0 0 rgba(0, 0, 0, 0), 0 3px 0 rgba(0, 0, 0, 1); */  /*リンクの下線をなくすsato*/
}

/* Fixes linked images */
.entry-content a img,
.widget a img {
	-webkit-box-shadow: 0 0 0 8px #fff;
	box-shadow: 0 0 0 8px #fff;
}

.post-navigation a:focus .icon,
.post-navigation a:hover .icon {
	color: #222;
}

/* リンク用枠
https://saruwakakun.com/html-css/reference/box
 */
.linkImage1{
	float: left;
	margin-right:10px;
}


.linkbox1 {
	clear:both;
    padding: 3px 5px 3px 8px; /* 上、右、下、左 */
    margin: 2em 0;
    color: DarkGray;
    vertical-align:top!important;
    background: lightcyan;
    border-left: solid 10px lightblue;
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);/*影*/
	line-height:1.5em!important;
}
.linkbox1 p {
	vertical-align:top!important;
    font-size:small!important;
}

.linkbox2 {
	clear:both;
    padding: 0.5em 1em;
    margin: 2em 0;
    color: DarkGray;
    vertical-align:top!important;
    background: ivory;
    border-left: solid 10px #F4A460;/*SandyBrown*/
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);/*影*/
	line-height:1.5em!important;
}
.linkbox2 p {
	vertical-align:top!important;
    font-size:small!important;
}

.linkbox3 {
	clear:both;
    padding: 0px 0px 0px 1em;/* 上、右、下、左 */
    margin: 0px 0px 0px 0px;/* 上、右、下、左 */
/*    color: DarkGray; */  /*文字色*/
/*    background: blue; */
    border: solid 2px olivedrab;/*#89a157;//#84e2b4; */  /*線薄緑*/
/*    border-left: solid 10px #84e2b4; */ /*左の枠線を太く薄緑*/
/*    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32); */ /*影*/
	line-height:2px!important;/*改行幅(高さ)*/
	border-radius:3px;
	height:70px;
    vertical-align:top;
	
}
.linkbox3:hover {
    background: #cdc;
}

.linkbox3 a{
	margin:0px 0px 0px 0px;/* 上、右、下、左 */
	padding:0px 0px 0px 0px;/* 上、右、下、左 */
	
}
.linkbox3 a:hover {
    background: #cdc;
}


.linkbox3 span {
	margin:0em 0px 0px 0px;/* 上、右、下、左 */
	padding:0px 0px 0px 0px;/* 上、右、下、左 */
    font-size:large;
    font-weight:bold;
    letter-spacing:0.2em;
    color:#555;/*文字色濃い灰色*/
    vertical-align:top;
    height:90px;
}
.linkbox3 span:hover {
    background: #cdc;
}


.linkbox3 p {
	margin:1em 0px 0px 0px;/* 上、右、下、左 */
	padding:0em 0px 0em 0px;/* 上、右、下、左 */
    vertical-align:middle!important;
    font-size:1rem;
    font-weight:bold;
    line-height:1rem;
    letter-spacing:0.2rem!important;
    color:#555;/*文字色濃い灰色*/
}


.linkbox3 p:hover {
    background: #cdc;
}

.linkbox3 i{
	color:olivedrab;
}
.linkbox3 i:hover {
    background: #cdc;
}

.linkbox3 img{
/*
	position: relative;
	float: right;
	z-index:10;
*/
    vertical-align:middle;
	margin:0px 0px 0px 2px;/* 上、右、下、左 */
	padding:0px 0px 0px 0px;/* 上、右、下、左 */
/*    background:blue; */
}
.linkbox3 img:hover {
    background:red;
}
/* テーブルの表示を、端末の幅が狭いときは列を下にする
https://yellow-goose.com/table%E3%81%AEth%E3%82%84td%E3%82%92%E3%82%BD%E3%83%BC%E3%82%B9%E3%82%92%E5%A4%89%E3%81%88%E3%81%9A%E3%81%ABcss%E3%81%A0%E3%81%91%E3%81%A7%E7%B8%A6%E4%B8%A6%E3%81%B3%E3%81%AB%E3%81%99%E3%82%8B/
　PCなら２列
　スマホなら１列
 */
table{/* これはスマホ用ではない。ブラウザによっては枠が出るので対策 */
 	border:none;

}

@media screen and (max-width:600px) { /*600px以下(スマホ用)*/
	table, tbody, tr, th, td {
	display: block;
	max-width: 98%; /*スマホ画面ほぼ一杯に広がる感じ*/
	}
}
/* 
テーブルを1列表示にした時に左がそろわない現象に対する対処
テーマtwentyseventeenの設定を上書きする
表の最初の列：padding左 0→0.1rem／padding右 設定なし→0.1rem
表の最後の列：padding右 0→0.1rem／padding左 設定なし→0.1rem
 */
th:first-child,
td:first-child {
	padding-left: 0.1rem;
	padding-right: 0.1rem;
}

th:last-child,
td:last-child {
	padding-left: 0.1rem;
	padding-right: 0.1rem;
}

/*--------------------------------------------------------------
12.0 Navigation
--------------------------------------------------------------*/

.main-navigation ul ul a {
	line-height:1.8em;
}

.main-navigation li {
	line-height:2.5em;
}





/*■アイキャッチ画像付リスト形式で記事一覧を表示 【ここから】*/


/* listing posts page */
.home-box {
	position: relative;
}
.home-box .home-thumbnail {
	width: 33%;/*サムネイルの幅*/
}
.home-box .home-thumbnail img {
	box-shadow: 4px 4px 4px rgba(0,0,0,0.4);
}
.home-box .home-content {
	position: absolute;
	top: 0;
	margin-left: 35%;/*サムネイルの幅より大きくすること*/
}
.home-box .home-content .entry-header {
	margin: 0;
	padding: 0;
}
.home-box .home-content .entry-title {

	font-size: 1rem;
}
.home-box .home-excerpt {
	/*display: none;*/
			font-size: 1rem;
			line-height:1rem;
}
/*--------------------------------------------------------------
13.4 Posts
--------------------------------------------------------------*/

/* Blog landing, search, archives */

.blog .site-main > article,
.archive .site-main > article,
.search .site-main > article {
	padding-bottom: 0.2em; /* 2em */
}

/*--------------------------------------------------------------
19.0 Media Queries
--------------------------------------------------------------*/
/* Adjust positioning of edit shortcuts, override style in customize-preview.css */
@media screen and (min-width: 20em) {
	.home-box .home-content .entry-title {
		/* 一覧でタイトルを切り詰める設定 */
		font-size: 1rem;
	    width: 360px;
		white-space: nowrap;
  		overflow: hidden;
  		text-overflow: ellipsis;
	}
}

@media screen and (min-width: 30em) {

	/* listing posts page */
	.home-box .home-content .entry-title {
		/* 一覧でタイトルを切り詰める設定 */
		font-size: 1rem;
	    width: 360px;
		white-space: nowrap;
  		overflow: hidden;
  		text-overflow: ellipsis;
	}
	.home-box .home-excerpt {
		display: block;

		font-size: 0.75rem;
		line-height: 1.4em;
	}
}

@media screen and (min-width: 48em) {


	.wrap {
		max-width: 1200px;/*1000px;*/
		padding-left: 3em;
		padding-right: 3em;
	}

	.has-sidebar:not(.error404) #primary {
		float: left;
		width: 64%;/*58%;*/
	}

	.has-sidebar #secondary {
		float: right;
		padding-top: 0;
		width: 30%;/*36%;*/
	}

}

@media screen and (min-width: 48em) { /* two column start */

	/* Layout */

	.wrap {
		max-width: 1150px;/*1000px;*/
		padding-left: 1em;/*3em;*/
		padding-right:1em;/* 3em;*/
	}

	/* listing posts page */
	.home-box .home-content .entry-title {
		/* 一覧でタイトルを切り詰める設定 */
		font-size: 1rem;
	    width: 360px;
		white-space: nowrap;
  		overflow: hidden;
  		text-overflow: ellipsis;
	}
	.home-box .home-excerpt {
	/*	display: none;*/
	}
	
	/* Blog, archive, search */

	.blog .site-main > article,
	.archive .site-main > article,
	.search .site-main > article {
		padding-bottom: 0.4em; /* 4em */
	}
}

@media screen and ( min-width: 67em ) {

	/* listing posts page */
	.home-box .home-content .entry-title {
		/* 一覧でタイトルを切り詰める設定 */
		font-size: 1rem;
	    width: 360px;
		white-space: nowrap;
  		overflow: hidden;
  		text-overflow: ellipsis;
	}
	.home-box .home-excerpt {
		display: block;
		font-size: 1rem;
		line-height: 1.2em;
	}
}
@media screen and ( min-width: 79em ) {

}

@media screen and ( max-width: 48.875em ) and ( min-width: 48em ) {

}

/*■アイキャッチ画像付リスト形式で記事一覧を表示 【ここまで】*/



/* 枠線 */
.waku{
	border: 1px solid olivedrab;
	padding:10px 20px;
	border-radius:10px;
	margin:10px 10px;
}


/* 文字間隔を少し広げるために、元のスタイルを上書きする */
/* メニューにも影響するのでやめる */
/* Remove letter-spacing for all non-latin alphabets */
/*
html[lang="ar"] *,
html[lang="ary"] *,
html[lang="azb"] *,
html[lang="haz"] *,
html[lang="ps"] *,
html[lang^="zh-"] *,
html[lang="bg-BG"] *,
html[lang="ru-RU"] *,
html[lang="uk"] *,
html[lang="bn-BD"] *,
html[lang="hi-IN"] *,
html[lang="mr-IN"] *,
html[lang="el"] *,
html[lang="gu-IN"] *,
html[lang="he-IL"] *,
html[lang="ko-KR"] *,
html[lang="th"] * {
	letter-spacing: 0 !important;
}

html[lang="ja"] *
{
	letter-spacing: 0.07rem !important;
}
*/

/* 記事文章の文字間隔を広くするためのクラス */
.honbun{
letter-spacing: 0.06rem !important;
}
/*
【CSS】おしゃれなボックスデザイン（囲み枠）のサンプル30
https://saruwakakun.com/html-css/reference/box
*/

/*Box22,7ベース*/
.boxTopTitle{
    padding: 0.5em 1em;
    margin: 1.5em auto 0.5em auto;
    color: #474747;
    background: Gainsboro;/*背景色*/
    border-left: double 7px olivedrab;/*左線*/
    border-right: double 7px olivedrab;/*右線*/
    box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.33);
    width:100%;
    
}
.boxTopTitle p {
    margin: 0; 
    padding: 0;
    text-align:center;
    font-size:large;
    text-shadow: 3px 3px 2px #999999;
}
.boxTopTitle img {
    margin: 0; 
    padding: 0;
    text-align:left;
}
@media screen and (max-width:500px) { /*500px以下(スマホ用)*/
	.boxTopTitle{
		width:100%;
	}
	.boxTopTitle p {
	    font-size:medium;
	    text-shadow: 1px 1px 2px #999999;;
	}
}
/*注文フォームへボタン*/
.orderBtn
{
    display: inline-block;
    padding: 0.5em 1em;
    text-decoration: none;
    background: olivedrab;/*ボタン色*/
    text-shadow: 1px 1px 2px #333;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
    border-bottom: solid 3px #627295;
    border-radius: 3px;
    font-weight: bold;
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);
    margin-bottom:0.5em;
}

.orderBtn a{
    color: White;
}

.orderBtn:active{/*ボタンを押したとき*/
    -ms-transform: translateY(4px);
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
    border-bottom: none;
}


/* 商品説明欄に枠線 */
.item_description{
    border:solid 2px lightgray;
    padding: 0.3em;
}


/*
 コンタクトフォーム７
 */

/*ラジオボタンを縦ならびに */
span.wpcf7-list-item {
	display: block;
}

/* IMEモード */
form.wpcf7-form .email { ime-mode: inactive;}
form.wpcf7-form .zipcode { ime-mode: inactive;}
form.wpcf7-form .ime_on  { ime-mode: active;}







/* ヘッダのサイトタイトル部分 */
.site-title a{
/*	color:#0a7717!important;*/
/*	text-shadow: 1px 1px 1px white;*/
}
.site-description{
/*	color:#0a7717!important;*/
	font-weight:bold;
/*	text-shadow: 1px 1px 1px gray;*/
}

/* 音楽教室の表 */
.lesson{
	font-size: small!important; 
}
table.tableLesson{
	width: 100%;
	border-collapse: separate; 
	font-size: small!important; 
/*	color:red!important;  */

}
table.tableLesson tr{
	/*border-bottom: 1px solid #eee;*/
/*	border-bottom:dotted 1px dimgray!important;*/
}
table.tableLesson th{
	font-size: small!important;
	color:white!important; 
	text-align:center!important;;
	background:dimgray!important;
	
}
/* 
リンクにマウスが乗ったときの文字色を上書き

 */
.entry-content a:hover{
	color:white!important;
	background-color:DarkOliveGreen!important;
}

/*
AGP Font Awesome Collectionのフォントサイズ、色。
.faだけだとと文字も大きくなるのでi.fa
*/
i.fa{
	font-size:x-large!important;
	color:white;
}

/*グローバルメニューの色、文字色*/

/* グローバルナビメニューの背景色 */
.navigation-top,
.navigation-top .sub-menu,
.navigation-top .toggled-on .menu {
	background-color:#3f3530;
}

/* グローバルナビメニューの文字色 */
.navigation-top a,
.main-navigation .menu-toggle,
.main-navigation .dropdown-toggle,
.site-header .navigation-top .menu-scroll-down {
	color: #ffffff;
}
/* グローバルナビメニューの高さ調節 */
.main-navigation a {
	padding: 0 1.25em; 
}
@media screen and (max-width:600px) { /*600px以下(スマホ用)*/
	.menu{
		line-height: 2.5em;
	}
}
/* 
  画像を矩形（正方形）にトリミングする
*/
.squareImg450 {
  width: 450px;
  height: 450px;
  object-fit: cover;
}

.squareImg300 {
  width: 300px;
  height: 300px;
  object-fit: cover;
}

.squareImg240 {
  width: 240px;
  height: 240px;
  object-fit: cover;
}

.squareImg150 {
  width: 150px;
  height: 150px;
  object-fit: cover;
  box-shadow:2px 2px 3px gray!important;
}

.eventInfoImgYoko {/* 4:3 */
  width: 300px;
  height: 225px;
  object-fit: cover;
  margin-top:3px;
  box-shadow:2px 2px 3px gray!important;
}

.eventInfoImgTate {/* 4:3 */
  width: 300px;
  height: 225px;
  object-fit: cover;
  object-position: 50% 0;
  margin-top:3px;
  box-shadow:2px 2px 3px gray!important;
}


/*
	新品、新古、中古で背景の色を変える
*/
.productState_new{
	display:inline-block;
	 margin:0 0 2px 0!important;
     width:6em;
     text-align:center;
     background-color:olivedrab;
     color:white;
}
.productState_semi_new{
	display:inline-block;
	 margin:0 0 2px 0!important;
     width:6em;
     text-align:center;
     background-color:lightgray;
}
.productState_used{
	display:inline-block;
	 margin:0 0 2px 0!important;
     width:6em;
     text-align:center;
     background-color:pink;
}

/*
	在庫あり、商談中、完売で背景の色を変える
*/

.salesState_in_stock{
	display:inline-block;
	 margin:0!important;
     width:6em;
     text-align:center;
     background-color:olivedrab;
     color:white;
}
.salesState_during_negotiations{
	display:inline-block;
	 margin:0!important;
     width:6em;
     text-align:center;
     background-color:Gold;
}
.salesState_sold_out{
	display:inline-block;
	 margin:0!important;
     width:6em;
     text-align:center;
     background-color:Red;
     color:white;
}
.salesState_backordered{
	display:inline-block;
	 margin:0!important;
     width:6em;
     text-align:center;
     background-color:blue;
     color:white;
}
.salesState_backordered{
	display:inline-block;
	 margin:0!important;
     width:6em;
     text-align:center;
     background-color:Chocolate;
     color:white;
}
.salesState_booking{
	display:inline-block;
	 margin:0!important;
     width:6em;
     text-align:center;
     background-color:SlateBlue;
     color:white;
}

/*
おすすめ商品のデータ欄
*/
.recomendItemData{
    border-left:double 3px olivedrab;
    border-bottom: dotted 2px lightgray;
    padding-left:0.7em;
    padding-bottom:0.7em;
    margin-top:1em;
}
/*
商品説明で使用するラベルつきの枠
*/

.wakuWithLabel {
    position: relative;
    margin: 2rem 0 3rem 0;
    padding: 0.5em 1em;
    border: solid 1px olivedrab;
    border-radius: 8px;
}
.wakuWithLabel .box-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    background: white;
    color: olivedrab;
}
.wakuWithLabel p {
    margin: 0; 
    padding: 0;
}

/*
おすすめ商品一覧をタイル表示するためのスタイル(おすすめ商品一覧とTopページで使用)
*/
.recomendsGrid {

  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.recomendsGridItem {
	float: left;
  font-size:small;
  text-align:left;
  margin-right:0.3em;
  margin-bottom:0.7em;
  background: white;
  border-left:dotted 1px olivedrab;
  border-bottom:groove 2px olivedrab;
  padding-left:0.3em;
  padding-bottom:0.3em;
  text-align:left;
  width:160px;
}
.recomendsGridItem p{
    margin-bottom:0!important;
}
.recomendsGridItem a:hover{
	background-color: transparent!important;
}
.recomendsGridItem img:hover{
	opacity: 0.5;
}
@media screen and (max-width:600px) { /*600px以下(スマホ用)*/
	.recomendsGrid{
	    grid-template-columns: repeat(auto-fit, minmax(48%, 1fr));
	}
	.recomendsGridItem{
		width: 100%;
	}
}
/*
おすすめ商品詳細写真をタイル表示するためのスタイル
*/
.recomendsPicGrid {
  display: grid;
  grid-gap: 4px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 0fr));
}
.recomendsPicGridItem {
	float: left;
  font-size:small;
  text-align:left;
  background: white;
  /*
  border-left:dotted 1px olivedrab;
  border-bottom:groove 2px olivedrab;
  */
  text-align:left;
  width:300px;
}

/*
イベント情報一覧をタイル表示するためのスタイル
*/
.eventInfoGrid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.eventInfoGridItem {
  font-size:small;
  text-align:left;
  margin-right:0.3em;
  margin-bottom:1em;
  background: white;
  border-left:dotted 1px olivedrab;
  border-bottom:dotted 1px olivedrab;
  padding-left:0.3em;
  padding-bottom:0.3em;
  text-align:left;
  width:300px;
}
.eventInfoGridItem p{
    margin-bottom:0!important;
}

/*
音楽教室情報一覧をタイル表示するためのスタイル
*/
.lessonInfoGrid {
  display: grid;
  grid-gap: 15px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.lessonInfoGridItem {
  font-size:small;
  text-align:left;
  margin-right:0.3em;
  margin-bottom:1em;
  background: white;
  border-left:double 3px slategray;
/*  border-bottom:dotted 1px slategray;*/
  padding-left:0.3em;
  padding-bottom:0.3em;
  text-align:left;
  width:100%;
}
.lessonInfoGridItem p{
    margin-bottom:0!important;
}
/*貸しスタジオ・レッスン室のスタイル*/

.roomInfo{
}


/*
CSS で指定幅を超えた文字列を切り取り「…」を付加する
*/
p.overflowShorten {
  width: 100%;/*140px;*/
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
p.overflow280 {
  width: 100%;/*280px!important;*/
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*
サイドバーのリンク枠をSortCodeUltimateの見栄えにあわせる
*/
.mySCUwaku
{
    border-radius: 10px;
    background: #f0f0f0;
    font-size: 0.9em;
    position: relative;
	cursor: pointer;
	min-height: 20px;
	line-height: 20px;
	padding: 7px 7px 7px 10px;
	font-weight: bold;
	color:#333;
	margin-bottom: 1.5em;
	border:solid 1px #ccc;
}
/*
  イベント情報で「開催中」のリボン表示をするためのスタイル
*/

.ribbon_box3{
    display: block;
    position: relative;
    margin: 0px auto;
    padding: 0px 0;
    /*width: 300px;*/
    /*height: 150px;*/
    background: #f1f1f1;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.14);
    box-sizing: border-box;
}

.ribbon_area {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 89px;
    height: 91px;
    overflow: hidden;
  }

.ribbon15 {
    display: inline-block;
    position: absolute;
    padding: 7px 0;
    left: -23px;
    top: 22px;
    width: 160px;
    text-align: center;
    font-size: 18px;
    line-height: 16px;
    background: linear-gradient(to right, orangered 0%,tomato 100%);
    color: #fff;
    text-shadow: 0 2px 2px #56a1f3;
    letter-spacing: 0.05em;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.ribbon15:before,.ribbon15:after{
    position: absolute;
    content: "";
    border-top: 4px solid #3672b6;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    bottom: -4px;
}

.ribbon15:before{
    left: 14px;
}

.ribbon15:after{
   right: 18px;
}
/*
おすすめ商品管理の送信ボタン(HTMLのinput要素)
*/
.submitBtnA{
	width: 10em!important;
	height:2em!important;
	background-color: lightgray!important;
	vertical-align: middle!important;
	/*color: orange;*/
	font-weight: normal!important;
	letter-spacing: 0.1em!important;
	margin-right:1em!important;
	border:solid 1px black!important;;
}

/*facebookの要素(プラグインの出力)*/
.cff-author{
	display: none;
}
.cff-expand{
	display: none!important;
}
#cff .cff-item{
 padding-bottom:0;
 }



/*
Social nav
*/
.social-navigation a[href*="behance.net"] { background-color: #1769ff; }
.social-navigation a[href*="codepen.io"] { background-color: #000000; }
.social-navigation a[href*="deviantart.com"] { background-color: #05cc47; }
.social-navigation a[href*="digg.com"] { background-color: #005f93; }
.social-navigation a[href*="dribbble.com"] { background-color: #f46899; }
.social-navigation a[href*="dropbox.com"] { background-color: #007ee5; }
.social-navigation a[href*="facebook.com"] { background-color: #3b5998; }
.social-navigation a[href*="flickr.com"] { background-color: #ff0084; }
.social-navigation a[href*="foursquare.com"] { background-color: #0072b1; }
.social-navigation a[href*="plus.google.com"] { background-color: #dd4b39; }
.social-navigation a[href*="github.com"] { background-color: #000000; }
.social-navigation a[href*="instagram.com"] { background-color: #d93175; }
.social-navigation a[href*="linkedin.com"] { background-color: #0077B5; }
.social-navigation a[href*="mailto:"] { background-color: #000000; }
.social-navigation a[href*="medium.com"] { background-color: #000000; }
.social-navigation a[href*="pinterest.com"] { background-color: #bd081c; }
.social-navigation a[href*="getpocket.com"] { background-color: #ee4256; }
.social-navigation a[href*="reddit.com"] { background-color: #ff4500; }
.social-navigation a[href*="skype.com"] { background-color: #00aff0; }
.social-navigation a[href*="skype:"] { background-color: #00aff0; }
.social-navigation a[href*="slideshare.net"] { background-color: #0673b2; }
.social-navigation a[href*="snapchat.com"] { background-color: #fffc00; }
.social-navigation a[href*="soundcloud.com"] { background-color: #ff5419; }
.social-navigation a[href*="spotify.com"] { background-color: #00e461; }
.social-navigation a[href*="stumbleupon.com"] { background-color: #eb4823; }
.social-navigation a[href*="tumblr.com"] { background-color: #35465c; }
.social-navigation a[href*="twitch.tv"] { background-color: #6441a4; }
.social-navigation a[href*="twitter.com"] { background-color: #55acee; }
.social-navigation a[href*="vimeo.com"] { background-color: #aad450; }
.social-navigation a[href*="vine.co"] { background-color: #00bf8f; }
.social-navigation a[href*="vk.com"] { background-color: #45668e; }
.social-navigation a[href*="wordpress.org"] { background-color: #464646; }
.social-navigation a[href*="wordpress.com"] { background-color: #21759b; }
.social-navigation a[href*="yelp.com"] { background-color: #d32323; }
.social-navigation a[href*="youtube.com"] { background-color: #cd201f; }


.bottomMenu{
	width:100%;
	background: Gainsboro;
	display: inline-block;
}
.bottomMenu a{
	color:dimgray;
	width:100%;
	height:100%;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}
.bottomMenu li{
	text-align:center;
	line-height:2.2em;
	padding:0.2em 0;
	margin:0 0.2em;
	font-weight:bold;
	border-bottom: 4px double olivedrab;
	list-style-type: none;
	position: relative;
	height: 3rem;
}
.bottomMenu ul{
	margin-bottom: 0.5em;
}


.su-spoiler {
    margin-bottom: 0.5em;
}
#menu-btns {
text-align:center!important;
}
#menu-btns ul{
	list-style: none;
}
#menu-btns li{
	list-style-type: none;
	  margin: 0.3em 0.1em; 
	float:left;
}

#linkbox5 {
  display:inline;
  padding: 0.1em 0.5em;
  border:solid 2px olivedrab;
  border-radius:3px;
  font-size: 120%;
  color: olivedrab; /* 文字色*/
  vertical-align:middle;
  letter-spacing: 0.07em !important;

}
#linkbox5 a{
  color: olivedrab!important; /* 文字色*/
}
#linkbox5:hover {
	color: white;		/* マウスオーバーした時に色を変える */
  	background-color: olivedrab;  /* 背景色（薄いグリーン） */  
	
}
/*汎用、箱にシャドウをつける*/
.box_shadow1{
	box-shadow: 5px 5px 8px!important;
}

.desc_maintenance{
	margin:0.5rem auto 3rem 2rem;
}
.desc_maintenance img{
	/*box-shadow: 0 0 10px black;*/
	width: 350px;
}
/* 投稿で<br>が自動挿入されるとレイアウトが崩れるので<div></div>内でbrを無効化する */
.ignoreBR{
	/*line-height:0;*/
}

.ignoreBR br{
    display:none;
}
/* XOイベントカレンダーの見栄えの設定 */
.widget_xo_event_calendar{
    background: #eee;
    padding: 5px;
    /* border: solid 1px gray; */
    box-shadow: 2px 2px 3px grey;
    margin-bottom:1rem;
}
.widget_xo_event_calendar h2{
    text-align: center;
    font-size: 1rem;
    font-weight: normal!important;
    margin-bottom: 0;
    background-color: #bdf0bd;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
}

/* Googleクロームで見た時だけカレンダーが縦に伸びる現象への対策 */
.xo-event-calendar table.xo-month .month-dayname td div {
	height:auto;
}
/*イベント本文用グリッド（左右に分割）*/
.eventSingleGrid {
  display: table;
  width: 100%;
}
.eventSingleGridChildLeft{
  display: table-cell;
  width:70%;
}
.eventSingleGridChildRight{
  display: table-cell;
  width: 30%;
  vertical-align: top;
  padding-left:1rem;
}

@media screen and (max-width: 1000px){
  .eventSingleGrid {
	display:inline;
  }
	.eventSingleGridChildLeft{
	  display: inline;
	  width:100%;
	}
	.eventSingleGridChildRight{
	  display: inline;
	  width: 100%;
	}
}
/* -----------CSSによる動きのあるボタン------------- */

.button-3{
	width:20rem;
	height:3rem;
/*
	border-top   :1px solid olivedrab;
	border-right :2px solid olivedrab;
*/
	border-bottom:4px double olivedrab;
/*
	border-left  :1px solid olivedrab;
*/
/*	float:left;*/			/* 親のDIVでGrid表示してる時は不要 */
    display: inline-block;	/* 親のDIVでGrid表示してる時は必要 */
	cursor:pointer;
	position:relative;
	box-sizing:border-box;
	overflow:hidden;
	margin:0 auto;
	background: Gainsboro;
}
/*
.button-3 p{
	text-align: center;
    margin: 2rem auto auto 2rem!important;
    line-height: 0;
}
*/
.button-3 a{
/*	font-family:arial;*/
/*	font-size:16px;*/
	text-align: center;
	color:gray;
	font-weight:bold;
	text-decoration:none;
	line-height:3rem;
	transition:all .5s ease;
	z-index:2;
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}

.button-3 a:hover{
    color:LemonChiffon!important;
    text-shadow:2px 2px 2px black;
	background-color: transparent!important;
}
.button-3 a:focus{
    color:gray;
    background-color:transparent!important;
}




.eff-3{
  width:20rem;
  height:3rem;
  bottom:-3rem;
  background:gray;/* 塗りつぶす色 */
  position:absolute;
  transition:all .5s ease;
  z-index:1;
}
.button-3:hover .eff-3{
  bottom:0;
}
/*
.button-3:hover a{
  color:#fff;
}
*/

/* メニューアイテムにマウスが重なった時の見栄え */
.su-spoiler-content a{
    display:inline-block;
    width:100%;
    padding-left:0.5rem;
}
.su-spoiler-content a:hover, a:focus{
    background:#ccc!important;
    text-shadow:2px 2px 2px black;
}