/*  
 * Theme Name: okdepot_t_blog
 * Author: OK-DEPOT
 * Author URI: https://www.ok-depot.jp/blog
 * okdepot_t WordPress Theme, Copyright 2015 OK-DEPOT OKUTA co.,ltd
*/

/* 初期化 */

@charset "utf-8";

* { margin: 0; padding: 0; background-size: contain; }
iframe { width: 100%; max-width: 100%; height: 400px; max-height: 400px; padding: 5px; display: block; }

@media screen and (max-width:768px){
img{
max-width: 96%;
height: auto;
width /***/:auto;
}
iframe { height: 200px!important; max-height: 200px!important; }
#all{
width:100%!important;
min-width:100%!important;
}
#post{
width:94%!important;
}
#side{
width:94%!important;
float:left!important;
width: 230px!important;
}
.list .list-title{
float: none!important;
width: 95%!important;
}
.list .list-img{
float: none!important;
}
.list .list-day{
float: none!important;
width: 95%!important;
}
.list .list-excerpt{
float: none!important;
width: 90%!important;
}
#ham-menu {
    background-color: #fff; /*メニュー背景色*/
    box-sizing: border-box;
    height: 100%;
    padding: 10px 40px; /*メニュー内左右上下余白*/
    position: fixed;
    right: -300px; /*メニュー横幅 width と合わせる*/
    top: 0;
    transition: transform 0.3s linear 0s; /*0.3s はアニメーションにかかる時間*/
    width: 300px; /*メニュー横幅*/
    z-index: 1000;
    overflow:scroll;
}
#menu-background {
    background-color: #333; /*黒背景*/
    display: block;
    height: 100%;
    opacity: 0;
    position: fixed;
    right: 0;
    top: 0;
    transition: all 0.3s linear 0s; /*0.3s はアニメーションにかかる時間*/
    width: 100%;
    z-index: -1;
}
#menu-cb:checked ~ #ham-menu,
#menu-cb:checked ~ #menu-icon {
    transform: translate(-300px); /*メニュー本体横幅 width と合わせる*/
}

#menu-cb:checked ~ #menu-background {
    opacity: 0.5;
    z-index: 999;
}
}

#menu-icon {
    background-color: #fff; /*アイコン部分背景色*/
    border-radius: 0 0 0 10px; /*左下角丸*/
    color: #333; /*アイコン（フォント）色*/
    cursor: pointer;
    display: block;
    font-size: 50px; /*アイコン（フォント）サイズ*/
    height: 50px; /*アイコン縦高さ*/
    line-height: 50px; /*縦位置中央化*/
    position: fixed;
    right: 0;
    text-align: center;
    top: 0;
    width: 50px; /*アイコン横幅*/
    transition: all 0.3s linear 0s; /*0.3s はアニメーションにかかる時間*/
    z-index: 1000;
}
#menu-cb {
    display: none; /*チェックボックス本体は消しておく*/
}

img{
max-width: 96%;
height: auto;
width /***/:auto;
}

body {
background:#ffffff;
font-family:Verdana, 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
font-size: 80%;
color: #333;
line-height: 160%;
line-break: strict;
word-break: nomal;
margin: 0; padding: 0;
-moz-transition: 0.3s linear;
-webkit-transition: 0.3s linear;
transition: 0.3s linear;
}

/* Link Color */

a {
color: #333;
text-decoration:none;
-moz-transition: 0.3s linear;
-webkit-transition: 0.3s linear;
transition: 0.3s linear;
}
a:hover {
color: brown;
-moz-transition: 0.3s linear;
-webkit-transition: 0.3s linear;
transition: 0.3s linear;
}
li:hover {
-moz-transition: 0.3s linear;
-webkit-transition: 0.3s linear;
transition: 0.3s linear;
}

/* clearfix */

