@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;
}

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

a img {
border: none;
}



/* サイト名 */

.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;
}





/* ミニメニュー */

.box3{
margin-top: 90px;
margin-bottom: 20px;
}

.about {
text-align: left;
margin: 0px 40px;
}

.minimenu {
width: 500px;
height: 20px;
margin: 0% 0% 0% 20%;
padding: 0px;
margin-left: 0px;
}
.minimenu li{
display: block;
width: 30%;
padding: 3px;
margin: 0px;
float: left;
}

.text {
background-color: #000000;
text-align: center;
color: #ffffff;
border-color: #000000;
border-style: solid;
border-width: 1px;
}

.minimenu a {
display: block;
padding: 0px;
background-color: #000000;
text-align: center;
text-decoration: none;
color: #00ccff;
border-color: #000000;
border-style: solid;
border-width: 1px;
}

.minimenu li a:hover {
background-color: #000000;
color: #ff9933;
}

.minimenu li a.active {
background-color: #000000;
color: #ff9933;
}


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



/* 画像 */

.box4 {
margin-top: 30px;
margin-bottom: 30px;
}


.gazo{
margin: 0px auto;
padding: 0px;
}

.gazo img {
margin: 0px auto;
}


.narabi {
margin: 0px auto;
padding: 0px;
}

ul.narabi li {
display: inline-block;
vertical-align: bottom;
}

p.mirai{
margin-bottom: 80px;
}

p.mojileft {
text-align: left;
}

p.mojiright {
text-align: right;
}

.gazoleft{
width: 600px;
margin: 0px auto;
padding: 0px;
}

.gazoleft img {
margin-left: 0px;
padding-left: 0px;
}






.setumei2 ul {
margin-top: 0px;
padding: 0px;
list-style: none;
text-align: center;
}

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


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






/* 本編リスト */

.box4 {
width: 100%;
max-width: 810px;
}

.box4 h2 {
margin-bottom:10px;
border-top: 1px solid #333333;
color: #333333;
font-size: 20px;
text-align: center;
padding-top: 20px;
}

.honpenlist ul {
list-style: none;
padding: 0px 85px 0px;
margin: 0px auto;
}


.boxB {
margin-bottom: 20px;
padding-bottom: 20px;
max-width: 610px;
}

.samune {
width: 240px;
max-width: 100%;
height: auto;
vertical-align: bottom;
}

.moji {
color: #333333;
font-size: 18px;
width: 360px;
height: 130px;
display: table-cell;
vertical-align: middle;
text-align: left;

}


.moji li {
margin: 5px 5px 30px 5px;

list-style: none;

}


.moji li a { 
color: #333333;
text-decoration:none;
padding: 0px; 
display: block;
}
.moji li a:visited {
color: #333333;
text-decoration:none; 
display: block;  
}      
.moji li a:hover {
color: #ff8c00;
text-decoration:none;  
display: block; 
}






.text2 {
color: #ffffff;
background-color: #000000;
width: 150px;
height: 60px;
display: table-cell;
vertical-align: middle;
text-align: center;
}


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




/* ページトップボタン */

#page-top {
position: fixed;
bottom: 20px;
right: 20px;
font-size: 100%;
}

#page-top a {
background: #666;

text-decoration: none;
color: #fff;
width: 100px;
padding: 30px 0;
text-align: center;
display: block;
border-radius: 5px;
}

#page-top a:hover {
text-decoration: none;
background: #999;
}








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

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

}


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


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

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

.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:14px;
}

img {
max-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;
}


/* アバウト */
.box3 {
width: 100%;
}
.about {
width: 100%;
margin: 0px;
}


/* ミニメニュー */

.minimenu {
width: 100%;
max-width: 500px;
height: 40px;
margin: 0% 0% 0% 20%;
padding: 0px;
margin: 0px;
}

.minimenu ul {
margin-left: 0px;
width: 100%;
padding-left: 0px;
}


