@charset "UTF-8";

/* ---------------
header SP
 --------------- */
.sp-header-top {
  width: 100%;
  height: 7rem;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}
.sp-header-top h1 {
  width: 21rem;
  padding: 2rem 3rem 2rem 1.5rem;
  border-radius: 0 0 6rem 0;
  background: #fff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
}

/*------------- .gnavBtn -------------*/

/* ハンバーガーボタン SP
  -------------------------- */
button.gnavBtn {
  display: block;
  width: 4rem;
  height: 4rem;
  padding: 0 1rem;
  border-radius: 50%;  
  background-color:#fff;
  border: none;
  cursor: pointer;
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 9999;
  outline: none;
  transition: 0.5s;
}

/*   ハンバーガーボタン3本線   */
button span.bar {
  display: block;
  width: 2rem;
  height: 0.2rem;
  padding: 0;
  background-color: var(--blue);
  margin: 0.5rem 0;
  transition: 0.3s;
  transform-origin: 0 0.1rem;
}

/*  メニューアクティブ時  */
button.active.gnavBtn{
  padding: 0 0.7rem 0 1.3rem;  
}
button.active span.bar {
} 
button.active .bar1 {
  transform: rotate(45deg);
}
button.active .bar2 {
  opacity: 0;
}
button.active .bar3 {
  transform: rotate(-45deg);
}

button.gnavBtn:hover {
  opacity: 0.6;
}

/*------------- .gnavBtn li -------------*/

header nav.gNav .ham-gNav {
  background: rgba(255, 255, 255, 0.95);
  width: 100%;
  padding: 8rem 0 0;
  position: fixed;
  top: 0;
  right: -100vw;
  transition: 0.5s;
}
header nav.gNav.active .ham-gNav {
  right: 0;
}

header nav.gNav .ham-gNav ul {
  padding: 0 2rem 2rem;
}
header nav.gNav .ham-gNav li a {
  display: block;
  padding: 1.5rem;
  font-size: 1.4rem;
  font-weight: bold;
  color: #333;
  text-decoration: none;
  line-height: 1.5;
  border-bottom: 0.1rem #e1ecdb solid;
  transition: 0.5s;
  position: relative;
}
header nav.gNav .ham-gNav li a::after {
  content: "";
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  border-top: 0.1rem var(--blue) solid;
  border-right: 0.1rem var(--blue) solid;
  position: absolute;
  top: 50%;
  right: 2rem;
  transform: translateY(-50%) rotate(135deg);
  transition: 0.5s;
}
header nav.gNav .ham-gNav li a:hover {
  opacity: 0.6;
}
header nav.gNav .ham-gNav li a:hover::after {
  transform: rotate(45deg);
}

/* ---------------
footer SP
 --------------- */
footer {
  padding: 0 0 7rem;
  background: url(../img/bg-foot.jpg);
}
.foot-wrap{
  max-width: 140rem;
  margin: 0 auto;
  padding: 0 1.5rem;
  position: relative;
}
.foot-wrap::before{
  display: block;
  content: "";
  width: 100%;
  height: 15px;
  border-radius:1rem 1rem 0 0;
  background: url(../img/bg-foot.jpg);
  position: absolute;
  top: -15px;
  left: 0;  
} 

/* 5%OFF SP -------------- */
.foot-par{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0 0 1rem;
  padding: 3rem 0;
  text-align: center;
  border-radius:1rem;
  background: #fff;
}
.foot-par p:first-child{
  font-size: 1.8rem;
  font-weight: bold;
}
.foot-par p:last-child{
  max-width: 23rem;
  margin: 0 auto;
  padding: 1.5rem 0 0;
  line-height: 1;
  letter-spacing: 2px;
  font-size: 3rem;
  font-weight: bold;
  position: relative;
}
.foot-par p:last-child::before{
  content: "※";  
  font-size: 1.8rem;
  position: absolute;
  top: 10px;
  left: 75%;
}
.foot-par p:last-child::after{
  display: block;
  content: "";
  width: 16rem;
  border: 5px solid var(--orange);
}
.foot-par p:last-child span{
  padding: 0 1rem 0 0;
  font-size: 5rem;
  color: var(--orange);
}

footer ul + p{
  padding:1.5rem 0 3rem;
  color: #fff;
  font-size: 1.4rem;
}

/* コピーライト SP -------------- */
footer p.copy{
  padding: 1.5rem 0;
  text-align: center;
  color: #fff;
  background: #022b60;
  font-size: 1.2rem;
}


/*----------------------------------------------------
タブレット用 750- 
----------------------------------------------------*/
@media screen and (min-width:750px) {

  header nav.gNav .ham-gNav li a {
    padding: 1.8rem;
    font-size: 1.6rem;
  }
 
  /* ---------------
  footer 750  
  --------------- */ 
  footer ul + p{
    padding:2rem 0 3rem;
    font-size: 1.6rem;
  }

 


}


/*----------------------------------------------------
PC 1000- 
----------------------------------------------------*/
@media screen and (min-width:1000px) {

  /* ---------------
  header 1000
   --------------- */
  .sp-header-top {
    width: 100%;
    height: auto;
    position: static;
  }
  .sp-header-top h1 {
    width: 28rem;
    padding: 1rem 5rem 1rem 3rem;
  }

  /* ハンバーガーボタン 1000
  -------------------------- */
  button.gnavBtn {
    display: none;
  }


  /* ---------------
  footer 1000
   --------------- */
  footer {
    padding: 0;
  }

  /* 5%OFF 1000 -------------- */
  .foot-par{
    flex-direction: row;  
    margin: 0 0 2rem;
    text-align: left;
  }
  .foot-par p:first-child{
    font-size: 2.1rem;
  }
  .foot-par p:last-child{
    margin:0 0 0 1rem;
    padding:0;
  }
  .foot-par p:last-child::before{
    top: 0px;
    left: 76%;
  }



}

/*----------------------------------------------------
PC / タブレット用 1600- 
----------------------------------------------------*/
@media screen and (min-width:1800px) {
  
  .sp-header-top h1 {
    width: 38rem;
    padding: 2.5rem 0 3rem 3.5rem;
  }

}