@charset "UTF-8";


body { 
background-image:url(../bg3.gif); 
background-repeat:repeat-x; 
line-height:1.4;
color:333333;
font-family: 'メイリオ','Hiragino Kaku Gothic Pro', sans-serif;
font-size:14px;
text-align: center;
-webkit-text-size-adjust: 100%;


}

img {
max-width: 100%;
height: auto;
display:block;
}

a img {
border: none;
}



.current {
color: #ff9933;
}



/* サイト名 */

.site {
margin: 30px auto 0px;
padding: 0px;
}
.switch {
visibility: hidden;
}



/* ナビゲーション */
#menu {
width: 100%;
max-width: 850px;
margin: 0% 0% 0% 20%;
padding: 0px;

}

#menu li {
display: block;
width: 12.9%;
padding: 0px;
margin: 0px;
float: left;
}

#menu li a{
display: block;
padding: 12px 0px 10px;
background: #666666;
text-align: center;
text-decoration: none;
color: #ffffff;
}

#menu li a:hover {
background-color: #ff9933
}

#menu li a.active {
background-color: #ff9933
}



#toggle {
display: none;
}





/* ＴＯＰ画像 */
.topg p {
margin-top: 0px;
margin-bottom: 0px;
}

.topg img {
max-width: 100%;
height: auto;
}



/* 紹介と更新履歴 */
.rireki {
margin-bottom: 30px
}

.rireki h1 {
margin-top: 0px;
margin-bottom: 10px;
border-bottom: 1px dashed #333333;
color: #333333;
font-size: 14px;
text-align: left;
}

.rireki ul {
margin: 0px;
padding: 0px;
list-style: none;
text-align: left;
}

.rireki li {
margin-left: 0px;
padding-left: 0px;
}


.rireki .text {
width: auto;
}

.new {
margin-left: 0px;
padding-left: 0px;
}


.new img {
margin-left: 0px;
padding-left: 0px;

}



.rireki li a { 
color: #003399;
text-decoration:none; 
}
.rireki li a:visited {
color: #003399;
text-decoration:none;   
}      
.rireki li a:hover {
color: #ff8c00;
text-decoration:none;   
}






/* 更新予定 */
.yotei {
margin-bottom: 20px
}

.yotei h1 {
margin-top: 0px;
margin-bottom: 10px;
border-bottom: 1px dashed #333333;
color: #333333;
font-size: 14px;
text-align: left;
}

.yotei ul {
margin: 0px;
padding: 0px;
list-style: none;
text-align: left;
}

.yotei li a { 
color: #003399;
text-decoration:none;   
}
.yotei li a:visited {
color: #003399;
text-decoration:none;   
}      
.yotei li a:hover {
color: #ff8c00;
text-decoration:none;   
}

li.twi{
width: 150px;
}



/* ランク投票 */
.rank {
margin-top: 0px;
margin-bottom: 30px
}

.rank ul {
margin: 0px;
padding: 0px;
list-style: none;
text-align: left;
}

.rank li {
color: #333333;
}

.rank img {
width: 100%;
max-width: 100px;
}


.tbc {
width: 100%;
max-width: 100px;
}

.tbc a {
display: inline-block;
}



.tbw {
width: 100%;
max-width: 100px;
}

.tbw a {
display: inline-block;
}










/* 動作確認 */
.dousa {
margin-bottom: 30px
}

.dousa ul {
margin: 0px;
padding: 0px;
list-style: none;
text-align: left;
}

.dousa li {
color: #333333;
}


/* コピーライト */
.copyright p {
margin: 0;
color: #333333;
}

/* コピーライト上の罫線 */
.box5 {
border-top: solid 2px #666666

}


/* ボックス上下の間隔 */
.box1 {
padding-top: 20px;
padding-bottom: 0px;
}

.box3 {
padding-top: 30px;
padiing-bottom: 30px;
}

.box4 {
padding-top: 100px;
padding-bottom: 0px;
}

.box5 {
padding-top: 15px;
padding-bottom: 15px;
}




/* ########## 599px以下 ########## */
@media (max-width: 599px) {
/*  */

body { 
background-image:url(../bg3.gif); 
background-repeat:repeat-x; 
line-height:1.4;
color:333333;
font-family: 'メイリオ','Hiragino Kaku Gothic Pro', sans-serif;
font-size:13px;
-webkit-text-size-adjust: 100%;


}

img {
wax-width: 100%;
height: auto;
}


/* サイト名 */
.site {
margin: 0px auto 0px;
padding: 0px;

}
 



/* ナビゲーション */
#menu {
display: none;
margin: 0px auto;
}


#menu li {
width: 100%;
border-bottom: 1px solid #ffffff;
}

