/* サーチボックス*/
.form__group {
    position: relative;
    padding: 20px 0 0;
    width: 100%;
    max-width: 180px;
  }
  
  .form__field {
    font-family: inherit;
    width: 100%;
    border: none;
    border-bottom: 2px solid #9b9b9b;
    outline: 0;
    font-size: 17px;
    color: black;
    padding: 7px 0;
    background: transparent;
    transition: border-color 0.2s;
    position: relative;
    left: 55px;
  }
  
  .form__field::placeholder {
    color: transparent;
  }
  
  .form__field:placeholder-shown ~ .form__label {
    font-size: 17px;
    cursor: text;
    top: 20px;
    left: 55px;
  }
  
  .form__label {
    position: absolute;
    top: 0;
    display: block;
    transition: 0.2s;
    font-size: 17px;
    color: #9b9b9b;
    pointer-events: none;
    left: 55px;
  }
  
  .form__field:focus {
    padding-bottom: 6px;
    font-weight: 700;
    border-width: 3px;
    border-image: linear-gradient(to right, #116399, #38caef);
    border-image-slice: 1;
  }
  
  .form__field:focus ~ .form__label {
    position: absolute;
    top: 0;
    display: block;
    transition: 0.2s;
    font-size: 17px;
    color: #38caef;
    font-weight: 700;
  }
  
  /* reset input */
  .form__field:required, .form__field:invalid {
    box-shadow: none;
  }

/* メニュー三本線*/

  .label-check {
    display: none;
  }
  
  .hamburger-label {
    width: 70px;
    height: 58px;
    display: block;
    cursor: pointer;
  }
  
  .hamburger-label div {
    width: 70px;
    height: 6px;
    background-color: black;
    position: absolute;
  }
  
  .line1 {
    transition: all .3s;
  }
  
  .line2 {
    margin: 18px 0 0 0;
    transition: 0.3s;
  }
  
  .line3 {
    margin: 36px 0 0 0;
    transition: 0.3s;
  }
  
  #label-check:checked + .hamburger-label .line1 {
    transform: rotate(35deg) scaleX(.55) translate(39px, -4.5px);
    border-radius: 50px 50px 50px 0;
  }
  
  #label-check:checked + .hamburger-label .line3 {
    transform: rotate(-35deg) scaleX(.55) translate(39px, 4.5px);
    border-radius: 0 50px 50px 50px;
  }
  
  #label-check:checked + .hamburger-label .line2 {
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
    width: 45px;
  }



  .iconbutton{
    position: absolute;
    size: 50px;
    width: 50px;
    height: 50px;
    top: 5px;
    left: 5px;

  }
  /*testbutton*/
  .btn {
 position: relative;
 font-size: 17px;
 text-transform: uppercase;
 text-decoration: none;
 padding: 1em 2.5em;
 display: inline-block;
 border-radius: 6em;
 transition: all .2s;
 border: none;
 font-family: inherit;
 font-weight: 500;
 color: black;
 background-color: white;
}

.btn:hover {
 transform: translateY(-3px);
 box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.btn:active {
 transform: translateY(-1px);
 box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.btn::after {
 content: "";
 display: inline-block;
 height: 100%;
 width: 100%;
 border-radius: 100px;
 position: absolute;
 top: 0;
 left: 0;
 z-index: -1;
 transition: all .4s;
}

.btn::after {
 background-color: #fff;
}

.btn:hover::after {
 transform: scaleX(1.4) scaleY(1.6);
 opacity: 0;
}


/*search button*/

.searchbutton:link,
.searchbutton:visited {
 text-transform: uppercase;
 text-decoration: none;
 color: rgb(27, 27, 27);
 padding: 10px 30px;
 border: 1px solid;
 border-radius: 1000px;
 display: inline-block;
 transition: all .2s;
 position: relative;
 position: relative;
 left: 55px;
 left: 245px;
 top: -50px
 ;
}

.searchbutton:hover {
 transform: translateY(-5px);
 box-shadow: 0 10px 20px rgba(27, 27, 27, .5);
}

.searchbutton:active {
 transform: translateY(-3px);
}

.searchbutton::after {
 content: "";
 display: inline-block;
 height: 100%;
 width: 100%;
 border-radius: 100px;
 top: 0;
 left: 0;
 position: absolute;
 z-index: -1;
 transition: all .3s;
}

.searchbutton:hover::after {
 background-color: rgb(0, 238, 255);
 transform: scaleX(1.4) scaleY(1.5);
 opacity: 0;
}






/*アイコン関係*/
.card {
  width: fit-content;
  height: fit-content;
  background-color: rgb(238, 238, 238);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 25px 25px;
  gap: 20px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.055);
}

/* for all social containers*/
.socialContainer {
  width: 52px;
  height: 52px;
  background-color: rgb(44, 44, 44);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition-duration: .3s;
  border-radius: 50%;
}
/* instagram*/
.containerOne:hover {
  background-color: #d62976;
  transition-duration: .3s;
}
/* twitter*/
.containerTwo:hover {
  background-color: #00acee;
  transition-duration: .3s;
}
/* linkdin*/
.containerThree:hover {
  background-color: #5360f9;
  transition-duration: .3s;
}
/* Whatsapp*/
.containerFour:hover {
  background-color: #128C7E;
  transition-duration: .3s;
}

.socialContainer:active {
  transform: scale(0.9);
  transition-duration: .3s;
}

.socialSvg {
  width: 17px;
}

.socialSvg path {
  fill: rgb(255, 255, 255);
}

.socialContainer:hover .socialSvg {
  animation: slide-in-top 0.3s both;
}

@keyframes slide-in-top {
  0% {
    transform: translateY(-50px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}


.libutton{
  list-style-type: none;
}

.menubutton{
  overflow: auto; /* 親要素の高さを確保するために追加 */
}

.item {
  float: left;
}