/* mycss.css */
@charset "utf-8";
/*
スマホ: 320px - 480px
タブレット: 480 - 768px
PC:1それ以上
*/


/* 共通の設定 */
html{
height: 100%;
}


body{
height: 100%;
font-family:  "メイリオ", "Hiragino Kaku Gothic ProN", Verdana, Arial;
width: 100%;
margin: 0 auto;
}


/* スマートフォンを横にしてもテキストサイズを変更しない */
body{
-webkit-text-size-adjust:100%;
-moz-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-o-text-size-adjust: 100%;
text-size-adjust: 100%;
}


body > #container{
height: auto;
}

#container{
min-height: 100%;
height: 100%;
margin: 0 auto;
background-color: #fff;
}


#header{
margin-bottom: 15px;
}


h1{
font-weight: bold;
color: #555555;
}


h2.test{
font-weight: bold;
margin-bottom: 10px;
}


h2.entry{
font-weight: bold;
color: #555555;
margin-bottom: 10px;
margin-top: 50px;
}


h3{
font-weight: bold;
color: #555555;
border-bottom: 1px solid #99ccff;
padding: 3px 0;
margin-top: 20px;
margin-bottom: 5px;
}


p{
color: #555555;
}


p.first{
margin-bottom: 50px;
}


p.margin{
margin-bottom: 20px;
}


/* 共通設定のaタグの設定の始まり */
a:link {
text-decoration: none;
color: #0070c0;
}
a:visited {
text-decoration: none;
color: #0070c0;
}
a:hover {
text-decoration: underline;
color: #bb0000;
}
a:active {
text-decoration: underline;
color: #bb0000;
}
a:hover img {
	opacity: 0.6;
	filter: alpha(opacity=60);
}
/* 共通設定のaタグの設定の終わり */


ul.products{
margin-bottom: 15px;
}


ul.products>li{
overflow: hidden;
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px dotted #99ccff;
}


ul.products>li:last-child{
border: none;
}


ul.products>li>a{
float: left;
}


.pagetop {
text-align: right;
margin-top: 100px;
}


.readme  {
font-weight: bold;
text-align: right;
}


/*SNSボタン*/
#snsbtn{
margin-top: 1em;
margin-bottom: 1em;
}
/*終了＿SNSボタン*/


/*引用文のスタイル*/
blockquote{ 
background-color: #ccddff;
margin-left: 1.0em;
margin-right: 1.0em;
margin-top: 1em;
margin-bottom: 1em;
padding: 0.5em;
color: #555555;
}
/*終了＿引用文のスタイル*/


/*前の記事と次の記事*/
#otherentry{
overflow: hidden;
margin-top: 3em;
}
#otherentry2{
overflow: hidden;
margin-top:3em;
margin-left: 1%;
margin-right: 1%;
}
#before{
width: 49%;
text-align: center;
background: #ccddff;
border-radius: 6px;
padding-top: 1em;
padding-bottom: 1em;
float: left;
}
#before>a{
display: block;
}
#next{
width: 49%;
text-align: center;
background: #ccddff;
border-radius: 6px;
padding-top: 1em;
padding-bottom: 1em;
float: right;
}
#next>a{
display: block;
}
/*終了＿前の記事と次の記事*/



/* レスポンシブのおまじない */
html {
box-sizing: border-box;
}


img {
max-width: 100%;
}


#sidebar img {
max-width: 100%;
margin-top: 20px;
}


/* スマホのスタイル */
/* スマホのフォントサイズ指定の始まり */
p.margin{
font-size: 12px;
}
p.pans{
font-size: 12px;
}
ul.products>li>p.date{
font-size: 12px;
}
p.scopy{
font-size: 12px;
}
/* スマホのフォントサイズ指定の終わり */


#header{
display: none;
}


#header2{
width: 90%;
font-weight: bold;
background-color: #0093cd;
padding: 5%;
margin-bottom: 0px;
}
#header2>a{
color: #ffffff;
text-decoration: none;
}


#header3{
width: 32%;
background-color: #005089;
padding: 2%;
margin-left: 63%;
border-radius: 10px;
margin-top: 5px;
margin-bottom: 10px;
text-align: right;
}


#header3>a{
color: #ffffff;
text-decoration: none;
}


ul.products>li>p.date{
display: block;
/* margin-left: 2%; */
}


h2.test{
font-weight: bold;
margin-bottom: 10px;
padding-left: 0%;
}


p.pans{
margin-bottom: 10px;
}


#menu{
display: none;
}


#contents{
margin-left: 1%;
margin-right: 1%;
}


#smart{
margin-top: 50px;
}


#sidebar{
}


#side1{
display: none;
}
#side2{
display: none;
}
#side3{
display: none;
}
#side4{
display: none;
}


#footer{
display: none;
}


/*スマホでのトップへボタン*/
#totop{
width: 44%;
background-color: #005089;
padding: 2%;
margin-left: 51%;
border-radius: 10px;
margin-top: 4em;
margin-bottom: 0.5em;
text-align: right;
}


#totop>a{
color: #ffffff;
text-decoration: none;
}
/*終了：スマホでのトップへボタン*/


#footer2{
width: 100%;
margin-top: 0em;
}


#footer2 a{
color: #ffffff;
text-decoration: none;
background-color: #00a4de;
padding-top: 0.5em;
padding-bottom: 0.5em;
padding-left: 2%;
display: block;
}


#footer3{
width: 100%;
}


#footer3 a{
color: #ffffff;
text-decoration: none;
background-color: #0093cd;
padding-top: 0.5em;
padding-bottom: 0.5em;
padding-left: 2%;
display: block;
}


