/* ========================================
スマホメニュー専用CSS
======================================== */

@media screen and (max-width:768px){

/* ========================================
ハンバーガーボタン
======================================== */

#sp-nav-toggle{

  width:54px;
  height:54px;

  position:fixed;
  top:15px;
  right:15px;

  z-index:10001;

  border-radius:50%;

  background:#fff;

  box-shadow:
  0 5px 20px rgba(0,0,0,0.12);

  display:flex;
  align-items:center;
  justify-content:center;

  cursor:pointer;

  transition:0.3s;
}

/* 線 */

#sp-nav-toggle span{

  position:absolute;

  width:24px;
  height:2px;

  background:#111;

  border-radius:999px;

  transition:0.35s;
}

#sp-nav-toggle span:nth-child(1){
  transform:translateY(-8px);
}

#sp-nav-toggle span:nth-child(2){
  transform:translateY(0);
}

#sp-nav-toggle span:nth-child(3){
  transform:translateY(8px);
}

/* OPEN */

body.sp-open #sp-nav-toggle{
  background:#d7002f;
}

body.sp-open #sp-nav-toggle span{
  background:#fff;
}

body.sp-open #sp-nav-toggle span:nth-child(1){
  transform:rotate(45deg);
}

body.sp-open #sp-nav-toggle span:nth-child(2){
  opacity:0;
}

body.sp-open #sp-nav-toggle span:nth-child(3){
  transform:rotate(-45deg);
}

/* ========================================
メニュー全体
======================================== */

#sp-global-nav{

  position:fixed;

  top:0;
  left:0;

  width:100%;
  height:100vh;

  background:
  linear-gradient(
    180deg,
    rgba(5,10,30,0.97) 0%,
    rgba(0,0,0,0.96) 100%
  );

  z-index:10000;

  opacity:0;
  visibility:hidden;

  transition:
  opacity 0.4s,
  visibility 0.4s;

  overflow-y:auto;

  -webkit-overflow-scrolling:touch;
}

/* OPEN */

body.sp-open #sp-global-nav{
  opacity:1;
  visibility:visible;
}

/* ========================================
メニュー内側
======================================== */

.sp-menu-inner{

  width:100%;
  max-width:500px;

  margin:0 auto;

  padding:
  100px 25px 60px;
}

/* ========================================
ロゴ
======================================== */
/*
.sp-logo{
  text-align:center;
  margin-bottom:45px;
}

.sp-logo img{
  width:220px;
}
*/
/* ========================================
メニューリスト
======================================== */

.sp-menu-list{
  list-style:none;
}

.sp-menu-list li{

  border-bottom:
  1px solid rgba(255,255,255,0.08);
}

.sp-menu-list li a{

  display:flex;
  align-items:center;

  width:100%;

  color:#fff;

  text-decoration:none;

  padding:20px 0;

  font-size:18px;
  font-weight:700;

  transition:0.3s;
}

.sp-menu-list li a:hover{
  color:#40B3FF;
}

/* アイコン */

.sp-menu-list li i{

  color:#d7002f;

  width:30px;

  font-size:14px;
}

/* ========================================
お問い合わせボタン
======================================== */

.sp-menu-cta{
  margin-top:35px;
}

.sp-menu-cta a{

  width:100%;

  display:flex;
  align-items:center;
  justify-content:center;

  background:#d7002f;

  color:#fff;

  text-decoration:none;

  padding:18px 20px;

  border-radius:999px;

  font-size:18px;
  font-weight:700;

  box-shadow:
  0 10px 25px rgba(215,0,47,0.3);

  transition:0.3s;
}

.sp-menu-cta a:hover{
  background:#fff;
  color:#d7002f;
}

/* ========================================
SNS
======================================== */

.sp-menu-sns{

  display:flex;
  justify-content:center;
  gap:18px;

  margin-top:40px;
}

.sp-menu-sns a{

  width:50px;
  height:50px;

  border:
  1px solid rgba(255,255,255,0.15);

  border-radius:50%;

  display:flex;
  align-items:center;
  justify-content:center;

  color:#fff;

  transition:0.3s;
}

.sp-menu-sns a:hover{
  background:#d7002f;
  border-color:#d7002f;
}

/* ========================================
PC時は完全停止
======================================== */

}

@media screen and (min-width:769px){

#sp-nav-toggle{
  display:none !important;
}

#sp-global-nav{
  display:none !important;
}

}