@charset "utf-8";

/* ============================================

   共通                                         */

/* --------------------------------------------
   common
----------------------------------------------- */

html, body, div, span,
h1, h2, h3, h4,
dl, dt, dd, ol, ul, li, p,
table, caption, tbody, thead, tfoot, tr, th, td,
a, strong, em, i, img {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 100%;
  vertical-align: baseline;
  outline: 0;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
          tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
  color: #000;
  font-size: 20px;
  line-height: 1.8;
  font-family: "A-OTF 新丸ゴ Pro", "A-OTF Shin Maru Go Pro";
  word-wrap: break-word;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
ruby, rb, rt {
  margin: 0;
  padding: 0;
  border: none;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}
ruby {
  display: inline-table;
  height: 1em;
  margin-bottom: .2em;
  text-indent: 0;
  vertical-align: text-bottom;
}
rb {
  display: table-row-group;
}
rt {
  display: table-header-group;
  font-size: .4em;
  line-height: 1.1;
}
rp {
  display: none;
}
ul, ol {
  list-style: none;
}
input[type="button"],
input[type="submit"],
input[type="reset"],
button {
  border: none;
  background: transparent;
  outline: none;
  cursor: pointer;
}
img {
  vertical-align: top;
  -webkit-backface-visibility: hidden;
}

/* --------------------------------------------
   style
----------------------------------------------- */

.wrapper {
  position: relative;
  width: 1920px;
  height: 1080px;
  margin: auto;
  overflow: hidden;
}
.bac-illust {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 120px;
}
.ttl-main {
  width: 1400px;
  height: 245px;
  margin: 0 auto;
}

/* ボタン */
.btn-home {
  position: absolute;
  top: 0;
  left: 0;
  width: 140px;
  height: 130px;
  overflow: hidden;
  background: url("../img/btn-home.png") no-repeat 0 top;
  line-height: 200;
}
.btn-home:active {
  background-position: 0 bottom;
}
.btn-home a {
  display: block;
  height: 100%;
}

/* 博士 */
.info {
  position: relative;
  z-index: 1;
  width: 1552px;
  height: 364px;
  margin: 0 auto;
}
.info-doctor {
  position: absolute;
  top: 0;
  right: 0;
  width: 433px;
  height: 654px;
  background: url("../img/img-doctor.png") no-repeat;
}

/* --------------------------------------------
   animation
----------------------------------------------- */

.info-doctor {
  -webkit-animation: fadeInUp 0.75s ease 0s;
          animation: fadeInUp 0.75s ease 0s;
}
.info-balloon {
  opacity: 0;
  -webkit-animation: bounceIn 0.75s ease-out 0.5s 1 forwards;
          animation: bounceIn 0.75s ease-out 0.5s 1 forwards;
}

@-webkit-keyframes fadeInUp{from{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes fadeInUp{from{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}

@-webkit-keyframes bounceIn{from,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215,0.61,0.355,1);animation-timing-function:cubic-bezier(0.215,0.61,0.355,1)}0%{opacity:0;-webkit-transform:scale3d(0.3,0.3,0.3);transform:scale3d(0.3,0.3,0.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(0.9,0.9,0.9);transform:scale3d(0.9,0.9,0.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(0.97,0.97,0.97);transform:scale3d(0.97,0.97,0.97)}to{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes bounceIn{from,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215,0.61,0.355,1);animation-timing-function:cubic-bezier(0.215,0.61,0.355,1)}0%{opacity:0;-webkit-transform:scale3d(0.3,0.3,0.3);transform:scale3d(0.3,0.3,0.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(0.9,0.9,0.9);transform:scale3d(0.9,0.9,0.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(0.97,0.97,0.97);transform:scale3d(0.97,0.97,0.97)}to{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}