@charset "UTF-8";
/*2016-03*/

/*--▼ハンバーガmenu--*/
.abs-mob-menu{
position:absolute;
z-index:9999;
right:0px;
bottom:4px;
}
.drawer {display:none;}
@media screen and (max-width: 769px) {
.drawer {display:block;}
}
/* チェックボックスは非表示に */
.drawer-hidden {display: none;}
/* ハンバーガーアイコン設置スペース */
.drawer-open {
display: flex;
height: 50px;
width: 50px;
justify-content: center;
align-items: center;
position: relative;
z-index: 100;/*重なり順を一番上に*/
cursor: pointer;
background:#fff;
}
@media screen and (max-width: 640px) {
.drawer-open {
height: 40px;
width: 40px;
}
}
/*--ハンバーガーメニューのicon--*/
.drawer-open span,
.drawer-open span:before,
.drawer-open span:after {
content: '';
display: block;
height: 3px;
width: 30px;
background: #333;
transition: 0.5s;
position: absolute;
}
/* 三本線の一番上の棒の位置調整 */
.drawer-open span:before {bottom: 8px;}
/* 三本線の一番下の棒の位置調整 */
.drawer-open span:after {top: 8px;}
/* アイコンクリックで真ん中の線を透明*/
#drawer-check:checked ~ .drawer-open span {background: rgba(255, 255, 255, 0);}
/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
#drawer-check:checked ~ .drawer-open span::before {
bottom: 0;
transform: rotate(45deg);
}
#drawer-check:checked ~ .drawer-open span::after {
top: 0;
transform: rotate(-45deg);
}
/* メニューのデザイン*/
.drawer-content {
width: 90%;
height: 90%;
min-height:520px;
position: fixed;
top: 0;
left: 110%; /*メニューを画面の外に飛ばす*/
z-index: 99;
background: #e4e4e4;
transition: .5s;
overflow:scroll;
padding:20px;
box-shadow : 0px 4px 8px 0px rgba(0,0,0,0.3);
-webkit-box-shadow : 0px 4px 8px 0px rgba(0,0,0,0.3);
-moz-box-shadow : 0px 4px 8px 0px rgba(0,0,0,0.3);
}
/*アイコンクリックでメニュー表示*/
#drawer-check:checked ~ .drawer-content {
left: 10%;/* メニューを画面に入れる */
}

/*--項目--*/
.drawer-content p{
text-align:center;
width:100%;
color:#333;
margin-bottom:20px;
}
.drawer-content img{
width:30%;
height ; auto;
display : block;
margin : 0 auto 30px auto;
}
@media screen and (max-width: 640px) {
.drawer-content img{
width:50%;
margin : 0 auto 20px auto;
}
}

/*--menu-list--*/
.drawer-content ul{
font-weight:bold;
margin:0 0 0px 0;
}
/*--list--*/
.drawer-content li a{
position:relative;
display:block;
vertical-align:middle;
padding:12px 0 12px 0;
color:#000;
border-top:1px solid #333;
}
/*--listと三角icon--*/
.drawer-content li a:after{
content: "";
position: absolute;
top: 50%;
right: 0px;
width: 0;
height: 0;
margin-top: -8px;
border: 8px solid transparent;
border-left: 8px solid #333;
}
.drawer-content li a:hover{
background:#fff;
color:#333;
}
.drawer-content li a:hover::after{
border-left: 8px solid #c71585;
}
.drawer-content li:last-child{
border-bottom:1px solid #333;
margin:0 0 20px 0;
}



/*
.drawer-list {
*/
/*box-shadow : 0px 6px 2px 0px rgba(0,0,0,0.4);
-webkit-box-shadow : 0px 6px 6px 0px rgba(0,0,0,0.4);
-moz-box-shadow : 0px 6px 6px 0px rgba(0,0,0,0.4);*/
/*}*/
/*.drawer-list li a{
padding:15px 0px;
border-bottom:1px dotted #333;
display:block;
}*/
/*--▲ハンバーガmenu--*/