@charset "UTF-8";

body { margin:0; font-family: 'verdana', sans-serif; color: #666; background: white; }

a { color: #ccc; text-decoration: none; }
a:visited { color: #ccc; }
a:hover { color: rosybrown; }
a:active { color: rosybrown; }


header{
width: 100%;
background-color: rgba(121,192,110,0.4);
color: #566777;
text-align: center;
padding: 15px 0; 
border: 1px solid rgba(121,192,110,0.2); /* MySet */
}


.Nav { padding: 5px; } /* MySet */
/* ドロップダウンメニュー */
ul.navD {
   margin: 0px; /* メニューバー外側余白 */
   padding: 0px 0px 0px 10px; /* メニューバー内側余白 */
   background-color: white; /* バーの背景色 */
text-align: right; /*MySet */
}
ul.navD li {
   width: 120px;		 /* メニュー項目の横幅 */
   display: inline-block;	/* 横並び配置 */
   list-style-type: none;
   position: relative;	/* 重要 */
}
ul.navD a {
   background-color: rgba(121,192,110,0.4); 
   color: #566777;
   line-height: 30px;
   text-align: center;
   text-decoration: none;
   display: block;
border: 1px solid rgba(121,192,110,0.2); /* MySet */
margin-bottom: 3px; /* MySet */
font-size: 85% /* MySet */
}
ul.navD a:hover {
   background-color: rgba(121,192,110,0.6);
   color: white;
}
   /* サブメニュー */
ul.navD li:hover ul {
   display: block;
}
ul.navD ul {
   margin: 0px;
   padding: 0px; 
   display: none; /* 重要（非表示にしておく） */
   position: absolute; /* 重要 */
}
ul.navD ul li {
   width: 120px; /* サブメニュー1項目の横幅 */
}
ul.navD ul li a {
   line-height: 25px; /* サブメニュー1項目の高さ */
   text-align: center;
   padding-left: 5px;
font-size: 85%;
}
ul.navD ul li a:hover {
background-color: rgba(121,192,110,0.6);
color: white;
opacity:1;
}



.container { padding: 20px; text-align: center; font-size: 90%; }
.content img { padding: 2px;
height: 120px; width: auto; }



.flexwrap{
display: flex;
flex-wrap: wrap;
justify-content: center;
text-align: left;
}

.Box1 { padding: 0.5em; text-align: left; }



.inlineblock {
    display:  inline-block;     /* インラインブロック要素 */
    width: auto;               /* 幅指定 */
    padding:  10px;             /* 余白指定 */
    vertical-align:  top;    /* 要素を上揃え */
}

.inlineblockM {
    display:  inline-block;     /* インラインブロック要素 */
    width: auto;               /* 幅指定 */
   padding: 10px;             /* 余白指定 */
    vertical-align:  middle;    /* 要素を上下中央揃え */
}



.Comtop img { width: 280px; height: auto; }
.Comthumb { font-size: 80%; padding: 4px; color: #ddd; }
.ThumbA { line-height: 1.5em; }
.ThumbA img { height: 10px; width: auto; filter: contrast(5%);}
.ThumbA img:hover { filter: contrast(75%); }
.ThumbB img { width: 10px; height: auto; filter: contrast(5%); }
.ThumbB img:hover { filter: contrast(75%); }

.MojiX { font-size: 85%; }
.MojiY {font-size: 80%; }
.MiniMoji { font-size: 75%; padding: 4px; color: #ddd; }
.Col1 { color: #333; }
.Col2 { color: #999; }
.OpaX { opacity: 0.5; }

hr { height: 0; margin: 0; padding: 0; border: 0; }
hr { height: 1px;
background-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(#eee), to(transparent));
background-image: linear-gradient(to right, transparent, #eee, transparent);
 margin: 2em 1em;}


a.Btn01 {
  display: inline-block;
  text-align: center;
  min-width: 100px;
  background-color: slategrey;
  font-size: 15px;
  color: #ccc;
  text-decoration: none;
  padding: 10px 20px ;
  border: 1px solid slategrey;
}

a.Btn02 {
  display: inline-block;
  text-align: center;
  min-width: 100px;
  background-color: lightsteelblue;
  font-size: 15px;
  color: #efefef;
  text-decoration: none;
  padding: 10px 20px ;
  border: 1px solid lightsteelblue;
}

a.Btn_LSB {
  display: inline-block;
  padding: 0.3em 1em;
  text-decoration: none;
  color: lightsteelblue;
  border: solid 2px lightsteelblue;
  border-radius: 3px;
  transition: .4s;
}
a.Btn_LSB:hover,active {
  background: lightsteelblue;
  color: white;
}



@media (max-width: 1000px) {
     .wrapper, .content {
          float: none;
          margin: 0;
          width: auto;
     }
}




/* MySet -select etc- */
.selecX {
	overflow: hidden;
width: 40%;  min-width: 300px;
	margin: 2em auto;
	text-align: center;
}
.selecX select {
	width: 100%;
font-size: 0.9em;
	padding-right: 1em;
	cursor: pointer;
	text-indent: 0.01px;
	text-overflow: ellipsis;
	border: none;
	outline: none;
	background: transparent;
	background-image: none;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}
.selecX select::-ms-expand {
    display: none;
}
.selecX.mineselec {
	position: relative;
	border-radius: 2px;
border-radius: 50px;
background: lightsteelblue;
}
.selecX.mineselec::before {
	position: absolute;
	top: 0.8em;
	right: 0.8em;
	width: 0;
	height: 0;
	padding: 0;
	content: '';
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 6px solid white;
	pointer-events: none;
}
.selecX.mineselec select {
	padding: 8px 38px 8px 8px;
	color: white;
}