@charset "utf-8";
/* ******************************************************************************** */
/*                                                                                  */
/*  I'll be NET Color Default                                                       */
/*  作成：I'll be NET（http://illbe.net/）                                          */
/*                                                                                  */
/* ******************************************************************************** */
/* ================================================================================ */
/*      0-3:見出し                                                                  */
/* ================================================================================ */
.content h4{background-color: #bbb; color: #fff;}
.content h5{border-left: 5px solid #666;}
#footer{background-color: #666; color: #ccc;}
#footer a{color: #ccc;}
#trackback_url p{background-color: #fff; border: 1px solid #ccc;}
/* ================================================================================ */
/*      3-11:コメント削除フォーム                                                   */
/* ================================================================================ */
.delete{background-color: #eee;}
.delete input{background-color: #decccc; border: 1px solid #ccc;}
.delete input:hover{background-color: #d6a0a0; color: #fff;}

.root h3{background-color: #999; color: #fff;}
.author h3{background-color: #afafaf; color: #fff;}
.guest h3{background-color: #eee;}

@media (max-width: 850px) {
    .tb{display: block !important;}
    .wrap {width: 100%;}
    header h1{padding: 0 10px 0 0;}
    #g_nav{width: 100%;}
    #menu{width: 90%;}
    #submenu{width: 10%; position: relative;}
    #submenu h3{
        color: #ccc;
        position: absolute;
        right: 0;
        top: 10px;
        margin: 0;
        text-align: center;
        line-height: 30px;
        border: 1px solid #ccc;
        width: 30px;
        height: 30px;
    }
    #submenu h3:hover{cursor: pointer; background: #666}
    #submenu ul{
        display: none;
        position: absolute;
        background: rgba(100,100,100,.9);
        right: 0;
        top: 38px;
        margin: 0;
        border: 1px solid #fff;
    }
    #submenu ul li {
        width: 130px;
        margin: 0;
        padding: 5px 10px;
        line-height: 30px;
        text-align: left;
        color: #ccc;
        border-bottom: 1px solid #fff;
    }
    #submenu ul#usermenu{top: 120px;}
    #submenu ul#usermenu li {
        padding: 3px 5px;
        line-height: 1.2;
    }
    #submenu ul li span{display: inline-block; margin-left: 10px;}
	#content{width: 100%; float: none;}
	#content.column_r{width: 100%; float: none;}
	#content.column_r{width: 100%; float: none;}
	#utility{
		width: 100%;
		float: none;
		overflow: hidden;
		bottom: 0;
		display: flex;
		flex-wrap: wrap;
	}
	.utility{
		width: 48%;
		margin: 10px 1%;
		padding: 10px;

    }
    .utility.text_menu{width: 100%; margin: 10px 0; padding: 10px 0;;}
	.default{width: 100%; float: none;}
	.album_type{margin: 0;}
	a.album{width: 48%; margin: 0; padding: 10px 0;}
}


/* ################################################################################ */
/*      0:スマホ用                                                                  */
/* ################################################################################ */
@media (max-width: 650px) {
    .pc{display: none !important;}
    .sp{display: block !important}
    body, html{overflow-y: auto;}
    .fixed {
        position: fixed;
        width: 100%;
        height: 100%;
    }
    header{background: transparent;}
    #nav-open{
        position: absolute;
        right: 5px;
        display: inline-block;
        width: 40px;
        height: 40px;
        vertical-align: middle;
        color: #ccc;
        margin: 5px 0;
        background: #000;
        z-index: 9999;
    }
    #nav-open:hover{background: #666;}
    #nav-open i{
        width: 40px;
        height: 40px;
        font-size: 30px;
        border: 1px solid #ccc;
        text-align: center;
        line-height: 40px;
    }
    #nav-open:hover{
        cursor: pointer;
    }
    
    /*メニューを閉じるカバーエリア*/
    #nav-close {
        display: none;/*はじめは隠しておく*/
        position: fixed;
        z-index: 9998;/*最前面のすぐ下に表示*/
        top: 0;/*全体に広がるように*/
        left: 0;
        width: 100%;
        height: 100%;
        background: black;
        opacity: 0;
        transition: .3s ease-in-out;
    }
    
    /*メニューの内容*/
    #g_nav {
        overflow: auto;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9999;/*最前面に表示*/
        width: 80%;/*右側に隙間を作る（閉じるカバーを表示）*/
        max-width: 330px;/*最大幅（調整してください）*/
        height: 100%;
        background: #000;/*背景色*/
        transition: .3s ease-in-out;/*滑らかに表示*/
        -webkit-transform: translateX(-105%);
        transform: translateX(-105%);/*左に隠しておく*/
        display: block;
    }
    #nav-input:checked ~ #nav-close {
        display: block;/*メニューを閉じるカバーを表示*/
        opacity: .5;
    }
    #nav-input:checked ~ #g_nav {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);/*中身を表示（右へスライド）*/
        box-shadow: 6px 0 25px rgba(0,0,0,.15);
    }
    header h1 {
        text-align: left;
        margin: 0;
        padding: 0 10px;
        width: 50%;
    }
    header h1.sp{
        text-align: center;
        width: 100%;
        display: block;
        border-bottom: 1px dashed #555;
    } 
    #menu{width: 100%;}
    #menu ul{flex-wrap: wrap}
    #menu ul li {
        width: 100%;
        border-bottom: 1px dashed #333;
    }
    #menu ul li a:hover{background: #333; border: 0;}
    .tb{display: none !important;}
    #submenu{width: 100%;
        position: relative;}
    #submenu ul{
        display: block;
        position: static;
        background: transparent
        margin: 0 auto;
        border: 0;
        background: transparent;
        text-align: center;
    }
    #submenu ul li {
        width: auto;
        margin: 5px;
        padding: 0;
        line-height: 30px;
        text-align: center;
        color: #ccc;
        border: 0;
        display: inline-block;
    }
    #submenu ul li i{
        display: block;
        background: #222;
        color: #ccc;
        width: 30px;
        height: 30px;
        padding: 0;
        line-height: 30px;
        text-align: center;
    }
    #submenu ul li i:hover{background: #444;}
    #submenu ul li a{
        padding: 0;
    }
    #submenu ul li span{display: none;}
    #submenu_icon{display: block;}
    #submenu ul#usermenu{display: none !important;}
    .pan{display: none;}
    main{padding: 0 0 90px;}
    h2{
        text-align: center;
        margin: 0 -15px 30px;
        background: rgba(0,0,0,.8);
        color: #fff;
        padding: 10px;
        text-shadow: 0 0 0;
    }
    h2 span{display: none;}
    #entry h2{display: block;}
    #document h2{font-size: 1.2em;}
    .content h4{font-size: 1.2em;}
    .content h5{font-size: 1.2em;}
    .content h6{border-bottom: 1px solid #000; padding-bottom: 5px;}
    #document{padding: 10px;}
    .utility{width: 100%; margin: 10px 0;}
	#trackback div.trackback ul.information {margin: 5px 0; text-align: left;}
	#trackback div.trackback ul.information li {display: list-item; margin: 2px 0;}
	#comment div.comment ul.information {margin: 5px 0; text-align: left;}
	#comment div.comment ul.information li {display: list-item; margin: 2px 0;}
	ul.information{margin: 10px 0;}
	ul.information li{display: list-item;}
	ul.link{margin: 0; padding: 5px;}
	ul.link li{display: list-item;}
	#plugin_form dl dt{float: none; margin: 5px 0 0; width: 100%; text-align: left;}
	#plugin_form dl dd{margin: 0 0 5px; width: 100%;}
	#plugin_form ul, #plugin_form p{margin: 5px 0;}

    .default dl dt {
        border-left: 8px solid #000;
        width: 100%;
        float: none;
        clear: none;
        margin-bottom: 0;
    }
    .default dl dd {
        margin-left: 15px;
        margin-bottom: 8px;
    }
    #page_all .genre, #page_all .group{margin: 10px 0;}
    table#event tr{display: block; padding: 10px 0; overflow: hidden;}
	table#event tr td{display: block; text-align: left; padding: 0 5px;}
	table#event thead{display: none;}
    table#event .datetime, table#event .space{width: 100%;}
    dl#event{width: 100%;}
    .book figure, .book .note{width: 100%; float: none;}
    .book figure{display: flex; overflow: hidden;}
    .book figure a{max-height: 300px; width: 70%;}
    .book figure ul{width: 30%;}
    .book figure img{max-width: 90%; max-height: 100%;height: auto;}
    .book figure ul{margin: 0;}
    .book figure ul li{list-style: none; display: list-item; width: auto; min-width: auto; height: 70px; padding: 0; margin-bottom: 5px; overflow: hidden; text-align: center;}
    .book figure ul li img{width: auto; max-width: auto; height: 100%; margin: 0 auto}
}