/**▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩✼　メニュー　✼▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩**/

header {
  position: fixed;
  width: 100vw;
height: 50px;
  top: 0;
  z-index: 90;
}


/**▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩✼　メニュー　✼▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩**/


.menu {
  filter: url("#shadowed-goo");
}

.menu-item, .menu-open-button {
    font-size: 0.1em;
    font-family: "Berkshire Swash", 'Tangerine', sans-serif;
    letter-spacing: 0.05em;
    background: #BDA76D;        /*色調整_ボタン背景色*/
    border-radius: 100%;
    width: 50px;               /*調整_メニュー◯サイズ*/
    height: 10px;
    padding-bottom: 50px;
    position: absolute;
    color: white;
    text-align: center;
    line-height: 80px;
    transform: translate3d(0, 0, 0);
    transition: transform linear 200ms;
}

.menu-open {
  display: none;
}

.hamburger {
  width: 25px;
  height: 3px;
  background: white;
  display: block;
  position: fixed;
  top: 50%;
  left: 50%;
  margin-left: -12.5px;
  margin-top: -1.5px;
  transition: transform 200ms;
}

.hamburger-1 {
  transform: translate3d(0, -8px, 0);
}

.hamburger-2 {
  transform: translate3d(0, 0, 0);
}

.hamburger-3 {
  transform: translate3d(0, 8px, 0);
}

.menu-open:checked + .menu-open-button .hamburger-1 {
  transform: translate3d(0, 0, 0) rotate(45deg);
}
.menu-open:checked + .menu-open-button .hamburger-2 {
  transform: translate3d(0, 0, 0) scale(0.1, 1);
}
.menu-open:checked + .menu-open-button .hamburger-3 {
  transform: translate3d(0, 0, 0) rotate(-45deg);
}

.menu {
  position: absolute;
  left: 49.25vw;
  padding-top: -5px;
  padding-left: 150px;
  box-sizing: border-box;
  font-size: 1em;
  text-align: left;
}

.menu-item:hover {
    background: #ffed8c;        /*色調整_ホバーボタン背景色*/
    color: #6D4040;             /*色調整_ホバーボタン文字色*/
    text-decoration:none;
    transition-property: color,background;
    transition-duration: 200ms;
    transition: ease-out;
    cursor: crosshair;
}

.menu-item:nth-child(3) {
  transition-duration: 250ms;
}
.menu-item:nth-child(4) {
  transition-duration: 190ms;
}
.menu-item:nth-child(5) {
  transition-duration: 130ms;
}
.menu-item:nth-child(6) {
  transition-duration: 70ms;
}
.menu-item:nth-child(7) {
  transition-duration: 130ms;
}
.menu-item:nth-child(8) {
  transition-duration: 190ms;
}
.menu-item:nth-child(9) {
  transition-duration: 250ms;
}

 

.menu-open-button {
  z-index: 100;
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition-duration: 400ms;
  transform: scale(1.1, 1.1) translate3d(0, 0, 0);
  cursor: crosshair;
}

.menu-open-button:hover {
  transform: scale(1.2, 1.2) translate3d(0, 0, 0);
}

.menu-open:checked + .menu-open-button {
  transition-timing-function: linear;
  transition-duration: 200ms;
  transform: scale(0.8, 0.8) translate3d(0, 0, 0);
}

.menu-open:checked ~ .menu-item {
    font-size: 0.7em;
        border-radius: 50px;
    width: 80px;           /*調整_メニュー◯サイズ_展開状態*/
    height: 80px;           /*調整_メニュー◯サイズ_展開状態*/
  transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
}

/**▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩✼　メニュボタンここから　✼▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩**/

