@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700&display=swap&subset=japanese");
/*--------------------------------------------
 Reset
--------------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

h1, h2, h3, h4, p {
  margin: 0;
  line-height: 1.5;
}

ul, ol, dl {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

img, table img {
  width: 100%;
}

/*--------------------------------------------
 Base
--------------------------------------------*/
* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

*:before, *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  outline: none;
}

html,
body {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

body {
  font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "Noto Sans JP", sans-serif;
  font-size: 16px;
  color: #000;
  line-height: 1.8;
}
@media only screen and (min-width: 768px) {
  body a:hover img {
    opacity: 0.65;
    filter: alpha(opacity=65);
    -moz-opacity: 0.65;
  }
}

/*--------------------------------------------
 Layout
--------------------------------------------*/
/*--------------------------------------
 Wrapper
--------------------------------------*/
.wrapper {
  max-width: 946px;
  margin: 0 auto;
}
@media only screen and (min-width: 768px) {
  .wrapper {
    padding: 0 15px;
  }
}

/*--------------------------------------
 Header
--------------------------------------*/
.header {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 61.112% 38.888%;
  grid-template-columns: 61.112% 38.888%;
  -ms-grid-rows: auto auto;
  grid-template-rows: auto auto;
}
.header > *:nth-child(1) {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}
.header > *:nth-child(2) {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
}
.header > *:nth-child(3) {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
}
.header > *:nth-child(4) {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
}
.header > * > * {
  display: block;
}
.header__logo {
  -ms-grid-column: 1;
  grid-column: 1;
  -ms-grid-row: 2;
  grid-row: 2;
  line-height: 0;
  padding: 16.76% 13.55%;
  background-color: #000;
}
.header__txt {
  -ms-grid-column: 2;
  grid-column: 2;
  -ms-grid-row: 2;
  grid-row: 2;
  line-height: 0;
  padding: 24.5% 30%;
  background-color: #00c7fe;
}
.header__txt .header__txt-pc {
  display: none;
}
.header__image {
  grid-column: 1/-1;
  -ms-grid-row: 1;
  grid-row: 1;
}
@media only screen and (min-width: 768px) {
  .header {
    -ms-grid-columns: 32.752% 67.248%;
    grid-template-columns: 32.752% 67.248%;
  }
  .header__logo {
    -ms-grid-row: 1;
    grid-row: 1;
    padding: 12.834% 10.67%;
  }
  .header__txt {
    -ms-grid-column: 1;
    grid-column: 1;
    padding: 11.5% 10.67%;
  }
  .header__txt .header__txt-pc {
    display: block;
  }
  .header__txt .header__txt-sp {
    display: none;
  }
  .header__image {
    -ms-grid-column: 2;
    grid-column: 2;
    grid-row: 1/-1;
  }
}

/*--------------------------------------
 Main
--------------------------------------*/
.main {
  padding: 0 10px;
}
@media only screen and (min-width: 768px) {
  .main {
    padding: 0;
  }
}

/*--------------------------------------
 Footer
--------------------------------------*/
.footer {
  margin: 40px 0 45px;
}
.footer__copy {
  width: 55.556%;
  margin: 0 auto;
}
@media only screen and (min-width: 768px) {
  .footer {
    margin: 60px 0 70px;
  }
  .footer__copy {
    width: 100%;
    max-width: 330px;
  }
}

/*--------------------------------------------
 Contents
--------------------------------------------*/
.notice {
  padding: 20px;
  margin: 20px 10px 0;
  border: 2px solid #ccc;
}
.notice > h2 {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}
.notice > dl {
  font-weight: bold;
  line-height: 1.6;
  margin-top: 15px;
}
.notice > dl > dt {
  font-size: 18px;
  padding-top: 6px;
  border-top: 1px solid #ccc;
}
.notice > dl > dd {
  font-size: 16px;
  padding-bottom: 6px;
}
.notice > dl > dd > a {
  color: #0099ff;
}
.notice__link {
  margin-top: 10px;
}
.notice__link > a {
  display: block;
  position: relative;
  height: 64px;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  line-height: 64px;
  background-color: #00c7fe;
}
.notice__link > a:after {
  content: "";
  position: absolute;
  top: 0;
  right: 5%;
  bottom: 0;
  width: 10px;
  height: 20px;
  margin: auto;
  background: url(../img/arrow.svg) center center no-repeat;
  background-size: 10px 20px;
}
@media only screen and (min-width: 768px) {
  .notice {
    padding: 30px 15% 45px;
    margin: 40px 0 0;
  }
  .notice > h2 {
    font-size: 26px;
  }
  .notice > dl {
    margin-top: 30px;
  }
  .notice > dl > dt {
    font-size: 20px;
  }
  .notice > dl > dd {
    font-size: 18px;
  }
  .notice > dl > dd > a:hover {
    opacity: 0.65;
    filter: alpha(opacity=65);
    -moz-opacity: 0.65;
  }
  .notice__link {
    margin-top: 20px;
  }
  .notice__link > a {
    font-size: 26px;
    text-decoration: none;
  }
  .notice__link > a:hover {
    opacity: 0.65;
    filter: alpha(opacity=65);
    -moz-opacity: 0.65;
  }
}

.message {
  position: relative;
  padding: 20px;
  margin: 20px 10px 0;
  border: 4px solid #000;
}
.message:after {
  content: "";
  position: absolute;
  top: 100%;
  left: -4px;
  border-top: 18px solid #00c7fe;
  border-right: 18px solid transparent;
  border-bottom: 18px solid transparent;
  border-left: 18px solid #00c7fe;
}
.message__txt {
  font-size: 20px;
  font-weight: bold;
  line-height: 1.8;
}
.message__txt > br {
  display: none;
}
@media only screen and (min-width: 768px) {
  .message {
    padding: 9px 20px;
    margin: 40px 0 0;
    border: 6px solid #000;
  }
  .message:after {
    left: -6px;
  }
  .message__txt {
    font-size: 26px;
    text-align: center;
    padding: 15px;
  }
  .message__txt > br,
  .message__txt > span {
    display: block;
  }
}

.gallery {
  margin-top: 40px;
}
.gallery > a {
  display: block;
  width: 60px;
  height: 60px;
  margin: 0 auto;
}
.gallery > h3 {
  width: 50%;
  margin: 17px auto 0;
}
.gallery__list {
  margin-top: 25px;
}
.gallery__list > ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.gallery__list > ul > li {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  width: calc((100% - 10px) / 3);
  margin-top: 5px;
  overflow: hidden;
}
.gallery__list > ul > li:nth-child(3n), .gallery__list > ul > li:nth-child(3n-1) {
  margin-left: 5px;
}
.gallery__list > ul > li > p {
  display: block;
  position: relative;
  width: 100%;
  padding-top: 100%;
}
.gallery__list > ul > li > p > img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  margin: auto;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  font-family: "object-fit: cover; object-position: center;";
}
@media only screen and (min-width: 768px) {
  .gallery {
    margin-top: 50px;
  }
  .gallery > a {
    width: 80px;
    height: 80px;
  }
  .gallery > h3 {
    max-width: 278px;
  }
  .gallery__list {
    margin-top: 35px;
  }
}