@charset "utf-8";

.header-line{
  display:none !important;
}

.header.UpMove{
  animation: UpAnime 0.5s forwards;
}

.header.DownMove{
  animation: DownAnime 0.5s forwards;
}
@keyframes UpAnime{
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-100px);
  }
}
@keyframes DownAnime{
  from {
    opacity: 0;
    transform: translateY(-100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.header{
  position: fixed;
  z-index:9999;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #FFFFF5;
  transition: 0.3s;
}

.header-top{
  color:#fff;
  background-color: #F8B62A;
  padding:2px 2.5%;
  font-size:14px;
  font-weight:500;
}


.header-wrap{
  width: 100%;
  padding:0 5rem 0 2.5%;
  display: flex;
  justify-content: space-between;
  align-items:flex-start;
}

.header-logo{
  display: block;
  width: 230px;
}

.header-logo:hover{
  opacity:0.7;
}

.header_right{
  display: flex;
  flex-direction: row;
}

.header_right a{
  display: flex;
  align-items:center;
  gap:0.5rem;
  height:72px;
  color:#fff;
  background:#30C2FF;
  padding:0 1rem;
  font-size:clamp(1rem, 0.882rem + 0.39vw, 1.25rem);
  font-weight:bold;
}

.header_right a:hover{
  opacity:0.7;
}

.header_right a.free{
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

.header_right a.free .free-bg{
  font-size:11px;
  color:#30C2FF;
  background:#fff;
  padding:2px;
}

.header_right a.free div{
  display: flex;
  align-items:center;
  gap:0.5rem;
}

.header_right a.free div img{
  width:30px;
}
.header_right a.free div + p{
  font-size:9px;
}

.header_right a img{
  width:1rem;
}

.header_right a.header-mail{
  background:#F8B629;
}

.header_right a.header-mail img{
  width:18px;
}

.header_right a.header-line{
  border:2px solid #03C755;
  background:#fff;
  color: #03C755;
}

.header_right a.header-line img{
  width:24px;
}

.hamBtn {
  cursor: pointer;
  z-index: 9999;
  transition: all .5s;
  position: fixed;
  display: block;
  right: 0;
  top: 32px;
  width: 80px;
  height: 72px;
  background-color: #FFFFFF;
  border:2px solid #F8B62A;
  display: flex;
  flex-direction: column;
  justify-content: end;
  align-items: center;
  padding-bottom: 8px;
  gap:12px;
}

.hamBtn > p{
  color:#F8B62A;
  font-size:12px;
  font-weight:bold;
  line-height: 1;
}

.hamBar {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 40px;
  height: 24px;
}

.hamBar>div {
  position: absolute;
  right: 0;
  width: 100%;
  height:3px;
  background:#F8B62A;
  transition: .5s;
}


.hamBar>div:nth-child(1) {
  top: 0; 
}

.hamBar>div:nth-child(2) {
  top: 50%;
}

.hamBar>div:nth-child(3) {
  top: 100%;
}

.hamBar.active>div:nth-child(1) {
  top: 16px;
  transform: rotate(-30deg);
}

.hamBar.active>div:nth-child(2) {
  opacity: 0;
}

.hamBar.active>div:nth-child(3) {
  top: 16px;
  transform: rotate(30deg);
}


.sp__menu {
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0;
  width: 100%;
  height: 100vh;
  display:flex;
  justify-content: space-between;
  align-items:center;
  background:#FFFFF5;
  color: #554844;
  transition: 1s;
  z-index: 800;
  z-index:-100;
  padding: 0 15%;
}

.ham-left{
  width:400px;
}

.ham-left a + p{
  color:#F8B629;
  font-size:clamp(1rem, 0.818rem + 0.61vw, 1.5rem);
  margin:0 0 1rem;
}

.ham-right{
  width:50%;
  display: flex;
  flex-wrap: wrap;
  gap: 3rem 0;
  padding:3rem 0;
  border-bottom:1px solid #B4B4B4;
}

.ham-right a{
  width:50%;
  display: flex;
  align-items:center;
  gap:1rem;
  color:#6A6A6A;
  font-size:clamp(1rem, 0.909rem + 0.3vw, 1.25rem);
}

.ham-right a:hover{
  color:#F8B629;
}

.ham-right a:hover div{
  border-color:#F8B629;
  color:#F8B629;
}

.ham-right a div{
  color:#6A6A6A;
  border:1px solid #6A6A6A;
  border-radius:999vh;
  width:1.5rem;
  height:1.5rem;
  position: relative;
  transition:0.3s;
}

.ham-right a div::before{
  content:"＞";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.sp__menu.active {
  opacity: 1;
  visibility: visible;
  z-index:800;
}

.floating-banner {
  display:none;
  position: fixed;
  z-index: 100;
  bottom: 0;
  right: 0;
  width: 100vw;
}

.floating-banner   .header_right{
  display:flex;
}
.floating-banner   .header_right a{
  width: 50%;
  padding:0;
  justify-content: center;
  height: 64px;
}
.floating-banner .header_right a.free .free-bg{
  font-size: 9px;
}

.floating-banner .header_right a:nth-child(n + 2){
  width:50%;
  font-size:16px;
}

.sp-ham-text{
  display:none;
}

@media (max-width: 1280px) {
  .sp__menu{
    padding:0 10%;
  }
}

@media (max-width: 1279px) {
  .header_right{
    display:none;
  }
}

@media (max-width: 1024px) {
  .container{
    width:90%;
  }
  .hamBtn{
    width: 70px;
    height: 60px;
    padding-bottom: 4px;
    gap: 8px;
  }
  .hamBar{
    height: 20px;
  }
  .hamBar.active>div:nth-child(3),
  .hamBar.active>div:nth-child(1){
    top:12px;
  }
  .sp__menu{
    flex-direction: column;
    overflow: scroll;
    justify-content: flex-start;
    padding: 7rem 10% 5rem;
  }
  .ham-left a{
    width:80%;
    margin:0 auto;
  }
  .ham-right {
    width: 500px;
    gap: 2rem 0;
  }
  .header-logo{
    width:190px;
  }
}

@media (max-width: 1024px) {
  @media (min-height: 900px) {
    .sp__menu{
      flex-direction: column;
      justify-content: center;
    }
  }
}

@media (max-width: 767px) {
  .floating-banner{
    display:block;
  }
  .header-logo {
    width: 160px;
    height: 48px;
  }
  .ham-right{
    width:100%;
    padding: 0.5rem 0 2.5rem;
  }
  .hamBtn {
    width: 48px;
    height: 48px;
    padding-bottom: 4px;
    gap: 6px;
    top: 0;
  }
  .hamBtn > p{
    font-size: 9px;
  }
  .hamBar {
    height: 15px;
    width: 30px;
  }
  .hamBar>div{
    height: 2px;
  }
  .hamBar.active>div:nth-child(3), .hamBar.active>div:nth-child(1) {
    top: 5px;
  }
  .header-top,
  .ham-left >p:last-child {
    display:none;
  }
  .ham-left{
    width:180px;
  }
  .sp__menu{
    padding: 3rem 5% 2rem;
  }
  .ham-right a{
    font-size:14px;
    gap: 0.5rem;
  }
  .ham-left a + p{
    font-size:12px;
  }
  .ham-right a div{
    width: 20px;
    height: 20px;
    min-height: auto !important;
  }
  .sp-ham-text{
    display:block;
    width: 100%;
    margin: 1rem 0 0;
    font-size:12px;
  }

  .sp-ham-text p:first-child{
    color:#F8B629;
    font-size:14px;
  }
  .header_right a.header-line img,
  .header_right a.header-mail img{
    width:1.5rem;
  }
}


#header.UpMove{
  animation: UpAnime 0.5s forwards;
}

@keyframes UpAnime{
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-100px);
  }
}

/*　下に下がる動き　*/

#header.DownMove{
  animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
    opacity: 0;
    transform: translateY(-100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}