/* ========================
 Noto Serif
======================== */
@font-face {
  font-family: 'Noto Serif Japanese';
  font-style: normal;
  font-weight: 200;
  src: url('../fonts/NotoSerifCJKjp/NotoSerifCJKjp-ExtraLight.otf') format('opentype');
}
@font-face {
  font-family: 'Noto Serif Japanese';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/NotoSerifCJKjp/NotoSerifCJKjp-Light.otf') format('opentype');
}
@font-face {
  font-family: 'Noto Serif Japanese';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/NotoSerifCJKjp/NotoSerifCJKjp-Regular.otf') format('opentype');
}
@font-face {
  font-family: 'Noto Serif Japanese';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/NotoSerifCJKjp/NotoSerifCJKjp-Medium.otf') format('opentype');
}
@font-face {
  font-family: 'Noto Serif Japanese';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/NotoSerifCJKjp/NotoSerifCJKjp-SemiBold.otf') format('opentype');
}
@font-face {
   font-family: 'Noto Serif Japanese';
   font-style: normal;
   font-weight: 700;
  src: url('../fonts/NotoSerifCJKjp/NotoSerifCJKjp-Bold.otf') format('opentype');
}
@font-face {
  font-family: 'Noto Serif Japanese';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/NotoSerifCJKjp/NotoSerifCJKjp-Black.otf') format('opentype');
}

/* ========================
 Noto Sans
======================== */
@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

/* ========================
 reset
======================== */
ul {
    list-style: none;
    margin: 0;
}
a {
    text-decoration: none;
}
h1, h2, h3, h4, h5 {
    margin: 0;
}
address {
    font-style: normal;
}
img {
    -webkit-backface-visibility: hidden;
}

/* ========================
 body
======================== */
body {
    animation: fadeIn 1s ease 0s 1 normal;
    -webkit-animation: fadeIn 1s ease 0s 1 normal;
    font-family: "Noto Serif Japanese", serif;
    letter-spacing: 3px;
}
@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

/* ========================
 common
======================== */
p {
    line-height: 1.7em;
}
a img,
a section {
    transition: transform 0.5s linear;
    transform: scale(1.0);
}
a img:hover,
a section:hover{
	opacity: 0.7;
    transition: 1s;
    transform: scale(0.97);
}
ul a {
    position: relative;
    display: inline-block;
    text-decoration: none;
}
ul a::after {
    position: absolute;
    bottom: -4px;
    left: 0;
    content: '';
    width: 100%;
    height: 1px;
    background: #fff;
    transform: scale(0, 1);
    transform-origin: right top;
    transition: transform .3s;
}
ul a:hover::after {
    transform-origin: left top;
    transform: scale(1, 1);
}

/* ========================
 footer
======================== */
footer {
    background-color: #0D3246;
    width: 100%;
}
footer img {
    display: block;
    margin: 0 auto;
    padding: 25px 0 20px;
    width: 110px;
}
footer small {
    color: #fff;
    display: block;
    font-family: "Noto Sans Japanese", sans-serif;
    font-size: 8px;
    padding-bottom: 15px;
    text-align: center;
}

/* ========================
 Media Queries
======================== */
@media screen and (max-width:600px) {
footer small {
    line-height: 1.5em;
}
}