/* font face
------------------------------------------------------------------------------*/

@font-face {
  font-family: '';
  src: url();
}

/* keyframes
------------------------------------------------------------------------------*/

@keyframes fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-webkit-keyframes fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* global
------------------------------------------------------------------------------*/

html {
  font: 100%/1.2 Helvetica, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

img {
  border: 0;
}

a {
  outline: 0;
  text-decoration: none;
}

p {
  line-height: 1.6;
}

button,
input,
optgroup,
select,
textarea {
  color: inherit;
  font: inherit;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

.inner {
  margin: 0 auto;
  max-width: 1024px;
  overflow: hidden;
  position: relative;
}

.url {
  word-break: break-all;
}

.img {
  text-align: center;
}

.img img {
  max-width: 100%;
  vertical-align: top;
}

/* form
------------------------------------------------------------------------------*/

/* text
--------------------------------------*/

.input-text {
  background: #fff;
  border: #ccc solid 1px;
  border-radius: 2px;
  overflow: hidden;
  padding: 6px 24px 4px 8px;
  position: relative;
}

.input-text.focused {
  border-color: #34aadc;
}

.input-text>.ph {
  color: #ccc;
  display: inline-block;
  left: 8px;
  line-height: 1.2;
  position: absolute;
  top: 6px;
}

.input-text.focused>.ph,
.input-text.entered>.ph {
  display: none;
}

.input-text>input {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  line-height: 1.2;
  margin: 0;
  outline: 0;
  padding: 0;
  position: relative;
  width: 100%;
}

/* textarea
--------------------------------------*/

.textarea {
  background: #fff;
  border: #ccc solid 1px;
  border-radius: 2px;
  overflow: hidden;
  padding: 0 0 0 8px;
  position: relative;
}

.textarea.focused {
  border-color: #34aadc;
}

.textarea>.ph {
  color: #ccc;
  left: 8px;
  line-height: 1.4;
  padding: 8px 0;
  position: absolute;
  top: 0;
  width: 98%;
}

.textarea.focused>.ph,
.textarea.entered>.ph {
  display: none;
}

.textarea>textarea {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  height: 4.8em;
  line-height: 1.4;
  margin: 0;
  outline: 0;
  padding: 8px 1% 8px 0;
  position: relative;
  resize: none;
  width: 99%;
}

/* button
--------------------------------------*/

.button {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  outline: 0;
  padding: 0;
}

/* image
------------------------------------------------------------------------------*/

/* fit-img
--------------------------------------*/

.fit-img {
  height: 300px;
  overflow: hidden;
}

.fit-img>.f {
  height: 100%;
  text-align: center;
  width: 100%;
}

.fit-img>.f:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  width: 0;
}

.fit-img>.f>img {
  max-height: 100%;
  max-width: 100%;
  vertical-align: middle;
}