#toggle {
display: block;
position: relative;
widht: 100%;
background: #333333;
margin: 10px auto 0px;
}

#toggle a {
display: block;
position: relative;
padding: 12px 0px 10px;
border-bottom: 1px solid #ffffff;
color: #ffffff;
text-align: center;
text-decoration: none;
}

#toggle:before {
display: block;
content: "";
position: absolute;
top: 50%;
left: 10px;
width: 20px;
height: 20px;
margin-top: -10px;
background: #ffffff;
}

#toggle a:before, #toggle a:after {
display: block;
content: "";
position: absolute;
top: 50%;
left: 10px;
width: 20px;
height: 4px;
background: #666666;
}

#toggle a:before {
margin-top: -6px;
}

#toggle a:after {
margin-top: 2px;
}


/* ＴＯＰ画像 */
.topg p {
margin-top: 30px;

}
.topg img {
width: 100vw;
}





/* 紹介と更新履歴 */
.rireki h1 {
font-size: 13px;
}

.rireki li {
padding-bottom: 10px;
}

.rireki.text {
width: auto;
}




/* 更新内容とＮＥＷ画像を横に並べる設定 */

.listclear {
content="";
display: block;
clear: both;
}

.text .new:after {
content:"";
display: block;
clear: both
}


.text {
float: left;
width: auto;
}            

.new {
float: left;
width: 30px;
}

/* 更新内容とＮＥＷ画像の左右の間隔 */
.text .new {
padding-right: 0px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;

}




/* 更新予定 */
.yotei h1 {
font-size: 13px;

}

.yotei li {
padding-bottom: 5px;
}







/* ボックス上下の間隔 */
.box3 {
padding-top: 0px;
}

.box4 {
padding-top: 30px;
padding-bottom: 0px;
}



}


/* ########## 600px 以上〜 849px 以下 ########## */
@media (min-width: 600px) and (max-width: 849px) {

body { 
background-image:url(../bg3.gif); 
background-repeat:repeat-x; 
line-height:1.4;
color:333333;
font-family: 'メイリオ','Hiragino Kaku Gothic Pro', sans-serif;
font-size:16px;
}

img {
max-width: 100%;
height: auto;
}


/* サイト名 */
.site {
margin: 0px auto 0px;
padding: 0px;
background: none;
}


/* ナビゲーション */
#menu {
margin: 10px auto;
}

#menu li {
width: 30%;
border-bottom: 1px solid #ffffff
}


/* ＴＯＰ画像 */
.topg p {
margin-top: 100px;
}




/* 紹介と更新履歴 */
.rireki h1 {
font-size: 16px;
}

.rireki li {
padding-bottom: 10px;
}


/* 更新予定 */
.yotei h1 {
font-size: 16px;

}

.yotei li {
padding-bottom: 5px;
}


/* ボックス上下の間隔 */
.box3 {
padding-top: 30px;
padiing-bottom: 0px;
}

.box4 {
padding-top: 30px;
padding-bottom: 0px;
}



}




/* ########## 850px以上 ########## */
@media (min-width: 850px) {


/* 全体の横幅を固定 */
.box1, .box2, .boxA, .box5 {
width: 850px;
margin-left: auto;
margin-right: auto;
}


img {
max-width: 100%;
height: auto;
}






/* サイト名 */
.site {
margin: 0px auto 0px;
padding: 0px;
background: none;
}




/* box3とbox4を横に並べる設定 */
.boxA:after {
content:"";
display: block;
clear: both
}


.box3 {
float: left;
width: 60.5%
}            

.box4 {
float: left;
width: 39.5%
}


/* .box3と.box4左右の間隔 */
.box4{
padding-left: 10px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;

}



/* tbcとtbwを横に並べる設定 */
.narabi:after {
content:"";
display: block;
clear: both
}


.tbc {
float: left;
width: 50%
}            

.tbw {
float: left;
width: 50%
}


/* .overと.over2左右の間隔 */
.tbw {
padding-left: 0px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;

}







/* 更新日と更新内容を横に並べる設定 */
.rireki .block:after {
content:"";
display: block;
clear: both
}


.rireki .time {

float: left;
width: auto;
}            

.rireki .text {
float: left;
width: auto;
}

/* 更新日と更新内容の左右の間隔 */
.rireki .time {
padding-right: 5px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;

}



}




/* ########## iPhone6用 ########## */