.menu-open:checked ~ .menu-item:nth-child(3) {
  transition-duration: 800ms;
  transform: translate3d(-20px, 50px, 0);　      /**　右上からx,y　**/
}
.menu-open:checked ~ .menu-item:nth-child(4) {
  transition-duration: 700ms;
  transform: translate3d(-20px, 120px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(5) {
  transition-duration: 600ms;
  transform: translate3d(-20px, 195px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(6) {
  transition-duration: 500ms;
  transform: translate3d(-20px, 266px, 0);      /**　真ん中x,y　**/
}
.menu-open:checked ~ .menu-item:nth-child(7) {
  transition-duration: 600ms;
  transform: translate3d(-20px, 338px, 0);    
}

.menu-open:checked ~ .menu-item:nth-child(8) {
  transition-duration: 700ms;
  transform: translate3d(-20px, 413px, 0);
}

.menu-open:checked ~ .menu-item:nth-child(9) {
  transition-duration: 800ms;
  transform: translate3d(-20px, 483px, 0);
}



/**▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩✼　くるくるボタンここから/ボタンフォントはtext.css　✼▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩**/


.top_mar{margin-top: 0.1em; }




.col {
  height: 100%;
}

div[class*=btncon] {
  text-align: center;
  width: 30%;
  height: 33%;
  display: flex;
  justify-content: center;
  align-items: center;
   box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
   7px 7px 20px 0px rgba(0,0,0,.1),
   4px 4px 5px 0px rgba(0,0,0,.1);
}


.btncon-2 { background: #BDA76D; 
             border-radius: 30px;}        /*色調整_ボタン背景色*/
.btncon-2:hover { 
        background: #7C50ED;
        transition: 1s;}  


/*
 BUTTON STYLING
*/


.btn-two a:link { color:#FEFCFA; }
.btn-two a:visited { color:#FEFCFA; }
.btn-two a:hover { color:#6124F0; }
.btn-two a:active { color:#FEFCFA; }

.btn {  /*ボタン白1px線色*/
  position: relative;
  color: #FEFCFA;
  width: 256px;        /*サイズ調整_ボタン白1px線色*/
  height: 64px;
  line-height: 64px;
  transition: all 0.3s;
  span {
    transition: all 0.3s;
    tranform: scale(1, 1);
  }
}

.btn::before, .btn::after {     /*ボタン白1px線色*/
  content: '';
  position: absolute;
  transition: all 0.3s;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}


/* BTN TWO */
.btn-two::before, .btn-two::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0;
  left: 0;
  z-index: 1;
  transition: all 0.3s;
  border: 1px solid rgba(255, 255, 255, 0.5);
          border-radius: 30px;             /*形状調整_通常時_白ボタン1px形状*/
}

.btn-two:hover::after {
  animation-name: rotatecw;
    border-radius: 0px;         /*形状調整_くるくる時_白ボタン1px形状*/
  animation-duration: 2s;
}
.btn-two:hover::before {
  animation-name: rotateccw; 
    border-radius: 0px;         /*形状調整_くるくる時_白ボタン1px形状*/
  animation-duration: 3s;
}



/**---------------✼　場所調整_くるくる◇左から設定(pc/sp)　✼---------------**/

@media screen and (min-width: 1200px){  /* PC用 */
.btn-two:hover::after, .btn-two:hover::before {
  left: 64px;        /*場所調整_くるくる◇左から*/
  width: 64px;
  
  animation-iteration-count: infinite;
  animation-timing-function: linear;
    }}

@media screen and (max-width: 1200px){  /* SP用 */
.btn-two:hover::after, .btn-two:hover::before {
  left: 30px;        /*場所調整_くるくる◇左から*/
  width: 64px;
  
  animation-iteration-count: infinite;
  animation-timing-function: linear;
    }}


/**---------------✼　article設定(pc/sp)　✼---------------**/


@keyframes rotatecw {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}

@keyframes rotateccw {
    from {transform: rotate(0deg);}
    to {transform: rotate(-360deg);}
}



/**▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩✼　シンプルボタンここから　✼▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩**/


button {
  margin: 20px;
}
.custom-btn {
  width: 130px;
  height: 40px;
  color: #524039;
  border-radius: 10px;
  padding: 10px 25px;
  font-weight: 500;
  background: rgba(255,255,255,0);
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
   box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
   7px 7px 20px 0px rgba(0,0,0,.1),
   4px 4px 5px 0px rgba(0,0,0,.1);
  outline: none;
}




/* 8 */
.btn-8 {
  background-color: rgba(141, 139, 226, 0);
    background-image: linear-gradient(57deg, #BDA76D 14%, rgba(253, 187, 203, 0) 86%);              /*色調整_ボタン背景色*/
  line-height: 42px;
  padding: 0;
  border: none;
}
.btn-8 span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.btn-8:before,
.btn-8:after {
  position: absolute;
  content: "";
  right: 0;
  bottom: 0;
  background: #B18396;       /*色調整_ボタン文字色*/
  /*box-shadow:  4px 4px 6px 0 rgba(255,255,255,.5),
              -4px -4px 6px 0 rgba(116, 125, 136, .2), 
    inset -4px -4px 6px 0 rgba(255,255,255,.5),
    inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/
  transition: all 0.3s ease;
}
.btn-8:before{
   height: 0%;
   width: 2px;
}
.btn-8:after {
  width: 0%;
  height: 2px;
}
.btn-8:hover:before {
  height: 100%;
}
.btn-8:hover:after {
  width: 100%;
}
.btn-8:hover{
  background: transparent;
}
.btn-8 span:hover{
  color: #B18396;        /*色調整_ボタン文字色*/
}
.btn-8 span:before,
.btn-8 span:after {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  background: #B18396;       /*色調整_ボタン背景色*/
  /*box-shadow:  4px 4px 6px 0 rgba(255,255,255,.5),
              -4px -4px 6px 0 rgba(116, 125, 136, .2), 
    inset -4px -4px 6px 0 rgba(255,255,255,.5),
    inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/
  transition: all 0.3s ease;
}
.btn-8 span:before {
  width: 2px;
  height: 0%;
}
.btn-8 span:after {
  height: 2px;
  width: 0%;
}
.btn-8 span:hover:before {
  height: 100%;
}
.btn-8 span:hover:after {
  width: 100%;
}
  


/**▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩✼　グラデボタンここから　✼▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩**/