@charset "UTF-8";
body {
  font-size: 1.6rem;
  font-family: "Noto Sans JP", "メイリオ", Meiryo, "ヒラギノ角ゴシック", "Hiragino Sans", sans-serif;
  font-weight: 500;
}

a {
  cursor: pointer;
  text-decoration: none;
}
a:hover {
  opacity: 0.7;
}

.sec-inner {
  max-width: 1400px;
  margin: 0 auto;
}
@media screen and (max-width: 1399px) {
  .sec-inner {
    max-width: 1260px;
  }
}

@media screen and (max-width: 520px) {
  .pc-only {
    display: none;
  }
}

.tab-row {
  display: none;
}
@media screen and (max-width: 1399px) {
  .tab-row {
    display: block;
  }
}

.sp-only {
  display: none;
}
@media screen and (max-width: 520px) {
  .sp-only {
    display: block;
  }
}

.top-items {
  padding-bottom: 5px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
@media screen and (max-width: 520px) {
  .top-items {
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .top-items .item:nth-child(n+2) {
    width: calc(50% - 2.5px);
  }
}

.under-items {
  padding-top: 5px;
  display: grid;
  gap: 5px;
  grid-template-rows: repeat(minmax(295px, 1fr));
  grid-template-columns: repeat(minmax(275px, 1fr));
}
@media screen and (max-width: 520px) {
  .under-items {
    grid-template-rows: repeat(auto-fill, minmax(160px, 1fr));
    grid-template-columns: repeat(auto-fill, minmax(171px, 1fr));
  }
}
@media screen and (max-width: 492px) {
  .under-items {
    grid-template-rows: repeat(auto-fill, minmax(150px, 1fr));
    grid-template-columns: repeat(auto-fill, minmax(161px, 1fr));
  }
}

.items {
  gap: 5px;
  background: #fff;
}

.item {
  overflow: hidden;
}
.item img {
  max-width: 100%;
}

.logo {
  margin: auto;
  text-align: center;
  width: 275px;
}
@media screen and (max-width: 1399px) {
  .logo {
    width: 248px;
  }
}
@media screen and (max-width: 1260px) {
  .logo {
    width: 275px;
  }
}
@media screen and (max-width: 520px) {
  .logo {
    padding: 10px 0;
  }
  .logo img {
    width: 60px;
  }
}

@media screen and (max-width: 1260px) {
  .staff img:nth-child(2) {
    display: none;
  }
}

@media screen and (max-width: 1260px) {
  .staff:hover img:first-child, .staff:active img:first-child {
    display: none;
  }
  .staff:hover img:nth-child(2), .staff:active img:nth-child(2) {
    display: block;
  }
}

.staff {
  position: relative;
  margin: 0 auto;
  display: block;
  overflow: hidden;
  width: 275px;
  height: 295px;
}
@media screen and (max-width: 1399px) {
  .staff {
    width: 248px;
    height: 266px;
    margin: 0;
  }
}
@media screen and (max-width: 1260px) {
  .staff {
    width: auto;
    height: auto;
    position: static;
  }
}

.staff img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
  display: block;
  -webkit-transition: 0.4s ease-in-out;
  transition: 0.4s ease-in-out;
}
@media screen and (max-width: 1260px) {
  .staff img {
    position: static;
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}

.staff img:nth-of-type(1) {
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top;
     object-position: top;
  z-index: 2;
}

.staff img:nth-of-type(2) {
  top: 50%;
  z-index: 1;
}

.staff:hover img:nth-of-type(1) {
  -webkit-animation-name: img-change;
          animation-name: img-change;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-duration: 0.5s;
          animation-duration: 0.5s;
}
@-webkit-keyframes img-change {
  0% {
    height: 100%;
    top: 50%;
  }
  100% {
    height: 0;
    top: 0;
  }
}
@keyframes img-change {
  0% {
    height: 100%;
    top: 50%;
  }
  100% {
    height: 0;
    top: 0;
  }
}

.sunrise {
  background: url(../img/bg.png);
  background-position: 50% 35%;
  background-size: cover;
  height: 587px;
  position: relative;
  text-align: center;
  line-height: 2.5;
  z-index: -5;
}
@media screen and (max-width: 520px) {
  .sunrise {
    height: 460px;
    line-height: 2;
    overflow: hidden;
  }
}

.sunrise__inner {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 100%;
  z-index: -1;
}
@media screen and (max-width: 520px) {
  .sunrise__inner {
    padding: 0 20px;
  }
}

.ttl {
  margin-bottom: 20px;
}
@media screen and (max-width: 520px) {
  .ttl {
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
  }
}
.ttl img {
  max-width: 100%;
}

.lead {
  font-size: 2rem;
  letter-spacing: 0.2em;
}
@media screen and (max-width: 520px) {
  .lead {
    font-size: 1.6rem;
  }
}

.mountain {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  bottom: 0;
  z-index: 1;
  max-width: 100%;
}

.sun {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  -webkit-animation-name: sun-ani;
          animation-name: sun-ani;
  -webkit-animation-duration: 20s;
          animation-duration: 20s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  z-index: -2;
  max-width: 100%;
}
@-webkit-keyframes sun-ani {
  0% {
    bottom: -140%;
  }
  100% {
    bottom: -30%;
  }
}
@keyframes sun-ani {
  0% {
    bottom: -140%;
  }
  100% {
    bottom: -30%;
  }
}
@media screen and (max-width: 520px) {
  .sun {
    -webkit-animation-duration: 20s;
            animation-duration: 20s;
    max-width: 160%;
  }
  @-webkit-keyframes sun-ani {
    0% {
      bottom: -140%;
    }
    100% {
      bottom: -12%;
    }
  }
  @keyframes sun-ani {
    0% {
      bottom: -140%;
    }
    100% {
      bottom: -12%;
    }
  }
}

.banner-column {
  grid-column: 4/6;
}
@media screen and (max-width: 1399px) {
  .banner-column {
    width: 500px;
    height: 266px;
  }
}
@media screen and (max-width: 1260px) {
  .banner-column {
    width: auto;
    height: auto;
  }
}
@media screen and (max-width: 520px) {
  .banner-column {
    grid-column: 1/3;
  }
}

.banner-row {
  grid-column: 2/3;
  grid-row: 3/5;
}
@media screen and (max-width: 1399px) {
  .banner-row {
    width: 248px;
    height: 536px;
  }
}
@media screen and (max-width: 1260px) {
  .banner-row {
    width: auto;
    height: auto;
  }
}
@media screen and (max-width: 520px) {
  .banner-row {
    grid-column: 1/2;
    grid-row: 8/10;
  }
}

.banner-column2 {
  grid-column: 2/4;
}
@media screen and (max-width: 1399px) {
  .banner-column2 {
    width: 500px;
    height: 266px;
  }
}
@media screen and (max-width: 1260px) {
  .banner-column2 {
    width: auto;
    height: auto;
  }
}
@media screen and (max-width: 520px) {
  .banner-column2 {
    grid-column: 1/3;
  }
}

.copyright-cont {
  grid-column: 2/6;
  text-align: right;
  margin-top: auto;
}
@media screen and (max-width: 520px) {
  .copyright-cont {
    text-align: center;
    grid-column: 1/3;
    margin-top: 5px;
  }
}
.copyright-cont .copyright {
  margin-bottom: 10px;
  font-size: 1.4rem;
}