.minimenu li{
display: block;
width: 50%;
padding: 0px;
margin: 0px;
float: left;
}

.text {
background-color: #000000;
text-align: center;
color: #ffffff;
border-color: #000000;
border-style: solid;
border-width: 1px;
padding: 10px;
}

.minimenu a {
display: block;
padding: 10px;
background-color: #000000;
text-align: center;
text-decoration: none;
color: #00ccff;
border-color: #000000;
border-style: solid;
border-width: 1px;
}


/* 画像 */


p.mojiright {
text-align: left;
}


p.mirai{
margin-bottom: 5px;
text-align: left;
}

p.miraisita {
text-align: left;
}


.gazoleft{
width:100%;
max-width: 600px;
}

.gazoleft img {
margin-left: 0px;
padding-left: 0px;
}



/* 本編リスト */


.honpenlist ul {
list-style: none;
padding: 0px;
margin: 0px;
}



.samune {
witdh: 240px;
margin: 0px;
}

.moji {
margin-top: 0px;
padding-top: 0px;
height: 50px;
font-size: 16px;
}

.moji li {
margin: 0px;
padding: 0px;
}


/* ページトップボタン */

#page-top {
position: fixed;
bottom: 20px;
right: 20px;
font-size: 100%;
}

#page-top a {
background: #333;
filter:alpha(opacity=25);
-moz-opacity:0.25;
opacity:0.25;
text-decoration: none;
color: #fff;
width: 100px;
padding: 30px 0;
text-align: center;
display: block;
border-radius: 5px;
}

#page-top a:hover {
text-decoration: none;
background: #333;
}



/* ボックス上下の間隔 */

.box3 {
margin-top: 30px;
padding-top: 0px;
}

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



}


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

body { 
background-image:none; 
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
}


/* ミニメニュー */

.minimenu {
width: 100%;
max-width: 500px;
height: 40px;
margin: 0% 0% 0% 20%;
padding: 0px;
margin: 0px;
}

.minimenu ul {
margin-left: 0px;
width: 100%;
padding-left: 0px;
}


.minimenu li{
display: block;
width: 50%;
padding: 0px;
margin: 0px;
float: left;
}

.text {
background-color: #000000;
text-align: center;
color: #ffffff;
border-color: #000000;
border-style: solid;
border-width: 1px;
padding: 10px;
}

.minimenu a {
display: block;
padding: 10px;
background-color: #000000;
text-align: center;
text-decoration: none;
color: #00ccff;
border-color: #000000;
border-style: solid;
border-width: 1px;
}



/* 本編リスト */


.honpenlist ul {
list-style: none;
padding-left: 50px;
margin: 0px;
}



.samune {
witdh: 240px;
margin: 0px;
}

.moji {
margin-top: 0px;
padding-top: 0px;
height: 50px;
font-size: 16px;
}

.moji li {
margin: 0px;
padding: 0px;
}


/* samuneとmojiを横に並べる設定 */
.boxB:after {
content:"";
display: block;
clear: both
}


.samune {
float: left;
width: 40%
}            

.moji {
float: left;
width: 60%
}


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

}




/* ページトップボタン */

#page-top {
position: fixed;
bottom: 20px;
right: 20px;
font-size: 100%;
}

#page-top a {
background: #333;
filter:alpha(opacity=25);
-moz-opacity:0.25;
opacity:0.25;
text-decoration: none;
color: #fff;
width: 100px;
padding: 30px 0;
text-align: center;
display: block;
border-radius: 5px;
}

#page-top a:hover {
text-decoration: none;
background: #333;
}




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

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



}




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


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


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


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


/* samuneとmojiを横に並べる設定 */
.boxB:after {
content:"";
display: block;
clear: both
}


.samune {
float: left;
width: 40%
}            

.moji {
float: left;
width: 60%
}


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

}


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


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

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

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

}










}
















/* 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... */







}