@charset "UTF-8";
html{ overflow-y:scroll;}

body { margin:0; font-family: Verdana, "Osaka", Arial, sans-serif;　-webkit-text-size-adjust:100%; overflow-x: clip;}

ul,p.main,#mid,#main, #midmain, #bottom{max-width: 950px; margin:0 auto; padding:0;}

h1{border-bottom:#000 solid 1px; max-width: 950px; margin:0 auto; padding: 20px 0 0 0;}

#bottom{ border-top:#000 solid 1px; } 

#pbottom{ padding: 0 0 30px 0;}

#pmore{ padding: 0 0 0; width:100%; text-align: right;}

img {margin: 0; padding: 0; max-width : 100% ; height : auto ;}
img.mt-image-center{text-align: center; display: block; margin: 0 auto 50px;  max-width : 100% ; height : auto ;}

p.archive{ font-size:small; margin:10px 0; padding:5px 0 10px 0; border-top:#000 solid 1px;}
img.archive{ margin:0; padding:0; background-position:center center; }

#backpic{margin:0 auto; background:url(back.jpg); background-repeat:no-repeat;　-moz-background-size:contain;
background-size:contain; padding: 0;}

ul.about { margin:0 auto; padding:10px 0 20px; background-color:#FFF; }
li.about { background-color:#FFF;  float:none; padding:10px 60px 0; margin:0;  }

ul {list-style:none; margin:0 auto; padding:0; background-color:#FFF; }
li { background-color:#FFF; margin:0; padding:0px 0px 0px 0px; float:left;   }

#container {height:100%; width:100%; margin:0 auto; background-color:#FFF; }
#header, #fixedBox {background-color:#FFF; padding:0; margin:0;}
#main { clear:both; background-color:#FFF; padding:0;}
#mid { background-color:#FFF;}
#side {  max-width:300px; background-color:#FFF; float:right; padding-bottom:50px; }
#archive { background-color:#ffffff; width:950px; float:left; padding: 10px;}
#archives { background-color:#FFF; width:950px; float:left; padding:10px 0 30px 70px; list-style: none;}

div.archivebox { background-color:#FFF; max-width:290px; float:left; padding: 5px; text-align:center; margin:5px;}

h2.side {margin:20px 10px 0 10px; font-size: large; font-weight:normal; }
p.side{font-size: small; line-height:180%; margin:10px 10px 0 20px;}

#bottom { background-color:#FFF; text-align: right; clear: both; height: 50px;  font-size: small; font-weight: normal; line-height: 120%; margin-bottom: 0px; vertical-align: text-bottom; padding:20px 0 0 0;  }

a.head:link, a.head:visited, a.head:active, a.head:hover {text-decoration: none; color: #FFF;}
a.head:link, a.head:visited, a.head:active {padding: 0;}
a.head:hover {background-color:rgba(255, 255, 255, 0);  padding: 0; margin 0; color:#FFF;}

a.contents:link, a.contents:visited, a.contents:active, a.contents:hover {float: left; max-width: 160px; text-align: center; text-decoration: none; color: #000; font-size:large;}
a.contents:link, a.contents:visited, a.contents:active {padding: 10px 12px 10px;}
a.contents:hover {background-color: #000;  padding: 10px 12px 10px; color:#FFF;}

a.kiji:link, a.kiji:visited, a.kiji:active, a.kiji:hover {text-decoration: none; color: #333; font-size:medium;}
a.kiji:link, a.kiji:visited, a.kiji:active {padding: 2px;}
a.kiji:hover {background-color: #000;  padding: 2px; color:#FFF;}

a.mt-image-none:hover {background-color: #FFF;  padding: 2px; color:#FFF;}

a.flowbtn10:link, a.flowbtn10:visited, a.flowbtn10:active, a.flowbtn10:hover {text-decoration: none; color: #333; font-size:24px;}
a.flowbtn10, a.flowbtn10:visited, a.flowbtn10:active {padding: 2px;}
a.flowbtn10:hover {background-color: #fff;   color:#583b3b;}

a:link, a:visited, a:active, a:hover {text-decoration: none; color: #555; font-size:small;}
a:link, a:visited, a:active {padding: 4px;}
a:hover {background-color: #000;  padding: 4px; color:#FFF; text-decoration: none;}

a.image:link, a.image:visited, a.image:active, a.image:hover {margin: 0; padding 0; background-color:rgba(255, 255, 255, 0)}

h2.about{ font-size:large; margin:50px 0 0 20px; padding:0 0 0 10px; border-left:#000 solid 10px; font-weight:normal; background-color: #ffffff; clear: both}
h3.about{ font-size:medium; margin:20px 0 0 40px; padding:0 0 0 10px; border-left:#000 solid 3px; font-weight:normal; background-color: #ffffff; clear: both}

h4.about{ font-size:large; margin:20px 0 0 0; padding: 10px; background-color: #000; font-weight:bold; color:#FFF; text-align: center;}

p.kiji{ font-size:medium;  font-weight:normal; padding:0 0 50px 0; text-align:center;}
img.kiji{ display:block;   max-width : 100% ; height : auto ;}

p.about{ font-size:small; margin:20px 60px 50px 60px; line-height:180%;}
img.about{margin:0 0 20px 0;  max-width : 100% ; height : auto ;}

table{ max-width: 95%; width: 95%; margin:0 10px 50px  auto; border-collapse: separate; border-spacing: 0px 15px; }
table tr{margin:0;}
table td{padding:5px; font-size:small;}
table th{ border-bottom:#000 solid 2px; padding:10px; font-weight:normal;}

details {
    width: 500px;
    height: 10px;
    transition: .5s;
  }


.work {padding:5px 0 0 60px; font-weight:small; font-size:small;  line-height:180%;}

@media screen and (max-width: 820px) {
#side {  width:100%; background-color:#FFF; float:none; padding-bottom:50px; }
#archive { background-color:#ffffff; width:800px; float:center; padding:10px 0 30px 0;}
h2.about{ font-size:large; margin:50px 0 0 20px; padding:0 0 0 10px; border-left:#000 solid 10px; font-weight:normal; background-color: #ffffff; width: 820px;}
h3.about{ font-size:medium; margin:20px 0 0 40px; padding:0 0 0 10px; border-left:#000 solid 3px; font-weight:normal; background-color: #ffffff; width: 820px}
}

@media screen and (max-width: 650px) {
#archive { background-color:#ffffff; width:630px; float:left; padding:10px 0 0 0;}
h2.about{ font-size:large; margin:50px 0 0 20px; padding:0 0 0 10px; border-left:#000 solid 10px; font-weight:normal; background-color: #ffffff;}
h3.about{ font-size:medium; margin:20px 0 0 40px; padding:0 0 0 10px; border-left:#000 solid 3px; font-weight:normal; background-color: #ffffff;}
}

@media screen and (max-width: 600px) {
a.contents:link, a.contents:visited, a.contents:active, a.contents:hover {float: left; max-width: 100px; text-align: center; text-decoration: none; color: rgb(0, 0, 0); font-size:medium;}
a.contents:link, a.contents:visited, a.contents:active {padding: 10px 10px 10px;}
a.contents:hover {background-color: #000;  padding: 10px 10px 10px; color:#FFF;}
#archive { background-color:#ffffff; width:580px; float:left; padding:10px 0 30px 0;}
div.archivebox { max-width: 200px;}
}

@media screen and (max-width: 500px) {
#archive { background-color:#ffffff; width:480px; float:left; padding:10px 0 30px 0;}
h2.about{ font-size:medium; margin:50px 0 0 20px; padding:0 0 0 10px; border-left:#000 solid 10px; font-weight:normal; background-color: #ffffff;}
div.archivebox { max-width: 500px;}
}

.fixed {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10000;
}



/* ボタン全体 */
.flowbtn10{
display:inline-block;	
font-size:24px;
text-decoration:none;
transition:.5s;
color:#df4343;	
}
/* インスタ・pocket・ラインだけ少し大きく */
.flowbtn10 .fa-instagram,.flowbtn10 .fa-get-pocket,.flowbtn10 .fa-get-pocket,.flowbtn10 .fa-line{
font-size:24px;
}
/* Twitterマウスホバー時 */
.flowbtn10 .fa-twitter:hover{
color:#55acee;
}
/* Instagramマウスホバー時 */
.flowbtn10 .fa-instagram:hover{
color:#c6529a;
}
/* Facebookマウスホバー時 */
.flowbtn10 .fa-facebook-f:hover{
color:#3b5998;
}
/* Feedlyマウスホバー時 */
.flowbtn10 .fa-rss:hover{
color:#6cc655;
}
/* Pocketマウスホバー時 */
.flowbtn10 .fa-get-pocket:hover{
color:#ef3f56;
}
/* はてブマウスホバー時 */
.flowbtn10 .fa-bold:hover{
color:#1ba5dc;	
}
/* YouTubeマウスホバー時 */
.flowbtn10 .fa-youtube:hover{
color:#fc0d1c;
}
/* LINEマウスホバー時 */
.flowbtn10 .fa-line:hover{
color:#00c300;
}
/* メールアイコンマウスホバー時 */
.flowbtn10 .fa-envelope:hover{
color:#f3981d;		
}
/* ulタグの内側余白を０にする */
ul.snsbtniti{
padding:0!important;
}
/* アイコン全体の位置 */
.snsbtniti{
display:flex;
:row wrap;
justify-content:flex-end;	
}
/* アイコン同士の余白 */
.snsbtniti li{
flex:0 0 5%;
text-align:right!important;
}