@charset "UTF-8";

body,html {
	height: 100%;
	width: 100%;
}
body {
	color: #666666;	/*全般の文字色*/
	margin: 0px;
	padding: 0px;
	text-align: center;
	background-color: #fff;
	font: 12pt/1.7 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",Osaka,メイリオ,Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;	/*75%が文字サイズ。/2.4が行間。*/
}
h1,h2,h3,p,ul,li,dl,dt,dd{
	margin: 0px;
	padding: 0px;
}
ul{
	list-style-type: none;
}
img {
	border: none;
}
.fr {
	float: right;
}
.color1 {
	color: #63ba00;
}
.center{
	text-align: center;
}
span.bold-pink{
	font-weight: bold;
	color: #e66;
}
#contents ul.listmark {
	padding: 0.5em 20px 0em 30px;
	list-style: square;
}

.counter{
	display: none;
}


/*コンテナー
---------------------------------------------------------------------------*/
#container {
	text-align: left;
    width: 100%;
    position: relative;
    height: auto !important;
    height: 100%;
    min-height: 100%;
	/*background: url(https://www.tandess.com/music/files/bg.gif) repeat-x top;	/*背景壁紙（ヘッダーとヘッダー下の点線）*/
}


#topImg{
	text-align: center;
	background-color: #333;
	
}


/*全般のリンク設定
---------------------------------------------------------------------------*/
#contents a {
	color: #5555ee;
	text-decoration: none;
}
#contents a:hover {
	color: #da7777;	/*カーソルオーバー時の文字色*/
	position: relative;
	left: 1px;	/*オーバー時に左から1px移動する設定*/
	top: 1px;	/*オーバー時に上から1px移動する設定*/
}

/*トップ画像リンク固定用*/
#contents a.nohover:hover {
	position: relative;
	left: 0px;
	top: 0px;
}

#main h2 a{
	color: #777;
}


/*ヘッダー
---------------------------------------------------------------------------*/

#header {
	/*width: 1000px;*/
	min-width: 768px;
	width: 100%;
}

div#logo-lang-container{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	padding: 10px;
}

/*ヘッダーのロゴ位置設定*/
div#logo{
	display: flex;
	align-items: center;
}
	div#logo img{
		width: 250px;
	}

div#lang{
	display: flex;
	align-items: center;
}

div#lang > ul > li{
	position: relative;
}

div#lang > ul > li:hover > ul{
	display: block;
	z-index: 1000;
}

div#lang > ul > li > ul{
	position: absolute;
	top: 30px;
	right: 10px;
	border: solid 1px #999;
	padding: 3px 10px;
	border-radius: 5px;
	background-color:#fff;
	display:none;
	width: 80px;

}

div#lang a{
	cursor: pointer;
	color: #55e;
}

div#lang a:hover{
	cursor: pointer;
	color: #da7777;
}


/*検索バー*/

div#search{
	display: inline-block;
	margin: 0;
	display: flex;
	align-items: center;
	width: 50%;
	max-width: 700px;

}

#sns-icon{
	position: fixed;
	left: 0;
	bottom: 0;
}
#sns-icon li{
	margin: 10px;
}
.search_container{
  box-sizing: border-box;
  position: relative;
  border: 1px solid #999;
  display: inline-block;
  padding: 3px 10px;
  border-radius: 30px;
  height: 3em;
  width: 100%;
  overflow: hidden;
}
.search_container input[type="text"]{
  border: none;
  width: 97%;
  font-size: 1.3em;
  height: 1.7em;
  color: #555;
  background: none;
}
.search_container input[type="text"]:focus {
  outline: 0;
}
.search_container input[type="submit"]{
  cursor: pointer;
  font-family: icomoon;
  font-size: 1.7em;
  border: none;
  background: none;
  color: #3879D9;
  position: absolute;
  width: 2.5em;
  height: 2.5em;
  right: 0;
  top: -10px;
  outline : none;
}

img.head_icon{
	width: 25px;
	margin: auto 10px;
}

/*右上メニュー
---------------------------------------------------------------------------*/
div#menu{
	clear: both;
	width: 100%;
	margin: 0 auto;
	text-align: center;
	background-image: url('./head.png');
	background-size: 100% 100%;

}
ul#menu {
	min-width: 768px;
	max-width: 1000px;
	margin: auto;
	text-align: center;
}
ul#menu li {
	float: left;
	width: 12.5%;
	margin: auto;
}

ul#menu img {
	width: 100%;
	vertical-align: bottom;
}

div#clear{
	clear: both;
}

/*コンテンツ
---------------------------------------------------------------------------*/
#contents {
	/*width: 1000px;*/
	min-width: 1000px;
	max-width: 1500px;
	width: 90%;
	margin-right: auto;
	margin-left: auto;
	padding: 10px 0px;
}



