@charset "UTF-8";
.sp_menu { display: none;}

/* sp */
@media screen and (max-width: 600px) {

  .sp_menu { position: fixed; width: 100%; height: 100vh; top: 0; background-color: #333; z-index: 9999; right: 0; text-align: left; }
  .sp_menu .menu_overlay { position: fixed; width: 100%; height: 100vh; top: 0; right: 0;  background-color: #f0efea; opacity: 1; z-index: -1; }
    .sp_menu .sp_menu__box { width: 100%; height: 100dvh; display:flex; flex-direction: column; align-items: center; justify-content: center; }
  .sp_menu .sp_menu__top { width:80%; margin:2.5rem 0; }
  .sp_menu .sp_menu__top ul { padding: 0 1.5rem 0 1.5rem; display:flex; justify-content: space-between; gap:1.5rem 0; flex-direction: column; margin:auto; }
  .sp_menu .sp_menu__top ul li { font-size: 1.5rem; color: #333333; line-height: 1em; }
  .sp_menu .sp_menu__top ul li a { display: inline-flex; align-items: center; }
  .sp_menu .sp_menu__top ul li a i { display: flex; align-items: center; width:1rem; margin-right:0.5em; }

  .sp_menu .sp_menu__links { width:70%; margin:1rem auto 0 auto;  }
  .sp_menu .sp_menu__links .sp_menu__links--sns { width: 100%; display: flex; align-items: center; justify-content: center; gap:0 1.5rem; background-color: var(--c_white); padding:1em 2.5em; border-radius: 2em; }
    .sp_menu .sp_menu__links .sp_menu__links--sns span { white-space: nowrap; }
      .sp_menu .sp_menu__links .sp_menu__links--sns ul { display: flex; align-items: center; justify-content: center; gap:0 1.75rem; }
  .sp_menu .sp_menu__links .sp_menu__links--sns li {  }
  .sp_menu .sp_menu__links .sp_menu__links--sns li a { display:block; width:1.8rem; }

  .sp_menu .sp_menu__links .sp_menu__links--btn { width:100%; font-size: 1.3rem; line-height: 1em; margin-top: 1rem; }
  .sp_menu .sp_menu__links .sp_menu__links--btn a { width: 100%; display: flex; align-items: center; justify-content: center; color:#333; background-color: #ffffff; padding:1em 1.75em; border-radius: 2em; }
  .sp_menu .sp_menu__links .sp_menu__links--btn a:hover { background-color: var(--c_beige); }
  .sp_menu .sp_menu__links .sp_menu__links--btn a i { display: flex; align-items: center; width:1rem; margin-left:1em; }

  .menu_btn { display:none; position: fixed; bottom: 0; left: 0; z-index: 999; width: 4rem; height: 4rem; background-color: #4981a3; overflow: visible; line-height: 1em; font-size: 1px; float: right; cursor: pointer; -webkit-transition: all 400ms ease-out 0ms; -moz-transition: all 400ms ease-out 0ms; -o-transition: all 400ms ease-out 0ms; transition: all 400ms ease-out 0ms; }
  .menu_btn .line { position: fixed; bottom: 0; left: 1rem; width: 2rem; height: 1px; background-color: #fff; overflow: hidden; z-index: 999; -webkit-transition: all 400ms ease-out 0ms; -moz-transition: all 400ms ease-out 0ms; -o-transition: all 400ms ease-out 0ms; transition: all 400ms ease-out 0ms; }
  .menu_btn .line:nth-child(1) { bottom: 1.5rem; z-index: 2; }
  .menu_btn .line:nth-child(2) { bottom: 2rem; z-index: 2; }
  .menu_btn .line:nth-child(3) { bottom: 2.5rem; z-index: 2; }

  .btn_wrapper { position: fixed; bottom: 0; left: 0; z-index: 99999; }
  .btn_wrapper .cHeader__spmenu_btn { transition: all 400ms ease-out 0ms; }
  .btn_wrapper.clicked .menu_btn .line:nth-child(1) { -webkit-transform: translateY(-0.5rem) rotate(-45deg); transform: translateY(-0.5rem) rotate(-45deg); -webkit-transition: all 400ms ease-out 0ms; -moz-transition: all 400ms ease-out 0ms; -o-transition: all 400ms ease-out 0ms; transition: all 400ms ease-out 0ms; }
  .btn_wrapper.clicked .menu_btn .line:nth-child(2) { opacity: 0; -webkit-transition: all 400ms ease-out 0ms; -moz-transition: all 400ms ease-out 0ms; -o-transition: all 400ms ease-out 0ms; transition: all 400ms ease-out 0ms; }
  .btn_wrapper.clicked .menu_btn .line:nth-child(3) { -webkit-transform: translateY(0.5rem) rotate(45deg); transform: translateY(0.5rem) rotate(45deg); -webkit-transition: all 400ms ease-out 0ms; -moz-transition: all 400ms ease-out 0ms; -o-transition: all 400ms ease-out 0ms; transition: all 400ms ease-out 0ms; }

}