@charset "utf-8";




button { border: none; display: block; }
a { text-decoration: none; display: block; }



/* Metal ------------------------- */

.metal {
  position: relative;
  margin: 40px auto;
  outline: none;

  font-weight: bold;
  line-height: 1;
  font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
  text-align: center;
  color: hsla(0,0%,20%,1);
  text-shadow: hsla(0,0%,40%,.5) 0 -1px 0, hsla(0,0%,100%,.6) 0 2px 1px;

  background-color: hsl(0,0%,90%);
  box-shadow: inset hsla(0,0%,15%,  1) 0  0px 0px 4px, /* border */
    inset hsla(0,0%,15%, .8) 0 -1px 5px 4px, /* soft SD */
    inset hsla(0,0%,0%, .25) 0 -1px 0px 7px, /* bottom SD */
    inset hsla(0,0%,100%,.7) 0  2px 1px 7px, /* top HL */

    hsla(0,0%, 0%,.15) 0 -5px 6px 4px, /* outer SD */
    hsla(0,0%,100%,.5) 0  5px 6px 4px; /* outer HL */

  transition: color .2s;
}



/* Radial ------------------------- */

.radial.metal {
  width: 160px;
  height: 160px;
  line-height: 160px;
  border-radius: 50%;
  background-image: -webkit-radial-gradient(  50%   0%,  8% 50%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),
    -webkit-radial-gradient(  50% 100%, 12% 50%, hsla(0,0%,100%,.6) 0%, hsla(0,0%,100%,0) 100%),
    -webkit-radial-gradient(   0%  50%, 50%  7%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),
    -webkit-radial-gradient( 100%  50%, 50%  5%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),

    -webkit-repeating-radial-gradient( 50% 50%, 100% 100%, hsla(0,0%,  0%,0) 0%, hsla(0,0%,  0%,0)   3%, hsla(0,0%,  0%,.1) 3.5%),
    -webkit-repeating-radial-gradient( 50% 50%, 100% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0)   6%, hsla(0,0%,100%,.1) 7.5%),
    -webkit-repeating-radial-gradient( 50% 50%, 100% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.2) 2.2%),

    -webkit-radial-gradient( 50% 50%, 200% 50%, hsla(0,0%,90%,1) 5%, hsla(0,0%,85%,1) 30%, hsla(0,0%,60%,1) 100%);
}


.metal.radial:before, .metal.radial:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: inherit;
  height: inherit;
  border-radius: inherit;

  /* fake conical gradients */
  background-image: -webkit-radial-gradient(  50%   0%, 10% 50%, hsla(0,0%,0%,.1) 0%, hsla(0,0%,0%,0) 100%),
    -webkit-radial-gradient(  50% 100%, 10% 50%, hsla(0,0%,0%,.1) 0%, hsla(0,0%,0%,0) 100%),
    -webkit-radial-gradient(   0%  50%, 50% 10%, hsla(0,0%,0%,.1) 0%, hsla(0,0%,0%,0) 100%),
    -webkit-radial-gradient( 100%  50%, 50% 06%, hsla(0,0%,0%,.1) 0%, hsla(0,0%,0%,0) 100%);
}
.metal.radial:before { transform: rotate( 65deg); }
.metal.radial:after { transform: rotate(-65deg); }




/* Linear ------------------------- */

.metal.linear {
  width: 50%;
  padding: 0 0 0.2rem 0;
  font-size: 2.5em;
  height: 80px;
  border-radius: .5em;

  background-image:
    /* 細いハイライト */
    repeating-linear-gradient(
      90deg,
      #ffffff00 0px,
      #ffffff00 6px,
      #ffffff1a 7.5px
    ),
    /* 影の筋 */
    repeating-linear-gradient(
      90deg,
      #00000000 0px,
      #00000000 4px,
      #00000008 4.5px
    ),
    /* 太めの反射 */
    repeating-linear-gradient(
      90deg,
      #ffffff00 0px,
      #ffffff00 14px,
      #ffffff26 16px
    ),
    /* 下地グラデーション（←これは繰り返さない） */
    linear-gradient(
      180deg,
      #c7c7c7 0%,
      #eeeeee 47%,
      #cfcfcf 53%,
      #b5b5b5 100%
    );

  background-repeat:
    repeat,
    repeat,
    repeat,
    no-repeat;

  background-size:
    auto,
    auto,
    auto,
    100% 100%;
}

/* Oval ------------------------- */

.metal.linear.oval {
  margin-top: 100px;
  width: 70px;
  height: 60px;
  line-height: 60px !important;
  border-radius: 50%;
  font: italic bold 3em/50px Georgia, "Times New Roman", Times, serif;
}




/* active ------------------------- */

.metal:hover {
  color: hsl(210, 100%, 40%);
  text-shadow: hsla(210,100%,20%,.3) 0 -1px 0, hsl(210,100%,85%) 0 2px 1px, hsla(200,100%,80%,1) 0 0 5px, hsla(210,100%,50%,.6) 0 0 20px;
  box-shadow:
    inset hsla(210,100%,30%,  1) 0  0px 0px 4px, /* border */
    inset hsla(210,100%,15%, .4) 0 -1px 5px 4px, /* soft SD */
    inset hsla(210,100%,20%,.25) 0 -1px 0px 7px, /* bottom SD */
    inset hsla(210,100%,100%,.7) 0  2px 1px 7px, /* top HL */

    hsla(210,100%,75%, .8) 0  0px 3px 2px, /* outer SD */
    hsla(210,50%,40%, .25) 0 -5px 6px 4px, /* outer SD */
    hsla(210,80%,95%,   1) 0  5px 6px 4px; /* outer HL */
}




/* ########### 599px以下 ########### */
@media (max-width: 599px) {

  .metal{
    margin: 40px auto 20px auto;
  }

  .metal.linear {
    width: 90%;
    transform: scale(0.5);
    font-size: 2rem;
  }

}



/* ########### 600px以上～768px以下 ########### */
@media (min-width: 600px) and (max-width: 768px) {

  .linear{
    transform: scale(0.8);
  }



}



/* ########### 769px以上 ########### */
@media (min-width: 769px) {}



/* ########### 1000px以上 ########### */
@media (min-width: 1000px) {}