#footer4{
width: 100%;
}


#footer4 a{
color: #ffffff;
text-decoration: none;
background-color: #0082bc;
padding-top: 0.5em;
padding-bottom: 0.5em;
padding-left: 2%;
display: block;
}


#footer5{
width: 100%;
}


#footer5 a{
color: #ffffff;
text-decoration: none;
background-color: #0071ab;
padding-top: 0.5em;
padding-bottom: 0.5em;
padding-left: 2%;
display: block;
}


#footer6{
width: 100%;
}


#footer6 a{
color: #ffffff;
text-decoration: none;
background-color: #00609a;
padding-top: 0.5em;
padding-bottom: 0.5em;
padding-left: 2%;
display: block;
}


#footer7{
width: 100%;
}


#footer7 a{
color: #ffffff;
text-decoration: none;
background-color: #005089;
padding-top: 0.5em;
padding-bottom: 0.5em;
padding-left: 2%;
display: block;
}


#footer8{
width: 100%;
}


#footer8 a{
color: #ffffff;
text-decoration: none;
background-color: #004078;
padding-top: 0.5em;
padding-bottom: 0.5em;
padding-left: 2%;
display: block;
}


p.scopy{
margin-top: 20px;
text-align: center;
font-size: 12px;
}


ul.products>li>p{
display: none;
}


img{
max-width: 100%;
height: auto;
margin-bottom: 1em;
width /***/:auto;
}


ul.products>li>a{
width: 30%;
margin-right: 10px;
}


#container{
width:100%;
}
.pagetop {
display: none;
}
#otherentry{
display: none;
}


/* タブレットのスタイル */
/* @media all and (min-width: 480px){
} */


/* PCのスタイル */
@media all and (min-width: 768px){


/* PCのフォントサイズ指定の始まり */
body{
font-size: 16px;
}
h1{
font-size: 20px;
}
h2.test{
font-size: 20px;
}
h2.entry{
font-size: 20px;
}
p{
margin-bottom: 14px;
}
p.first{
}
p.margin{
font-size: 12px;
}
p.pans{
font-size: 12px;
}
/* PCのフォントサイズ指定の終わり */


#header{
display: block;
}


#header2{
display: none;
}


#header3{
display: none;
}


ul.products>li>a{
width: 160px;
}


#menu{
display: block;
}


#sidebar{
display: block;
}


html{
height: 100%;
}


body{
height: 100%;
font-family:  "メイリオ", "Hiragino Kaku Gothic ProN", Verdana, Arial;
}


body > #container{
height: auto;
}


#container{
min-height: 100%;
height: 100%;
/* width: 1050px; */
width: 1150px;
margin: 0 auto;
padding: 0 10px;
background-color: #fff;
}


#header{
margin-bottom: 15px;
}


#menu{
margin-bottom: 70px;
overflow: hidden;
}


#menu ul>li{
float: left;
width: 134px;
text-align: center;
padding: 10px;
background: #005089;
margin-left: 5px;
margin-right: 5px;
border-radius: 6px;
}


#menu ul>li:hover {
background: #0082bc;
}


#menu ul>li>a {
color: #ffffff;
font-weight: ;
text-decoration: none;
display: block;
}


#main{
overflow: hidden;
margin-bottom: 15px;
}


#contents{
float: left;
/* width: 700px; */
width: 800px;
}


#sidebar{
float: right;
width: 300px;
}


#sidebar p{
margin-bottom: 30px;
}


#sidebar p{
margin-bottom: 30px;
}


#footer{
font-size: 14px;
color: #ccc;
text-align: center;
border-top: 1px solid #99ccff;
padding: 10px 0 20px;
}


h1{
font-weight: bold;
margin-bottom: 10px;
}


h2.test{
font-weight: bold;
/* margin-left: 160px; */
margin-bottom: 10px;
}


h2.entry{
font-weight: bold;
margin-bottom: 10px;
margin-top: 50px;
}


h2>a{
margin-left: 0%;
}


h3{
font-weight: bold;
border-bottom: 1px solid #99ccff;
padding: 3px 0;
margin-bottom: 10px;
}


#smart{
margin-top: 0px;
}


ul.products{
margin-bottom: 15px;
}


ul.products>li{
overflow: hidden;
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px dotted #99ccff;
}


ul.products>li:last-child{
border: none;
}


ul.products>li>img{
width: 150px;
margin-right: 10px;
}


ul.products>li>a{
float: left;
}


ul.products>li>p{
display: block;
/* margin-left: 160px; */
}


ul.products>li>p.date{
/* margin-left: 160px; */
}


#sidebar p{
margin-bottom: 5px;
}


.pagetop {
display: block;
text-align: right;
margin-top: 100px;
}


#footer p{
padding-top: 20px;
padding-bottom: 20px;
}


.readme  {
font-weight: bold;
text-align: right;
}


img.test2{
max-width: 100%;
}


#side1{
display: block;
}
#side2{
display: block;
}
#side3{
display: block;
}
#side4{
display: block;
}


#footer{
display: block;
}


/*スマホスタイルのfooterを見えなくする*/
#totop{
display: none;
}
#footer2{
display: none;
}
#footer3{
display: none;
}
#footer4{
display: none;
}
#footer5{
display: none;
}
#footer6{
display: none;
}
#footer7{
display: none;
}
#footer8{
display: none;
}
/*終了：スマホスタイルのfooterを見えなくする*/


p.scopy{
display: none;
}


#otherentry{
display: block;
}
#otherentry2{
display: block;
}


}/*これでPCスタイル終了*/