/*ボデ、土台、アティクル */
/*********************************************************** 基本 */
*{
  margin:0;  padding:0;
 -webkit-font-smoothing: subpixel-antialiased;
}

html{
font-size: 16px; 
}

body {
 color:#333;
 font-size:62.5%;
 line-height:1.5;
 text-align: center;
 padding:0 5%;
 font-family: 'Avenir','Arial','Kiwi Maru','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
 background-color:#fff;
 background-image: url("bg.gif");
 background-repeat: repeat-x;
 }
 
 #dodai {
  font-size:160%;
 text-align: left;
 margin:-8px auto 10px;
 max-width: 1000px;
 background-color:#ffffff;
 border: solid #ddd;
 border-width: 0px 2px 2px;
 border-radius: 0px 0px 8px 8px;
 -moz-border-radius: 0px 0px 8px 8px;
 -webkit-border-radius: 0px 0px 8px 8px;
 }
 /*********************************************************** 共通 */
 
 
a:link
{
	color:#4682b4;
	text-decoration:underline;
}

a:hover
{
    color:#7AA7CB;
	text-decoration:none;
 	position:relative;top:1pt;left:1pt;
}

p
{
	margin:8px 0;
}
img
{
	max-width : 100% ;
	height : auto ;
	border:0;
	vertical-align:middle;
}
 
	/* 兼絵カテ */
h2 {
 	font-size:1.2rem;
 	color: #222;
 	font-family: 'Kaisei Opti', serif;
	width:auto; 
	margin: 16px auto 8px -16px; padding: 10px 20px;
    background-image:url(bg_h.png);
	border: solid 2px #222;
	border-radius: 30px;
}
	/* 見出し二番手 */
h3 {

 	font-size:1rem;
 	color: #222;
 	font-family: 'Kaisei Opti', serif;
	width:auto;
	margin: 16px auto 8px -16px; padding: 8px 15px;
    background-image:url(bg_h.png);
	border: solid 2px #222;
	border-radius: 30px;
}
	/* ドット絵表示用 */
 .px {
  -ms-interpolation-mode: nearest-neighbor;   /* IE8+ */
  image-rendering: -webkit-optimize-contrast; /* Safari (WebKit) */
  image-rendering: -moz-crisp-edges;          /* Firefox (Gecko) */
  image-rendering: -o-crisp-edges;            /* Opera 12.x */
  image-rendering: pixelated;                 /* Chrome 41+, Opera 29+ (CSS4) */
}
 
.preload {
display: none;
visibility: hidden;
} 

 
/*********************************************************** 上部 */
header {
 width:auto;
 }
#tope {
 width:auto ;
 height:140px;
 background-image:url(tope.png);
 background-position: 50% 20%;
  background-size: cover;
 text-align: right;
 transition: all 0.4s ease;
 -webkit-transition: all 0.4s ease-out;
 }
 
#logo {
 width: 21px;
 height: 100px;
 margin:16px  0px;
  transition: all 0.8s ease;
 -webkit-transition: all 0.4s ease-out;
 }
 
/*********************************************************** 内部 */
#article {
 width:auto;
 height:auto;
  margin: 0px 10% 32px;
 }

	/* ■トップえおきばカテゴリィ■ */
#top-eokiba {
 width:100%;
 margin:0 5%;
  background-color:#fff;
}


	/* ■■■■えおボタン　クラスまとめ前■■■■ */
.eobtn,.eobtnS {
    color: #111;
    text-decoration: none;
    font-weight: bold;
    text-align: center;
	border-radius: 2px;
    display:inline-block;
    width: 100px; height: 100px;
    transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease-out;
    background-repeat: no-repeat;
}

.eobtn:a, .eobtnS:a {
 	target="_new";
}
.eobtn:hover,.eobtnS:hover {
 	position:relative; top:1px;left:1px;
}
    
	/* hover判定用 初期状態＝極半透明 */
.eobtnbg,.eobtnbgS {
    width: 100px; height: 100px;
    line-height: 100px;
    display:inline-block;
    overflow:hidden;
    transition: all 0.4s ease-out;
    -webkit-transition: all 0.4s ease-out;
	opacity:0.01;
}
.eobtnbg:hover,.eobtnbgS:hover {
	opacity:0.9;
}
	/* hover後の文字用 */
.btnmoji {
 	font-size:1rem;
    color: #fff;
    margin:50% auto;
    background-color:#333;
    border-radius: 20%;
}

	/* Sサイズ用　約3文字まで */
.eobtnS {
    width: 50px; height: 50px;
    background-size: cover;
}
.eobtnbgS {
    width: 50px; height: 50px;
    line-height: 50px;
}

/*********************************************************** 下部 */
 footer {
 font-size:0.8rem;
 text-align: right;
 width:auto; height:32px;
 margin:auto;
 }

/*********************************************************** 低解像度版 */
@media screen and (max-width: 800px) {
body {
 font-size:60%;
 line-height:160%;
 background-image : none;
 background-color:#ddfaff;
 }
 
 h2 {
 	font-size:1rem;
}

 #dodai {
 min-width: 320px;
 }
 
 header {
 height:100px;
 }
 
 #tope {
 height: 100px;
 }
 
 #logo {
 width:21px; height:100px;
 margin:0px;
 }
 .eobtn { 
    width: 64px; height: 64px;
}
 	/* hover判定用 */
.eobtnbg {
    width: 64px; height: 64px;
    line-height: 64px;
    	opacity:0.01;
}
.eobtnbg:hover, {
	opacity:0.9;
}

.eobtnbgS {

}


.btnmoji {
 	font-size:0.8rem;
    color: #fff;
    margin:50% auto;
    background-color:#333;
    border-radius: 20%;
}