@charset "utf-8";
/*load↓*/
.load {
 position: fixed;
 width: 100%;
 height: 100%;
 z-index: 999;
 background: #fff;
 text-align: center;
}
.logo {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}
.logo img {
 width: 200px;
	height: auto;
}
/*load↑*/
* {
 margin: 0;
 padding: 0;
}
main, section, article.aside {
 display: block;
}
ol, ul {
 list-style-type: none;
 padding-left: 0;
}
body, html {
 height: 100vh;
}
html {
 font-family: "Sorts Mill Goudy", Hannari, "Noto Sans JP", serif;
 font-style: italic;
 font-size: calc(512.5% *(100% - 640px)/360);
 background-color: rgba(28, 40, 61, 0.6);
 letter-spacing: 0.15em;
 line-height: 1.2;
}
p {
 font-family: Lora, "Noto Sans JP", sans-serif;
 font-style: italic;
}
a, html {
 color: #fff;
}
a, h1, p {
 text-align: center;
 vertical-align: middle;
}
a {
 display: block;
 text-decoration: none;
 cursor: pointer;
}
a:hover, a:hover::before {
 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;
 transition: background-color 0.3s;
}
.wrap {
 min-width: 100%;
 min-height: 100%;
 background: url(../img/main.jpg) center center no-repeat fixed;
 background-size: cover;
}
.inner {
 max-width: 1000px;
 margin: 0 auto;
 width: 300px;
}
.header {
 position: fixed;
 top: 0;
 left: 0;
 z-index: 1;
 width: 100%;
 background-color: rgba(28, 40, 61, 0.6);
}
.title {
 margin-top: 50px;
 margin-bottom: 1rem;
 text-shadow: 1px 1px 0 #fff;
 color: #1c283d;
}
.title .inner {
 padding: 2rem 0.9765625% 2rem 0.9765625%;
}
.title h1 + p {
 margin-top: 4.278074%;
}
.main {
 padding-bottom: 4rem;
 margin-bottom: 2rem;
 font-family: serif;
}
.main ul li {
 position: relative;
 margin: 0 auto 4%;
 width: 100%;
 height: auto;
 text-align: center;
}
.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;
}
.main ul li:hover {
 cursor: pointer;
}
.none {
 display: none;
}
.footer {
 width: 100%;
 margin-top: 2rem;
 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;
 transform: rotate(-45deg);
 position: absolute;
 left: 28px;
 top: 17px;
}
.pagetop {
 position: fixed;
 bottom: 3rem;
 right: 1rem;
 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:640px){
	.inner {
  width: 38.5pc;
 }
	.main ul li {
		box-sizing: border-box;
  margin: 0 0 0.8pc 0;
		width: 300px;
 }
	.main ul li:nth-child(2n) {
  margin-right: 0;
 }
	.flex {
 display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
}
	.none{
		display: block;
	}
}
@media(min-width:960px){
	.inner {
  width: 58pc;
 }
}