/*Button*/
@media(max-width: 700px){
  .btnDiv{
    display: none;
  }
  .buttonn{
    border-radius: 17px;
    padding: 5px;
    width: 120px;
    height: 35px;
    background-color: transparent;
    color: white;
    border-color: white;
    border-style:solid;
  }
}
@media(min-width: 700px){
  .buttonn{
    display: none;
  }
  .btnDiv{
    width: 150px;
    height: 40px;
    z-index: 20;
}
.type--B{
   --line_color : white;
   --back_color : #F6E6CB;
 }
 .button{
   position : relative ;
   z-index : 0 ;
   width : 240px ;
   height : 56px ;
   text-decoration : none ;
   font-size : 14px ; 
   font-weight : bold ;
   color : var(--line_color) ;
   letter-spacing : 2px ;
   transition : all .3s ease ;
 }
 .button__text{
   display : flex ;
   justify-content : center ;
   align-items : center ;
   width : 100% ;
   height : 100% ;
 }
 .button::before,
 .button::after,
 .button__text::before,
 .button__text::after{
   content : '' ;
   position : absolute ;
   height : 3px ;
   border-radius : 2px ;
   background : var(--line_color) ;
   transition : all .5s ease ;
 }
 .button::before{
   top : 0 ;
   left : 54px ;
   width : calc( 100% - 56px * 2 - 16px ) ;
 }
 .button::after{
   top : 0 ;
   right : 54px ;
   width : 8px ;
 }
 .button__text::before{
   bottom : 0 ;
   right : 54px ;
   width : calc( 100% - 56px * 2 - 16px ) ;
 }
 .button__text::after{
   bottom : 0 ;
   left : 54px ;
   width : 8px ;
 }
 .button__line{
   position : absolute ;
   top : 0 ;
   width : 56px ;
   height : 100% ;
   overflow : hidden ;
 }
 .button__line::before{
   content : '' ;
   position : absolute ;
   top : 0 ;
   width : 150% ;
   height : 100% ;
   box-sizing : border-box ;
   border-radius : 300px ;
   border : solid 3px var(--line_color) ;
 }
 .button__line:nth-child(1),
 .button__line:nth-child(1)::before{
   left : 0 ;
 }
 .button__line:nth-child(2),
 .button__line:nth-child(2)::before{
   right : 0 ;
 }
 .button:hover{
   letter-spacing : 6px ;
 }
 .button:hover::before,
 .button:hover .button__text::before{
   width : 8px ;
 }
 .button:hover::after,
 .button:hover .button__text::after{
   width : calc( 100% - 56px * 2 - 16px ) ;
 }
 .button__drow1,
 .button__drow2{
   position : absolute ;
   z-index : -1 ;
   border-radius : 16px ;
   transform-origin : 16px 16px ;
 }
 .button__drow1{
   top : -26px ;
   left : 20px ;
   width : 22px ;
   height : 0;
   transform : rotate( 30deg ) ;
 }
 .button__drow2{
   top : 44px ;
   left : 77px ;
   width : 32px ;
   height : 0 ;
   transform : rotate(-127deg ) ;
 }
 .button__drow1::before,
 .button__drow1::after,
 .button__drow2::before,
 .button__drow2::after{
   content : '' ;
   position : absolute ;
 }
 .button__drow1::before{
   bottom : 0 ;
   left : 0 ;
   width : 0 ;
   height : 32px ;
   border-radius : 16px ;
   transform-origin : 16px 16px ;
   transform : rotate( -60deg ) ;
 }
 .button__drow1::after{
   top : -10px ;
   left : 45px ;
   width : 0 ;
   height : 32px ;
   border-radius : 16px ;
   transform-origin : 16px 16px ;
   transform : rotate( 69deg ) ;
 }
 .button__drow2::before{
   bottom : 0 ;
   left : 0 ;
   width : 0 ;
   height : 32px ;
   border-radius : 16px ;
   transform-origin : 16px 16px ;
   transform : rotate( -146deg ) ;
 }
 .button__drow2::after{
   bottom : 26px ;
   left : -40px ;
   width : 0 ;
   height : 32px ;
   border-radius : 16px ;
   transform-origin : 16px 16px ;
   transform : rotate( -262deg ) ;
 }
 .button__drow1,
 .button__drow1::before,
 .button__drow1::after,
 .button__drow2,
 .button__drow2::before,
 .button__drow2::after{
   background : var( --back_color ) ;
 }
 .button:hover .button__drow1{
   animation : drow1 ease-in .06s ;
   animation-fill-mode : forwards ;
 }
 .button:hover .button__drow1::before{
   animation : drow2 linear .08s .06s ;
   animation-fill-mode : forwards ;
 }
 .button:hover .button__drow1::after{
   animation : drow3 linear .03s .14s ;
   animation-fill-mode : forwards ;
 }
 .button:hover .button__drow2{
   animation : drow4 linear .06s .2s ;
   animation-fill-mode : forwards ;
 }
 .button:hover .button__drow2::before{
   animation : drow3 linear .03s .26s ;
   animation-fill-mode : forwards ;
 }
 .button:hover .button__drow2::after{
   animation : drow5 linear .06s .32s ;
   animation-fill-mode : forwards ;
 }
 @keyframes drow1{
   0%   { height : 0 ; }
   100% { height : 100px ; }
 }
 @keyframes drow2{
   0%   { width : 0 ; opacity : 0 ;}
   10%  { opacity : 0 ;}
   11%  { opacity : 1 ;}
   100% { width : 120px ; }
 }
 @keyframes drow3{
   0%   { width : 0 ; }
   100% { width : 80px ; }
 }
 @keyframes drow4{
   0%   { height : 0 ; }
   100% { height : 120px ; }
 }
 @keyframes drow5{
   0%   { width : 0 ; }
   100% { width : 124px ; }
 }
 .container{
   width : 100% ;
   height : 300px ;
   display : flex ;
   flex-direction : column ;
   justify-content : center ;
   align-items : center ;
 }
 .button:not(:last-child){
 margin-bottom : 64px ;
 }
}