@charset "UTF-8";
/*********************************

 common setting

**********************************/
html {
  font-size: 100%; }

html, body {
  padding: 0;
  margin: 0;
  color: #442222;
  font-family: "メイリオ", "Meiryo", "游ゴシック", "Yu Gothic", YuGothic, "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro",  sans-serif;
  overflow: 'hidden';
  height: '100%'; }

body {
  position: relative;
  background-image: url(../img/comment/back.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-position: center top; }

.yugo {
  font-family: "游ゴシック", "Yu Gothic", YuGothic, "メイリオ", "Meiryo", sans-serif; }

.yumin {
  font-family: "游明朝体", "Yu Mincho", YuMincho, "メイリオ", "Meiryo", sans-serif; }

/*********************************

 containers

**********************************/
#container {
  width: 1200px;
  height: 1200px;
  margin: 0 auto;
  position: relative; }

h1, h2, p {
  background-repeat: no-repeat;
  background-size: contain;
  padding: 0;
  line-height: 1; }

h1 {
  background-image: url(../img/comment/logo.png);
  width: 530px;
  height: 101px;
  margin: 48px auto 0; }

h2 {
  background-image: url(../img/comment/txt.png);
  width: 428.5px;
  height: 132px;
  margin: -48px auto 0; }

p {
  text-align: center;
  margin: 0; }
  p > a {
    text-decoration: none;
    color: #fff;
    font-size: 18px;
    display: block;
    margin: 0 auto;
    width: 360px;
    height: 18px;
    padding: 7px 0 7px 4px;
    background-color: #29a0ea;
    border-radius: 32px;
    background-image: url(../img/comment/icon.png);
    background-size: 20px 20px;
    background-position: 10px center;
    background-repeat: no-repeat;
    transition: background-color 0.3s; }
    p > a:hover {
      background-color: #ffbb33; }

/*********************************

 balloon

**********************************/
.balloon {
  position: absolute;
  padding: 1em;
  border: 1px solid #ccc;
  background-color: #fff;
  display: inline-block;
  border-radius: 3px;
  /*animation-delay: 2s;*/
  /*animation-duration: 0.3s;*/
  max-width: 300px; }
  .balloon:before, .balloon:after {
    position: absolute;
    display: block;
    content: '';
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent; }
  .balloon:before {
    border-top: 10px solid #ccc;
    bottom: -10px; }
  .balloon:after {
    border-top: 10px solid #fff;
    bottom: -9px; }
  .balloon.center:before, .balloon.center:after {
    left: 50%;
    margin-left: -10px; }
  .balloon.right:before, .balloon.right:after {
    right: 0;
    margin-left: -10px; }
  .balloon.left:before, .balloon.left:after {
    left: 0;
    margin-right: -10px; }

.hidden {
  display: none !important; }

@keyframes x {
  0% {
    transform: translateX(0px); }
  100% {
    transform: translateX(-10px); } }
@keyframes y {
  0% {
    transform: translateY(0px); }
  100% {
    transform: translateY(-10px); } }
.swayX {
  animation: x 1s ease-in-out infinite alternate; }

.swayY {
  animation: y 1s ease-in-out infinite alternate; }