@charset "utf-8";
/*

header:ex(.h-logo)
fotterなど:ex(.f-logo)

*/






.color-wrap {
    margin-top: 120px;
}
.color-wrap li {
    margin-bottom: 80px;
}
.drop-shadow {
/*    -webkit-filter: drop-shadow(0px 0px 5px rgba(0,0,0,.4));
    filter: drop-shadow(0px 0px 5px rgba(0,0,0,.2));*/
    box-shadow: 0 0px 10px 0 #e4e4e4;
    transition: box-shadow 0.1s;
    box-sizing: border-box;
}
.color-btn {
  display: flex;
  margin: 0 auto;
  padding: 0;
  border: 0;
  outline: 0;
  cursor: pointer;
  background: transparent;
  overflow: hidden;
}

button {
  display: flex;
  cursor: pointer;
  border: 0;
  background: transparent;
  outline: 0;
  overflow: hidden;
}
button .icon {
  position: relative;
  background: #002008;
  line-height: 60px;
  width: 200px;
  height: 60px;
  text-align: center;
  color: #fff;
  font-size: 18px;
  transition: .2s color;
}
/*button .icon .fa {
  width: 60px;
  transition: .2s all;
}
button .icon .fa-check {
  color: #38B87C;
}
button .icon .fa-question {
  color: #2492FF;
}*/
button .icon:after {
  content: ' ';
  display: block;
  position: absolute;
  width: 5px;
  height: 5px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  background: #002008;
  top: 24.5px;
  right: 1px;
  transition: .2s right;
  z-index: 1;
}
button .text {
  position: relative;
  width: 0;
  height: 60px;
  overflow: hidden;
  font-family: "Roboto", sans-serif;
  background: #fff;
  text-align: center;
  line-height: 60px;
  color: #000;
  font-weight: 300;
  transition: .2s all;
  font-size: 18px;
}
button .text span {
  width: 100%;
  opacity: 0;
  position: absolute;
  top: -60px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  transition: .3s all;
}
button:click .icon {
  color: #F34541;
}
button:click .icon:after {
  right: -2px;
}
button:click .text {
  width: 240px;
}
button:click .text span {
  opacity: 1;
  top: 0;
}
button.confirm .icon {
}
button.confirm .icon .fa {
  -webkit-transform: translateY(-60px);
          transform: translateY(-60px);
}
button.confirm .icon:after {
  right: -2px;
}
button.confirm .text {
  background: #fff;
  width: 240px;
}
button.confirm .text span {
  opacity: 1;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
}
button.done .icon {
}
button.done .icon .fa {
  -webkit-transform: translateY(-60px);
          transform: translateY(-60px);
}
button.done .icon:after {
  right: -2px;
}
button.done .text {
  background: #fff;
  width: 240px;
}
button.done .text span {
  opacity: 1;
  top: 0;
}

@-webkit-keyframes fadeInZoom {
  0% {
    opacity: 0;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes fadeInZoom {
  0% {
    opacity: 0;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}







.color-002008 .icon,
.color-002008 .icon:after {
  background: #002008;
}
.color-fef7f1 .icon,
.color-fef7f1 .icon:after {
  background: #FEF7F1;
}
.color-fdfcf9 .icon,
.color-fdfcf9 .icon:after {
  background: #FDFCF9;
}
.color-c0cad5 .icon,
.color-c0cad5 .icon:after {
  background: #C0CAD5;
}
.color-9f9b99 .icon,
.color-9f9b99 .icon:after {
  background: #888e7e;
}
.color-fef6d4 .icon,
.color-fef6d4 .icon:after {
  background: #FEF6D4;
}
.color-c6baa8 .icon,
.color-c6baa8 .icon:after {
  background: #C6BAA8;
}
.color-ffeeB4 .icon,
.color-ffeeB4 .icon:after {
  background: #c89932;
}
.color-beb49a .icon,
.color-beb49a .icon:after {
  background: #BEB49A;
}
.color-d9bb9d .icon,
.color-d9bb9d .icon:after {
  background: #D9BB9D;
}
.color-542e24 .icon,
.color-542e24 .icon:after {
  background: #542E24;
}
.color-695528 .icon,
.color-695528 .icon:after {
  background: #695528;
}
.color-2a3243 .icon,
.color-2a3243 .icon:after {
  background: #2A3243;
}
.color-44291a .icon,
.color-44291a .icon:after {
  background: #44291A;
}
.color-3b3634 .icon,
.color-3b3634 .icon:after {
  background: #3B3634;
}
.color-090605 .icon,
.color-090605 .icon:after {
  background: #090605;
}