@charset "utf-8";

body {
#    background-image: url('https://www.m-sugaya.jp/gif/arashi_color_02.gif')

#    background-image: url('https://www.m-sugaya.jp/gif/barashi-trans-blue.gif')

	background-color: #fd9;
}

/* ヘッダー */

.top_menu {
	display:none;
}

.header {
#    background-color:white;
#    background-color:rgba(#fff,0.5,0.5,0.5);
    padding:5px;
    width:98%;
    margin-bottom:10px;
    border-radius: 10px;
#    background-image: url('https://www.m-sugaya.jp/gif/barashi-trans-blue.gif')
}

.header_img{
	width:64px;
	height:64px;
#	position:relative;
	margin-left:5px;
}

.web_title{
	width:240px;
#	position:relative;
#	top:5px;
#	left:30px;
}

.web_explanation {
}

div.web_explanation {
	border:1px orange solid;
	background-color: #ffffff;
	font-size:medium;
	width: 75%;
	border-radius: 10px;
	margin:5px;
}

#    background-image: url('https://www.m-sugaya.jp/gif/barashi-trans-blue.gif')

}

.menu {
	align:center;
}

.ebook {
	height:96px;
#	margin:5px;
#	border:1px solid navy;
}

.ebook_del {
	height:96px;
#	margin:5px;
#	border:1px solid navy;
}

.ebook_del_del {
	height:96px;
#	margin:5px;
#	border:1px solid navy;
}


.ebook_02 {
	width:90px;
	height:135px;
	margin:5px;
	border:1px solid navy;
}



/* タイトル文字飾り */

.shadow{
#  display     : inline-block;
  font-size   : 1.2em;
  font-weight : bold;
  font-family:'Yu Gothic','YuGothic';
  color       : #000000;
  text-align: center;
  text-shadow:  2px  2px 10px #fff ,
               -2px  2px 10px #fff ,
                2px -2px 10px #fff ,
               -2px -2px 10px #fff;
}

/* イベントタイトル */
.event {
  background-color: #aa4422;
  color:white;
  font-size:1.4em;
  font-weight:bold;
  padding:5px;
  margin:0px;
  text-align: left;
}

/* イベント本文 */
.article {
  padding: 1em;
  font-size: 1em;
  text-align: left;
  border 1px orange solid;
  border: 1px solid #882222;
  background-color: #fff;
}

.img {
   margin:5px;
   border: 1px solid black;
   float:right;
}

/* pc　768px以上 */
.wrap{
  /* サイドメニューとバナーエリアの基点に設定 */
  position: relative;
  width: 1000px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 30px;
  background-color: #fda;
  border-radius:15px;

}

/* メインカラム */
.main{
#  width: 700px;
  width: 72%;
  /* サンプル用に高さを指定 */
#  height: 300px;
  margin-left: 240px;
  padding:10px;
#  background-color: #ffe;
  border 1px orange solid;
  border-radius: 10px;

}

/* サイドメニュー */
.side-menu{
  /* 左端に設置 */
  position: absolute;
#  position: relative;
  top: 0px;
  left: 0px;
  width: 210px;
#  border-top: 1px solid #333;
}

.side-menu li a{
  display: block;
  height: 40px;
  line-height: 40px;
  text-decoration: none;
  color: #992222;
  list-style: none;
  padding-left:0;
  font-weight:bold;
  font-size:1.2em;
  list-style-position: outside;

  border-radius: 10px;
  border-top: 3px white solid;
  border-left: 3px white solid;
  border-right: 3px orange solid;
  border-bottom: 3px orange solid;

  background-color: #fc2;
  margin: 3px;
}

.side-menu li a:hover {
  display: block;
  height: 40px;
  line-height: 40px;
  text-decoration: none;
  color: #ffffff;
  list-style: none;
  padding-left:0;
  font-weight:bold;
  font-size:1.2em;
  list-style-position: outside;

  border-radius: 10px;
  border-top: 3px white solid;
  border-left: 3px white solid;
  border-right: 3px orange solid;
  border-bottom: 3px orange solid;

  background-color: #f42;
  margin: 3px;
}



li {
  list-style: none;
  list-style-position: inside;
}

# li.list {
#  list-style-type:none;
# }


/* footer */
footer{
  height: 40px;
  line-height: 40px;
  background-color: #ffffff;
  text-align: center;
  color: navy;
}

/* タブレット　767px以下 */
@media only screen and (max-width:896px) {

.top_menu {
	font-weight:bold;
}


.wrap{
  /* サイドメニューとバナーエリアの基点に設定 */
  position: relative;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 30px;
#  background-color:#fff;
}

/* メインカラム */
.main{
#  width: 480px;
  width: 60%;
  /* サンプル用に高さを指定 */
#  height: 300px;
  margin-left: 240px;
  padding:10px;
  background-color: #fd0;
  border 1px orange solid;
  border-radius: 10px;
}


/* サイドメニュー */
.side-menu{
  /* 左端に設置 */
  position: absolute;
#  position: fixed;
  top: 0px;
  left: 0px;
  width: 210px;
#  border-top: 1px solid #333;
}
.side-menu li a{
  display: block;
  height: 40px;
  line-height: 40px;
  text-decoration: none;
  color: #992222;
  list-style: none;
  padding-left:0;
  font-weight:bold;
  font-size:1.2em;
  list-style-position: outside;

  border-radius: 10px;
  border-top: 3px white solid;
  border-left: 3px white solid;
  border-right: 3px orange solid;
  border-bottom: 3px orange solid;

  background-color: #f92;
  margin: 3px;
}

.side-menu li a:hover {
  display: block;
  height: 40px;
  line-height: 40px;
  text-decoration: none;
  color: #ffffff;
  list-style: none;
  padding-left:0;
  font-weight:bold;
  font-size:1.2em;
  list-style-position: outside;

  border-radius: 10px;
  border-top: 3px white solid;
  border-left: 3px white solid;
  border-right: 3px orange solid;
  border-bottom: 3px orange solid;

  background-color: #fff;
  margin: 3px;
}


li {
  list-style: none;
  list-style-position: inside;
}


/* footer */
footer{
  height: 40px;
  line-height: 40px;
  background-color: #fff;
  text-align: center;
  color: #fff;
}

.ebook_del {
	height:96px;
}

.ebook_del_del {
	display:none;

}


}

/* タブレット　480px以下 */
@media only screen and (max-width:480px) {

body {
#    background-image:none;
#    background-color: #fff;
}

.top_menu {
	font-weight:bold;
	color: red;
}


  .wrap{
    /* position: relative;を解除 */
    position: static;
    width: 96%;
  }

  /* メインカラム */
  .main{
    width: 96%;
    /* サンプル用に高さを指定 */
#    height: 200px;
    margin-left: 0px;
    margin-bottom: 30px;
    font-size:1.2em;
  }

  /* サイドメニュー */
  .side-menu{
    /* position: absolute;を解除 */
    position: static;
    text-align: center;
    width: 96%;
    margin-bottom: 30px;
    font-size:1.2em;
  }

.menu{
	display:none;
}

.ebook_del_del {
	display:none;

}


}