@charset "utf-8";

body {
 width: 100%;
 margin: 0 auto;
 color: #2e2e2e;
 background-color: #fffff3;
 font-family: 源ノ角ゴシック JP;
}

h1 {
 margin: 0 auto;
}

h2 {
 margin-top: 64px;
 margin-bottom: 24px;
}

h3 {
 margin-top: 40px;
 margin-bottom: 24px;
}

h4 {
 margin-top: 40px;
 margin-bottom: 16px;
}

p {
 margin: 0 auto;
}

p.note {
 padding: 8px;
}

img {
 margin: 0 auto;
}

img.logo {
 border-radius: 16px;
 padding: 4px 8px;
}

a:link {
 
}

a:hover {
 color: #A593E0;
}

header {
 max-width: 1024px;
 padding: 4px 56px;
 margin: 0 auto;
 text-align: left;
 background-color: #fffff3;
}

header img {
 margin: 8px;
 max-width: 64px;
 border-radius: 30px;
}

main {
 max-width: 1024px;
 padding: 16px 56px;
 margin: 0 auto;
 text-align: center;
 background-color: #fffff3;
}

img {
 max-width: 192px;
}

.about {
 margin: 32px;
}

.firefish {
 padding: 16px 8px;
 margin: 0 auto;
 text-align: center;
 background-color: #fffff3;
 border-radius: 16px;
}

.firefish h2 {
 margin: 0 auto;
}

.firefish>.about>h2>img.oshiro {
    margin: 0 auto;
    padding: 0;
    max-width: 1em;
}

.firefish>.container {
 display: grid;
 place-content: center;
 place-items: center;
 grid-template-columns: repeat(auto-fit, minmax(150px, 200px));
 grid-column-gap: 32px;
 grid-row-gap: 32px;
 justify-items: stretch;
 align-items: stretch;
}

.firefish>.container h2, .firefish>.container h3 {
 margin: 0 auto;
}

.firefish>.container>.item>img.icon {
    max-width: 128px;
    border-radius: 16px;
   }

.link {
 max-width: 1024px;
 padding: 16px 56px;
 margin: 32px;
 text-align: center;
}

.link>.container {
 margin: 0 auto;
 display: grid;
 place-content: center;
 grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
 grid-template-rows: 80px 80px 80px;
 grid-column-gap: 32px;
 grid-row-gap: 16px;
 justify-items: stretch;
 align-items: stretch;
}

.link>.container h4 {
 margin: 0 auto;
}

.link>.container p {
 margin: 0 auto;
}

.item {
 position:relative!important;
 background: #ffffff;
 padding: 10px;
 border-radius: 8px;
 border: 3px solid #566270;
}

.item a {
 text-decoration: none;
}

.stretched-link::after {
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 z-index: 1;
 pointer-events: auto;
 content: "";
 background-color: rgba(0, 0, 0, 0)
}

footer {
 max-width: 1024px;
 padding: 8px 56px;
 margin: 0 auto;
 text-align: center;
 background-color: #fffff3;
}

footer p {
 margin: 0 auto;
}

footer img {
 max-width: 24px;
}