.clear {
clear:both; 
font-size:1px;
color:#ffffff;
}
.clearfix { display: inline-block; zoom: 1; }
.clearfix { display: block; }
.clearfix:after {
content: ".";
display: block;
clear: both;
height: 0;
line-height:0;
font-size: 0;
visibility: hidden;
}

/* all */

#all { 
width: 90%; margin: 0 auto; max-width:1050px;
}
#all h1{
margin: 0 auto; padding: 3px 0 3px 10px; background-color: #7f0019;
font-size:80%; font-weight: 200!important; color: #fff;
}

/* head-menu */

#header {
margin-bottom: 10px;
border-bottom: 2px solid #CCC;
}
#header-li {
width: 100%; height: 20px;
}
#header-li li {
margin-right: 5px; padding-left: 10px; padding-right: 10px; display: block; float: right;
list-style : none;
font-size: 90%;
background:url("https://www.ok-depot.jp/img/ico_01.gif") no-repeat left center;
}

#header-top{ padding: 10px; margin: 0 auto; }

.searchbox{ width: 100%; text-align: right; margin-bottom: 5px; }
.searchbox input[type=submit]{
width: 20%; height: 20px; margin: 3px; margin-right: 10px;
background-color: #666; color: #fff;
border-style: none;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
}
.searchbox input[type=text]{
width: 65%; height: 18px; margin: 3px;
}
.searchbox input[type=submit]:hover{ opacity: 0.6; cursor: pointer }

#header-top .logo{
width: 100%; float: left;
}
#header-top .sitename{
width:201px; height:40px; display: block; float: left;
background:url("https://www.ok-depot.jp/img/logo.gif") no-repeat left top;
}
#header-top .sitetxt{
width:256px; height:22px; margin:13px 0 0 20px; display:block; float: left;
background:url("https://www.ok-depot.jp/img/header_txt.gif") no-repeat left top;
}
#header .siteimg{
width:100%; height:70px; margin: 0 auto; display:block;
background:url("https://www.ok-depot.jp/img/topmenu_s/mainimg-1.jpg") no-repeat left top;
}

#header-bottom{ padding: 5px; margin: 0 auto; }

/* headmenu */

#headmenu{
height: 140px;
margin: 0 auto; margin-top: 10px;
}

/* side */

#side{ width: 23%; padding: 10px; float: right; display: block; border:1px solid #CCC; }
#side .sidebox{ margin: 0 auto; margin-bottom: 10px; padding: 5px; border-bottom:2px solid #666; font-size: 90%; }
#side .sidebox-top{ border-top:2px solid #666; }
#side .post-title{ border-left: 5px solid brown; font-size: 110%; font-weight: bold; }

#side .sidebox li{ list-style: none; padding-left: 10px; }
#side .sidebox li a{ color: brown; margin-left: 20px; }
#side .sidebox li a:hover{ color: #666; }

#side .sidebox2 { border-bottom:2px solid #666; margin-bottom: 10px; padding: 5px; }
#side .sidebox2 li{ border-top:1px solid #ccc; list-style: none;  }
#side .sidebox2 li:first-child{ border:0; }
#side .sidebox2 li:end{ border:0; }
#side .sidebox2 li a{ display:block; margin: 5px; color: brown; padding-left: 30px; }
#side .sidebox2 .children{ margin-left: 20px; }
#side .sidebox2 .children ul{ margin-left: 20px; border: none!important; }
#side .sidebox2 .children ll{ border: none!important; }

#side .mail input[type=submit]{
width: 100px; height: 20px; margin: 3px; margin-right: 10px;
background-color: #666; color: #fff;
border-style: none;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
}
#side .mail input[type=submit]:hover{ opacity: 0.6; cursor: pointer }

/* footer */

#footer{
width: 100%; margin-top: 20px; margin: 0 auto;
border-top: 1px solid #666;
}

#all .site-copy{
margin: 3px auto; padding: 3px;
text-align: right;
font-size:80%; font-weight: 200!important;
color: #FFF;
background-color: #7f0019;
}
#all .site-copy a{ color: #FFF; }