* {
  font-family: 'ヒラギノ角ゴシック','Hiragino Sans',sans-serif;
}

html,
body {
  background: #E0E6EC;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

#screen {
  width: 200vw;
  display: flex;
  transition: transform .65s cubic-bezier(0.77, 0, 0.175, 1);
  transform: translate3d(0,0,0);
}
#screen.calling {
  transform: translate3d(-100vw,0,0);
}


article {
  width: 100vw;
  height: 100vh;
  min-width: 1024px;
  min-height: 768px;
}

#home {
  padding: 50px 0;
}

h1 {
  margin-bottom: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

h1 img {
  width: 650px;
}

.clock {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 50px;
}

.clock div {
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.clock .frame {
  width: 476px;
  height: 476px;
  background: #e0e6ec;
  filter: drop-shadow(-10px -10px 15px #fff);
}

.clock .frame .space_frame {
  width: 440px;
  height: 440px;
  background: #c3cbd7;
  box-shadow:0px 0px 30px 2px #0000000c inset;
}

.clock .frame .space_frame .space_frame_inner {
  position: relative;
  width: 420px;
  height: 420px;
  background: #ced6e2;
  box-shadow:0px 0px 30px 2px #0000000c inset;
}

.clock .frame .space_frame .space_frame_inner .inner_frame {
  width: 330px;
  height: 330px;
  background: #e0e6ec;
  filter: drop-shadow(-10px -10px 15px rgba(255, 255, 255, 0.7));
}

.clock .hand {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  height: 50%;
  width: 3px;
  background: #7E8A9A;
  transform-origin: top;
}

.clock .hand.hand__hour {
  height: 190px;
  transform: rotate(30deg);
}

.clock .hand.hand__minute {
  height: 210px;
  transform: rotate(45deg);
}

.clock .hand.hand__second {
  width: 1px;
  height: 210px;
  background: #50C1ED;
  transform: rotate(90deg);
}

.clock .digital_txt {
  color: #50C1ED;
  font-size: 50px;
}


.buttons {
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn {
  position: relative;
  width: 332px;
  height: 85px;
  background: transparent;
  font-weight: normal;
  font-size: 18px;
  letter-spacing: 0.04em;
  text-align: center;
  color: #7e8a9a;
  cursor: pointer;

  border: none;
  border-radius: 5px;
  background: #e0e6ec;
  box-shadow: -10px -10px 15px #fff;
}

.btn::after {
  position: absolute;
  top: 50%;
  right: 40px;
  display: block;
  content: "";
  width: 15px;
  height: 15px;
  border-top: 3px solid #50C1ED;
  border-right: 3px solid #50C1ED;
  transform-origin: top right;
  transform: rotate(45deg);
}

#calling {
  display: flex;
  align-items: center;
  justify-content: center;
}

#calling p {
  font-size: 32px;
  text-align: center;
  line-height: 1.5;
}