@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

.drawer-nav {
    position: fixed;
    z-index: 1001;
    top: 0;
    right: -16.25rem;
    overflow: hidden;
    width: 16.25rem;
    height: 100%;
    background-color: #fff;
    -webkit-transition: right .6s cubic-bezier(.19, 1, .22, 1);
    transition: right .6s cubic-bezier(.19, 1, .22, 1);
}
.drawer-open .drawer-nav {
    right: 0;
}

/* ハンバーガーメニュー
-------------------------------------------------- */
#hbg{
	background:url(/common/bg_craft.jpg) repeat;
	z-index:1001;
}
#hbg li a{
	display:block;
	padding:8px 4px 8px 15px;
	color:#b73b11;
	font-size:16px;
	font-weight:bold;
	line-height:1.2;
	border-bottom:2px solid #b73b11;
}
#hbg li a:before{
	content:"\00bb\0020";
}
#hbg li a:hover{
	-moz-transition: .3s; -o-transition: .3s; -ms-transition: .3s; transition: .3s;
	background:rgba(0,0,0,0.15);
}

/* ヘッダーカスタマイズ
-------------------------------------------------- */
#header{
	position:relative;
}
#header #hd_contact{
	position:absolute;
	right:17%;
	top:42px;
	width:274px;
}
#header #hd_inq{
	position:absolute;
	display:block;
	right:7%;
	top:53px;
}
@media screen and (max-width: 860px) {
	#header #hd_contact,
	#header #hd_inq{
		display:none;
	}
}

/* 全体
-------------------------------------------------- */
#content{
	background:rgb(254,252,233);
}
#header,#footer,.footer-02{
	background:url(/common/bg_craft.jpg) repeat !important;
}
#header{
	border-bottom:none;
}
body {
	background:url(/common/bg_craft.jpg) repeat !important;
}

/* サイドバー
-------------------------------------------------- */
.side-widget-inner{
	padding: 10px 20px 20px;
	background:#fff;
	border: 1px #e5e5e5 solid;
}
.side-title-inner{
	font-weight:bold;
}

/* フッター
-------------------------------------------------- */
.footer-02 .footer-copy {
	text-align: center;
	font-size: 12px;
}
.footer-02{
	border-top:none;
}

.drawer-hamburger {
    position: fixed;
    display: block;
    top: 40px;
    right: 20px;
    padding: 0 !important;
    width: 50px;
    height: 60px;
    margin-right: 10px;
    cursor: pointer;
    background-color: transparent;
    border: 0;
    outline: 0;
    z-index: 1002;
}

@media screen and (max-width: 860px) {
    .drawer-hamburger {
        top: 10px;
        right: 10px;
        margin-right: 0;
    }
}

.drawer-hamburger-icon {
    position: relative;
    display: block;
    margin-top: 30px;
}
.drawer-hamburger-icon,
.drawer-hamburger-icon:after,
.drawer-hamburger-icon:before {
    width: 100%;
    height: 2px;
    background-color: #333;
    -webkit-transition: all .6s cubic-bezier(.19, 1, .22, 1);
    transition: all .6s cubic-bezier(.19, 1, .22, 1);
}
.drawer-hamburger-icon:after,
.drawer-hamburger-icon:before {
    position: absolute;
    top: -10px;
    left: 0;
    content: ' ';
}
.drawer-hamburger-icon:after {
    top: 10px;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}

.body-container,
.content-area,
.wrap {
    background: transparent !important;
}