@charset "utf-8";


/*-----------------------------------------------
物件
-----------------------------------------------*/

/* ハンバーガーボタン */
/*メニュー周りの高さ調整は親CSS側で設定すること。*/
/*▼ハンバーガーメニュー(ナビゲーションドロワー)*/	
#side #navbox0 {
padding:0px 0px 0px 10px;
position: fixed;
bottom: 0px;
left: 0;
}

#side #nav-drawer0 {
position: relative;
}

/*チェックボックス等は非表示に*/
#side .nav-unshown0 {
display:none;
}

/*アイコンのスペース*/
#side #nav-open0 {

}

/*ハンバーガーアイコンをCSSだけで表現*/
/*#side #nav-open0 span, #nav-open0 span:before, #nav-open0 span:after {*/
#side #nav-open0 span {
position: absolute;
height: 3px;/*線の太さ*/
width: 25px;/*長さ*/
border-radius: 3px;
background: var(--main-bg);
display: block;
content: '';
cursor: pointer;
}
#side #nav-open0 span:before {
bottom: -8px;
}
#side #nav-open0 span:after {
bottom: -36px;
}

/*閉じる用の薄黒カバー*/
#side #nav-close0 {
display: none;/*はじめは隠しておく*/
position: fixed;
z-index: 99;
top: 0;/*全体に広がるように*/
right: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: .3s ease-in-out;
}

/*中身*/
#side #nav-content0 {
overflow: auto;
position: fixed;
top: 0;
left: 0;
z-index: 9999;/*最前面に*/
width: 90%;/*右側に隙間を作る（閉じるカバーを表示）*/
max-width: 310px;/*最大幅（調整してください）*/
height: 100vh;
/*background: #ccc;*//*背景色*/
transition: .3s ease-in-out;/*滑らかに表示*/
transform: translateX(-105%);/*左に隠しておく*/

overflow-y: auto;
-webkit-overflow-scrolling: touch;

/* ▼ スクロールバー非表示（全ブラウザ対応） */
scrollbar-width: none;       /* Firefox */
}
#sideMenu::-webkit-scrollbar {
  display: none;               /* Chrome / Safari */
}


/*チェックが入ったらもろもろ表示*/
#side #nav-input0:checked ~ #nav-close0 {
display: block;/*カバーを表示*/
opacity: .5;
}
#side #nav-input0 ~ #nav-content0{
width:0;

}
#side #nav-input0:checked ~ #nav-content0 {
-webkit-transform: translateX(0%);
transform: translateX(0%);/*中身を表示（右へスライド）*/
opacity: 1;
width:100%;
overflow-x: hidden;
}

/*▲ハンバーガーメニュー(ナビゲーションドロワー)*/	
	
	

	
#side #navbox0 .toji0{
display: block;
height:40px;
}

#side #nav-closed0{
position: absolute;
display: block;

vertical-align: middle;
top:20px;
left:266px;
border-radius:4px;

z-index:100;
cursor: pointer;
}

#side #nav-closed0:after{
content: '';
display: block;
border-radius:20px;
background-color: #fff;
width: 40px;
height: 40px;
}


#side #nav-closed0 span{
position: absolute;
height: 3px;/*線の太さ*/
width: 25px;/*長さ*/
border-radius: 3px;
background: var(--main-bg);
display: block;
content: '';
cursor: pointer;
left: 7px;
top:18px;
}



#side #nav-closed0 span:nth-of-type(2) {
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#side #nav-closed0 span:nth-of-type(2)::after {
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
#side #nav-closed0 span:nth-of-type(1) {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}

#side #nav-closed0 span:nth-of-type(1)::after {
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}


#side .sub,
#side #sub{display: none;}

#side {
overflow-x: hidden;
position: relative;
z-index: 2;
}
#nav-open0 img{
display: block;
}