@media only screen and (min-device-width: 375px)
 and (max-device-width: 667px)
 and (orientation : portrait) { 



body { 
background-image:url(../bg3.gif); 
background-repeat:repeat-x; 
line-height:1.4;
color:333333;
font-family: 'メイリオ','Hiragino Kaku Gothic Pro', sans-serif;
font-size:16px;
-webkit-text-size-adjust: 100%;
}


img {
max-width: 100%;
}


.box2, .box3 {
width: 99%;
}

.box4, .box5 {
width: 100%;
}



/* サイト名 */
.site {
margin: 0px auto 0px;
padding: 0px;
background: none;
}

.site img {
width: 167px;

}









/* ナビゲーション */
#menu {
display: none;
margin: 0px auto;
}


#menu li {
width: 100%;
border-bottom: 1px solid #ffffff;
}

#toggle {
display: block;
position: relative;
widht: 100%;
background: #333333;
margin: 10px auto 0px;
}

#toggle a {
display: block;
position: relative;
padding: 12px 0px 10px;
border-bottom: 1px solid #ffffff;
color: #ffffff;
text-align: center;
text-decoration: none;
}

#toggle:before {
display: block;
content: "";
position: absolute;
top: 50%;
left: 10px;
width: 20px;
height: 20px;
margin-top: -10px;
background: #ffffff;
}

#toggle a:before, #toggle a:after {
display: block;
content: "";
position: absolute;
top: 50%;
left: 10px;
width: 20px;
height: 4px;
background: #666666;
}

#toggle a:before {
margin-top: -6px;
}

#toggle a:after {
margin-top: 2px;
}


/* ＴＯＰ画像 */
.topg p {
margin-top: 100px;
}





/* 紹介と更新履歴 */
.rireki h1 {
font-size: 16px;
}

.rireki li {
padding-bottom: 10px;
}


/* 更新予定 */
.yotei h1 {
font-size: 16px;

}

.yotei li {
padding-bottom: 5px;
}


/* ボックス上下の間隔 */
.box3 {
padding-top: 30px;
padiing-bottom: 0px;
}

.box4 {
padding-top: 30px;
padding-bottom: 0px;
}



}





/* ########## iPhone6 Plus用 ########## */

@media only screen and (min-device-width: 414px)
 and (max-device-width: 736px)
 and (orientation : portrait) {



body { 
background-image:url(../bg3.gif); 
background-repeat:repeat-x; 
line-height:1.4;
color:333333;
font-family: 'メイリオ','Hiragino Kaku Gothic Pro', sans-serif;
font-size:18px;
-webkit-text-size-adjust: 100%;
}


img {
max-width: 100%;
}






.box2, .box3 {
width: 97%;
}

.box4, .box5 {
width: 99%;
}



/* サイト名 */
.site {
margin: 0px auto 0px;
padding: 0px;
background: none;
}

.site img {
width: 167px;

}









/* ナビゲーション */
#menu {
display: none;
margin: 0px auto;
}


#menu li {
width: 100%;
border-bottom: 1px solid #ffffff;
}

#toggle {
display: block;
position: relative;
widht: 100%;
background: #333333;
margin: 10px auto 0px;
}

#toggle a {
display: block;
position: relative;
padding: 12px 0px 10px;
border-bottom: 1px solid #ffffff;
color: #ffffff;
text-align: center;
text-decoration: none;
}

#toggle:before {
display: block;
content: "";
position: absolute;
top: 50%;
left: 10px;
width: 20px;
height: 20px;
margin-top: -10px;
background: #ffffff;
}

#toggle a:before, #toggle a:after {
display: block;
content: "";
position: absolute;
top: 50%;
left: 10px;
width: 20px;
height: 4px;
background: #666666;
}

#toggle a:before {
margin-top: -6px;
}

#toggle a:after {
margin-top: 2px;
}


/* ＴＯＰ画像 */
.topg p {
margin-top: 100px;
}


.box3 {
background-color: #666666
margin-right: 1px;
}


/* 紹介と更新履歴 */
.rireki h1 {
font-size: 16px;
}

.rireki li {
padding-bottom: 10px;
}


/* 更新予定 */
.yotei h1 {
font-size: 16px;

}

.yotei li {
padding-bottom: 5px;
}


/* ボックス上下の間隔 */
.box3 {
padding-top: 30px;
padiing-bottom: 0px;
}

.box4 {
padding-top: 30px;
padding-bottom: 0px;
}


}



/* ########## Kindle Fire HDタテ画面用 ########## */

@media (max-device-width: 800px) and (orientation: portrait) {
    







}







/* ########## Kindle Fire HDヨコ画面用 ########## */

@media (max-device-width: 1280px) and (orientation: landscape) {
   


 
}









/* devicePixelRatio=1.5  主にAndroid */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
	/* style here... */
}

/* devicePixelRati=2  主にiPhone ########## iphone6 ########## */
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
	/* style here... */







}