@charset "utf-8";
* {
 margin: 0;
 padding: 0;
}
body {
 animation: a 3s ease 0 1 normal;
 -webkit-animation: a 3s ease 0 1 normal;
}
@keyframes a {
 from {
  opacity: 0;
 }
 to {
  opacity: 1;
 }
}
@-webkit-keyframes a {
 from {
  opacity: 0;
 }
 to {
  opacity: 1;
 }
}
html {
 font-family: Sorts Mill Goudy, Hannari, Noto Sans JP, serif;
 font-style: italic;
 font-size: calc(512.5% *(100% - 640px)/360);
 line-height: 1.5;
 letter-spacing: 0.25em;
 background-color: rgba(28, 40, 61, 0.6);
}
.wrap {
 min-width: 100%;
 min-height: 100%;
}
body, html {
 height: 100vh;
}
a, html {
 color: #fff;
}
p {
 font-family: Lora, Noto Sans JP, sans-serif;
 font-style: italic;
}
a, h1, p {
 text-align: center;
 vertical-align: middle;
}
img {
 border: 0;
}
ol, ul {
 list-style-type: none;
}
a {
 display: block;
 text-decoration: none;
 cursor: pointer;
}
a:hover, a:hover:before {
 -webkit-transition: all 0.3s ease;
 -ms-transition: all 0.3s ease;
 transition: all 0.3s ease;
}
@font-face {
 font-family: icomoon;
 src: url(fonts/icomoon.eot?62ohtp);
 src: url('fonts/icomoon.eot?62ohtp#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?62ohtp') format('truetype'), url('fonts/icomoon.woff?62ohtp') format('woff'), url('fonts/icomoon.svg?62ohtp#icomoon') format('svg');
 font-weight: 400;
 font-style: normal;
}
[class*=" icon-"], [class^=icon-] {
 font-family: icomoon!important;
 speak: none;
 font-style: normal;
 font-weight: 400;
 font-variant: normal;
 text-transform: none;
 line-height: 1;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}
.icon-home:before {
 content: "\e900";
}
.icon-home {
 width: 5pc;
 height: 50px;
 line-height: 50px;
 padding: 0 15px;
 margin-left: 10px;
 font-size: 160%;
}
.icon-home:hover {
 background-color: hsla(60, 88%, 97%, 0.7);
 color: #1c283d;
 border-radius: 5px;
 -webkit-transition: background-color 0.3s;
 -ms-transition: background-color 0.3s;
 transition: background-color 0.3s;
}
.inner {
 max-width: 1000px;
 margin: 0 auto;
}
.header {
 position: fixed;
 top: 0;
 left: 0;
 z-index: 1;
 width: 100%;
 height: auto;
 background-color: rgba(28, 40, 61, 0.6);
}
.title {
 margin-top: 50px;
 margin-bottom: 20px;
 text-shadow: 1px 1px 0 #fff;
 color: #1c283d;
}
.title .inner {
 padding: 15px 10px;
}
.main {
 margin-bottom: 33px;
 font-family: serif;
}
.main ul {
 overflow: hidden;
}
.main ul li {
 float: left;
 position: relative;
}
.main ul li:hover {
 cursor: pointer;
}
.main ul li a {
 line-height: 0;
}
.main ul li .mask {
 width: 100%;
 height: 100%;
 max-width: 300px;
 max-height: 75pt;
 position: absolute;
 top: 0;
 left: 0;
 background-color: rgba(28, 40, 61, 0.8);
 transition: all 0.4s ease;
 transform: scale(0);
}
.main ul li:hover .mask {
 transform: scale(1);
}
.main ul li .caption {
 position: absolute;
 top: 50%;
 left: 0;
 right: 0;
 text-align: center;
 transform: translateY(-50%);
}
.main ul li img {
 opacity: 0.9;
}
.footer {
 width: 100%;
 margin-top: 35px;
 line-height: 2pc;
 text-align: center;
 font-size: 70%;
 position: relative;
 position: fixed;
 bottom: 0;
 right: 0;
 background-color: rgba(28, 40, 61, 0.7);
}
.pagetop a {
 width: 70px;
 height: 70px;
 line-height: 5pc;
 border-radius: 35px;
 background-color: rgba(28, 40, 61, 0.6);
}
.pagetop a:before {
 content: "";
 display: block;
 width: 11px;
 height: 11px;
 border-top: 3px solid #fefeef;
 border-right: 3px solid #fefeef;
 -webkit-transform: rotate(-45deg);
 transform: rotate(-45deg);
 position: absolute;
 left: 28px;
 top: 17px;
}
.pagetop {
 position: fixed;
 bottom: 45px;
 right: 20px;
 font-size: 90%;
}
.pagetop a:hover {
 background-color: hsla(60, 88%, 97%, 0.6);
 background-color: hsla(0, 0%, 100%, 0.7);
 color: #1c283d;
}
.pagetop a:hover:before {

 border-top-color: rgba(28, 40, 61, 0.85);
 border-right-color: rgba(28, 40, 61, 0.85);
}
@media(min-width:1000px) {
 .main ul li {
  margin: 0 1.6% 1.6% 0;
 }
 .main ul li:nth-child(3n) {
  margin-right: 0;
 }
}
@media(min-width:680px) and (max-width:999px) {
 .inner {
  width: 38pc;
 }
 .main ul li {
  margin: 0 8px 1pc 0;
 }
 .main ul li:nth-child(2n) {
  margin-right: 0;
 }
}
@media(max-width:679px) {
 html {
  letter-spacing: 0.15em;
  line-height: 1.2;
 }
 .icon-home {
  width: 7.8125%;
  height: 7.8125%;
  line-height: 1.4;
 }
 .icon-home, .icon-home:hover {
  font-size: 190%;
 }
 .title {
  margin-top: 42px;
 }
 .title .inner {
  padding: 10% 0.9765625%;
 }
 .title h1 + p {
  margin-top: 4.278074%;
 }
 .inner {
  width: 300px;
 }
 .main ul li {
  float: none;
  margin: 0 auto 4%;
  width: 100%;
  height: auto;
  text-align: center;
 }
}