@CHARSET "UTF-8";
/* 
  style-sp_menu.css [ update: 2018/12/10 ]
  options.php の SP_MODE をTRUEにする

  <div id="sp_menu" class="full">
    <ul class="disp-flex justify-content_space-between full">
      <li class="flex-item"></li>
      <li class="flex-item">
        <a href="#" id="sp_menu_btn">    // トグルボタン
          <span id="btn_icon"></span>    // トグルボタンメニューの棒
          <span id="btn_message"></span> // トグルボタン文字
        </a>
      </li>
    </ul>
    <div id="sp_menu_area"></div>        // パネル表示中の背景色
    <div id="sp_menu_background"></div>  // パネル表示中の背景色
  </div>
*/

/*--------------------------------------------------------------
#sp_menu
#sp_menu #sp_menu_btn #btn_icon(.close)
#sp_menu #sp_menu_btn #btn_message
#sp_menu #sp_menu_area
#sp_menu #sp_menu_background(.close)
--------------------------------------------------------------*/
#sp_menu{
  z-index: 10;
  top: 0;
  right: 0;
  bottom: auto;
  left: 0;
  line-height: 0;
  position: fixed;
  width: 100%;
  background: #fff;
}

#sp_menu #sp_menu_background{ /* 暗い背景 */
  z-index: 1;
  position: absolute;
  display: none;
  background: rgba(0,0,0,0.5);
  margin: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: "";
  width: 100vw;
  height: 100vh;
}
#sp_menu #sp_menu_background.close,
#sp_menu #sp_menu_btn #btn_icon.close{ display: block; }

#sp_menu #sp_menu_btn:hover{ cursor: pointer; }
#sp_menu #sp_menu_btn{ /* 展開するためのボタン */
  z-index: 21;
  display: inline-block;
  position: relative;
  width: 3.4rem;
  height: 3.4rem; /* sp_menuの高さ確保 */
  background-color: #fddda0;
}

#sp_menu #sp_menu_btn #btn_icon,
#sp_menu #sp_menu_btn #btn_icon:before,
#sp_menu #sp_menu_btn #btn_icon:after
{
  display: block;
  position: absolute;
  height: 2px;
  background: #000;
  width: 1.6em;
  top: 35%;
  right: 0;
  margin: auto;
}
#sp_menu #sp_menu_btn #btn_icon{ transition: .2s; left: .2em; }
#sp_menu #sp_menu_btn #btn_icon:before,
#sp_menu #sp_menu_btn #btn_icon:after
{
  content: "";
  transition: .3s;
}
#sp_menu #sp_menu_btn #btn_icon:not(.close):before{ margin-top: -.5rem; }
#sp_menu #sp_menu_btn #btn_icon:not(.close):after{ margin-top: .4rem; }


/* ×にする */
#sp_menu #sp_menu_btn #btn_icon.close{ background: transparent; }
#sp_menu #sp_menu_btn .close:before,
#sp_menu #sp_menu_btn .close:after{ margin-top: 0; }
#sp_menu #sp_menu_btn .close:before{ transform: rotate(-45deg); -webkit-transform: rotate(-45deg); }
#sp_menu #sp_menu_btn #btn_icon.close:after{ transform: rotate(-135deg); -webkit-transform: rotate(-135deg); }


/* MENU or CLOSE */
#sp_menu #sp_menu_btn #btn_icon+#btn_message:before{
  display: block;
  position: absolute;
  top: auto;
  right: auto;
  bottom: .8rem;
  color: #000;
  font-size: .8rem;
  text-decoration: none;
  margin: auto;
}
#sp_menu #sp_menu_btn #btn_icon:not(.close)+#btn_message:before{ content: "MENU"; left: .6rem; }
#sp_menu #sp_menu_btn #btn_icon.close+#btn_message:before{ content: "CLOSE"; left: .4rem; }


#sp_menu #sp_menu_area{ /* 展開されるメニュー */
  z-index: 22;
  position: fixed;
  background-color: #fddda0;
  top: 3.4rem;
  right: 0;
  display: none;
  width: 15rem;
  height: 100vh;
  font-size: 16px;
}

/* 矢印 */
#sp_menu #sp_menu_area ul{ margin-left: 0; }
#sp_menu #sp_menu_area li{ width: 100%; line-height: 2; }
#sp_menu #sp_menu_area > ul > li{ border-bottom: 1px solid rgba(0,0,0,.2); }
#sp_menu #sp_menu_area li > a,
#sp_menu #sp_menu_area li.parent > .parent_text
{
  position: relative;
  display: block;
  padding: .25rem 1rem;
  color: #000;
  text-decoration: none;
}

#sp_menu #sp_menu_area ul.child_menu > li{ padding-left: 1rem; border-top: 1px dashed rgba(0,0,0,.2); background: rgba(255,255,255,.3); }

#sp_menu #sp_menu_area li.parent > .parent_text:before,
#sp_menu #sp_menu_area li.parent > .parent_text:after,
#sp_menu #sp_menu_area li > a:before,
#sp_menu #sp_menu_area li > a:after
{
  display: block;
  content: '';
  position: absolute;
  bottom: 0;
  left: auto;
  top: 0;
  margin: auto;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
#sp_menu #sp_menu_area li > a:before,
#sp_menu #sp_menu_area li > a:after
{
  width: .75rem;
  height: .75rem;
}


#sp_menu #sp_menu_area > ul > li.parent > .parent_text:before,
#sp_menu #sp_menu_area > ul > li > a:before{ right: .5rem; background: rgba(0,0,0); }
#sp_menu #sp_menu_area > ul > li > a:after{ right: .7rem;   background-color: #fddda0;
 }

/* .parent */
#sp_menu #sp_menu_area li.parent > .parent_text:before,
#sp_menu #sp_menu_area li.parent > .parent_text:after
{
  width: .7rem;
  height: .7rem;
}
#sp_menu #sp_menu_area li.parent > .parent_text:after{ right: .5rem; top: -.3rem;   background-color: #fddda0;
 }

@media screen and (max-width: 1000px) {
  body #container{ margin-top: 3.4rem !important; } /* sp_menuの高さ確保 */
  body #container .area_pc{ display: none !important; }
}

@media screen and (min-width: 1001px) {
  #sp_menu{ display: none; }
}