/*h2タグの装飾設定
---------------------------------------------------------------------------*/
#contents h1,h2,h3 {
	background: url(https://www.tandess.com/music/files/midashi_bg.png) left bottom no-repeat;	/*背景色、画像の設定*/
	font-size: 17pt;
	color: #777;	/*文字色を白色に*/
	padding-right: 10px;
	padding-left: 60px;
	padding-top: 5px;
	vertical-align: bottom;
	clear: both;
	margin: 40px auto 20px -10px;
}
#contents h1{
	font-size: 20pt;
	margin-top: 20px;
	padding-top: 10px;
}

#contents h3{
	font-size: 13pt;
	margin-top: 20px;
	padding-top: 10px;
}



/*パンくずリスト
---------------------------------------------------------------------------*/
#topic_path{
	margin-bottom: 5px;
	padding: 0 10px 2px 10px;
	/*width: 980px;*/
	min-width: 769px;
	width: 97%;
	height: 20px;
	background-color: #555;
	border-top: 1px solid #aaa;		/*枠線（上）の幅と線種と色*/
	border-right: 1px solid #000;	/*枠線（右）の幅と線種と色*/
	border-bottom: 1px solid #000;	/*枠線（下）の幅と線種と色*/
	border-left: 1px solid #aaa;		/*枠線（左）の幅と線種と色*/
	color: #fff;
	font-weight: bold;
	font-size: 11pt;
}

	#topic_path a {
		color: #7f7;
		text-decoration: none;
	}
	#topic_path a:hover {
		color: #7ef;	/*カーソルオーバー時の文字色*/
		position: relative;
		left: 1px;	/*オーバー時に左から1px移動する設定*/
		top: 1px;	/*オーバー時に上から1px移動する設定*/
	}

/*メインコンテンツ（中央ボックス）
---------------------------------------------------------------------------*/
#main {
	float: left;
	/*width: 790px;*/
	min-width: 760px;
	width: 76%;
}

#main p{
	margin: 5px 20px 50px 20px;
}

.content_pr{
	margin: 5px auto;
	text-align: center;
}

.shade{
	box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.5);
	border-radius: 5px;
}

/*サブコンテンツ（右ブロック）
---------------------------------------------------------------------------*/
#sub {
	float: right;
	/*width: 200px;*/
	min-width: 230px;
	width: 23%;
	text-align: center;
}
#sub h2 {
	margin-top: 0;
	margin-left: -20px;
	padding-top: 10px;
	text-align: center;	/*左ブロックのh2見出しだけセンタリングする設定。他と同様左よせがいいならこの１行削除する。*/
	font-size: 14pt;
}


/*右側メニュー
---------------------------------------------------------------------------*/
#sub .submenu li {
	text-align: center;	/*センタリング設定。左よせがいいならこの１行削除する。*/
	border-bottom: 1px solid #919589;	/*下線の幅と線種と色*/
	line-height: 1.7;
}

/*左側メニューリンク設定*/
#sub .submenu a {
	display: block;
	width: 100%;
	text-decoration: none;
}

/*左側メニューリンクのカーソルオーバー時設定*/
#sub .submenu a:hover {
	background: #f8f9f8;	/*オーバー時の文字色*/
	left: 0px;
	top: 0px;
}

/*アクセスカウンター表示用*/
#sub #access{
	line-height: 1;
	font-size: 9pt;
	padding: 5px 20%;
	text-align: right;
}

#sub #full-dist li{
	float: left;
	width: 12.5%;
	margin: 3%;
}

#sub #full-dist img{
	width: 100%;
}

#sub .container
{
	/*padding: 5px;*/
	padding: 0px;
}

#sub img.wide{
	width: 100%;
	margin: 0;
	padding: 0;
	clear: both;
}

#sub div.zeroline{
	line-height: 0px;
}

#sub meter{
	height: 50px;
	width: 100%;
}

/*フッター（最下部コピーライト部分）
---------------------------------------------------------------------------*/
#footer {
	clear: both;
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	font-size: 9pt;	/*文字サイズ*/
	color: #ddd;
	text-align: center;
	background-color: #222;
	padding: 10px 0px;
}

#footer a{
	color: #bbb;
	text-decoration: none;
}


#follow{
	width: 66%;
	margin: auto;
}


/* ページトップに戻るボタン
---------------------------------------------------------------------------*/
#page-top {
	position: fixed;
	bottom: 20px;
	right: 20px;
}
#page-top a {
	background: #666;
	text-decoration: none;
	color: #fff;
	width: 100px;
	padding: 30px 0;
	text-align: center;
	display: block;
	border-radius: 5px;
}
#page-top a:hover {
	text-decoration: none;
	background: #999;
}


/* メール登録ボタン
---------------------------------------------------------------------------*/

#mel-maga{
	background: #f68;
	position: fixed;  
	bottom: 200px;
	border-radius: 5px 5px 0 0;
	right: -150px;
	padding: 10px 10px;
	font-size: 12pt;
	-webkit-transform: rotate( -90deg );
	-moz-transform: rotate( -90deg );
	border: 1px solid #fff;
}
#mel-maga a{
	color: #fff;
	text-decoration: none;
}
#mel-maga a:hover {
	color: #fff;
	text-decoration: none;
}


.notice{
	font-size: 9pt;
	line-height: 10pt;
	color: #999;
}