/*- lom viewport-*/
.w50to100{width:50%;}
div.b50to100{width:50%;}
div.box45p{width:45%;}
div.box49p{width:49%;}
div.box99p{width:99%;}
div.box100p{width:100%;}
div.phonehidden {display: block;}
div.phonevisible{display: none;}
div.hbox250px{height:250px}
div.g2to1fr{display:grid;grid-template-columns:1fr 1fr;}



/* メニュー用チェックボックス非表示 */
.drawer_hidden {display: none;}

@media screen and (max-width:480px) {
.w50to100{width:100%;}
div.b50to100{width:100%;}
div.box45p{width:390px;}
div.box49p{width:390px;}
div.box98p{width:390px;}
div.box100p{width:390px;}
div.phonehidden {display: none;}
div.phonevisible{display: block;}
div.hbox250px{height:auto}
div.g2to1fr{display:grid;grid-template-columns:1fr;}
/*
html, body {
  width: 100%;
  margin: 0px;
  padding: 0px;
  letter-spacing: 0.08em;
  overflow: hidden;
}
*/
/*┤基本スタイルモバイル用上書き├──────────*/

#menu{
	width:100%;
	position:relative;
	height:70px;
	margin:0 auto;
}

div.mainframe{
	width: 100%;
	max-width:480px;

	text-align: center;
	background-color:White;
	border-width:0px;
	border-bottom: 0px dashed;
	border-style:solid;
	border-color:black;
	/*
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	*/
	margin: 0 auto;
	overflow: hidden;
	}
#lombody     {text-align:left;width: 100%; font-size: 13px; padding-top: 5px;padding-left: 0px;margin-top: 0;margin-right: auto;margin-bottom: 0;margin-left: auto;}
#topicpath{
	padding-top: 5px;margin-top: 5px;
	width: 100%;
	float:left;
	text-align: left;
}
.lomhistory         {text-align:left;width: 90%;height:200px;overflow: auto;font-size: 12px;border-width:1px;border-style:solid;border-color:black;padding-top: 5px;padding-left: 5px;margin-top: 0;margin-right: auto;margin-bottom: 0;margin-left: auto;}
	
	
	
body {
	margin: 0 auto;
	text-align : center;

	background-image: none;
	background-color: #000;
}
	
	
	
	
/*───────────────────────
・横メニューflotleftで並べているのを解除
・メニュー背景の読み込みをリセット
────────────────────────*/
/*┤TopMenus 上書き用├──────────*/
#lommenu ul {	   width:90%;}
#lommenu a       {float:none;}
#lommenu a span  {background:url("image/menusl.jpg") repeat right top;/*lにしてリピートに切り替え*/}
/*┤TopMenus 上書き用├──────────*/
#lommenu2 ul {	   width:90%;}
#lommenu2 a      {float:none;}
#lommenu2 a span {background:url("image/menusl2.jpg") repeat right top;}
/*┤TopMenus 上書き用├──────────*/
#lommenu3 ul {	   width:90%;}
#lommenu3 a      {float:none;}
#lommenu3 a span {background:url("image/menusl3.jpg") repeat right top;}
/*┤TopMenus 楽器　上書き用├──────────*/
#lommenu4 ul {	   width:90%;}
#lommenu4 a      {float:none;}
#lommenu4 a span {background:url("image/menusl4.jpg") repeat right top;}
/*┤TopMenus 上書き用├──────────*/
#lommenu5 ul {	   width:90%;}
#lommenu5 a      {float:none;}
#lommenu5 a span {background:url("image/menusl5.jpg") repeat right top;}
/*┤TopMenus 上書き用├──────────*/
#lommenu6 ul {	   width:90%;}
#lommenu6 a      {float:none;}
#lommenu6 a span {background:url("image/menusl6.jpg") repeat right top;}

/*┤ハンバーガーメニュー用├──────────*/
.header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  background: #fff;
  position: relative;
}
/* ハンバーガーアイコンの設置スペース */
.drawer_open {
  padding-top:20px;/*上部余白調整*/
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 20px;
  z-index: 100;/* 重なり順を一番上にする */
  cursor: pointer;
}

/* ハンバーガーメニューのアイコン */
.drawer_open span,
.drawer_open span:before,
.drawer_open span:after {
  content: '';
  display: block;
  height: 3px;
  width: 25px;
  border-radius: 3px;
  background: #333;
  transition: 0.5s;
  position: absolute;
}
.drawer_open span:before { bottom: 8px;}/* 三本線の一番上の棒の位置調整 */
.drawer_open span:after  { top: 8px;}   /* 三本線の一番下の棒の位置調整 */
#drawer_input:checked ~ .drawer_open span {  background: rgba(255, 255, 255, 0);}/* アイコンがクリックされたら真ん中の線を透明にする */
#drawer_input:checked ~ .drawer_open span::before { bottom: 0;  transform: rotate(45deg);}/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
#drawer_input:checked ~ .drawer_open span::after {  top: 0;  transform: rotate(-45deg);}
/* メニューのデザイン*/
.nav_content {
  width: 100%;
  height: 100%;
  position: fixed;
  bottom: 100%;
  left: 0%; /* メニューを画面の外に飛ばす */
  z-index: 99;
  background: rgb(110, 110, 110);
  transition: .5s;
  text-align: center;
  padding-top: 20px;
}
.nav_list { list-style: none;}/* メニュー黒ポチを消す */
.nav_item a {  color: #fff;  text-decoration: none;}
/* アイコンがクリックされたらメニューを表示 */
#drawer_input:checked ~ .nav_content {  bottom: 0;}/* メニューを画面に入れる */

} /* ←vpのENDスラ消しちゃダメ */