@charset "utf-8";
.h_bar {
  display: none;
}
#beltbnr {
  display: none;
}
html {
  font-size:  62.5%;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
img {
  width: 100%;
  vertical-align: middle;
}
dt {
  font-weight: normal;
}
#main {
  color: #333333;
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
  overflow: hidden;
  margin: 0 auto;
  line-height: 1;
  letter-spacing: 0;
}
.lead {
  font-size: 1.4rem;
  line-height: 1.75;
  letter-spacing: .04em;
  margin: 7.2% 5.5% 0 5.5%;
}
.pc {
  display: none;
}
.heading-area {
  text-align: center;
  margin: 11.5% 0 0 0;
  position: relative;
}
.heading-area::after {
  content: "";
  display: block;
  width: 1px;
  height: 52px;
  background: #333333;
  position: absolute;
  top: 5em;
  left: 50%;
  transform: translateX(-50%);
  animation: scroll 1.5s infinite;
}
@keyframes scroll {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  50.1% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}
.subheading {
  color: #36a2c9;
  display: block;
  font-size: 1.1rem;
  font-family: "optima", "Marcellus", serif;
  font-weight: 400;
  font-style: normal;
  margin: 0 0 10px 0;
}
.heading {
  font-size: 2.0rem;
  font-family: "optima", "Marcellus", serif;
  font-weight: 400;
  font-style: normal;
  position: relative;
  line-height: 1.5;
  padding: .25em 1em;
}
.heading::before,
.heading::after {
  content: "";
  width: 10px;
  height: 20px;
  position: absolute;
  display: inline-block;
}
.heading::before {
  border-top: solid 1px #333333;
  border-left: solid 1px #333333;
  top: 0;
  left: 0;
}
.heading::after {
  border-bottom: solid 1px #333333;
  border-right: solid 1px #333333;
  bottom: 0;
  right: 0;
}
.grid-container {
  margin: 0 5.5%;
  display: grid;
}
.grid-content {
  width: 100%;
  margin: 33% auto 0;
}
.grid-container > .grid-content:not(:first-child) {
  margin: 18% auto 0;
}
.grid-A {
  display: grid;
  grid-template-areas: 
  "areaA areaA areaA areaC areaC areaC"
  "areaA areaA areaA areaC areaC areaC"
  "areaA areaA areaA areaC areaC areaC"
  "areaA areaA areaA areaC areaC areaC"
  "areaA areaA areaA areaD areaD areaD"
  "areaA areaA areaA areaD areaD areaD"
  "areaB areaB areaB areaD areaD areaD"
  "areaB areaB areaB areaD areaD areaD"
  "areaB areaB areaB areaE areaE areaE"
  "areaB areaB areaB areaE areaE areaE"
  "areaB areaB areaB areaE areaE areaE"
  "areaB areaB areaB areaE areaE areaE"
  ;
  gap: 10px;
}
.grid-B {
  display: grid;
  grid-template-areas:
  "areaF areaF areaF areaG areaG areaG"
  "areaF areaF areaF areaG areaG areaG"
  "areaF areaF areaF areaG areaG areaG"
  "areaF areaF areaF areaG areaG areaG"
  "areaH areaH areaH areaH areaI areaI"
  "areaH areaH areaH areaH areaI areaI"
  "areaH areaH areaH areaH areaI areaI"
  "areaH areaH areaH areaH areaI areaI"
  "areaH areaH areaH areaH areaJ areaJ"
  "areaH areaH areaH areaH areaJ areaJ"
  "areaH areaH areaH areaH areaJ areaJ"
  "areaH areaH areaH areaH areaJ areaJ"
  ;
  gap: 10px;
}
.thumb {
  position: relative;
}
.number-box {
  width: 20px;
  height: 20px;
  background: #ffffff;
  position: absolute;
  top: 0;
  left: 0;
}
.number span {
  font-size: 1.4rem;
  font-family: "optima", "Marcellus", serif;
  font-weight: 700;
  font-style: normal;
  position: absolute;
  top: 2.5px;
  left: 2.5px;
}
#item01,
#item11,
#item21 {
  grid-area: areaA;
}
#item02,
#item12,
#item22 {
  grid-area: areaB;
}
#item03,
#item13,
#item23 {
  grid-area: areaC;
}
#item04,
#item14,
#item24 {
  grid-area: areaD;
}
#item05,
#item15,
#item25 {
  grid-area: areaE;
}
#item06,
#item16 {
  grid-area: areaF;
}
#item07,
#item17 {
  grid-area: areaG;
}
#item08,
#item18 {
  grid-area: areaH;
}
#item09,
#item19 {
  grid-area: areaI;
}
#item10,
#item20 {
  grid-area: areaJ;
}
.credit-list li {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin: 11.5% 0 0 0;
}
.credit-list li:not(:first-child) {
  margin: 7.5% 0 0 0;
}
.credit-list li p {
  font-size: 1.3rem;
  line-height: 1.5;
  letter-spacing: .04em;
}
p span.credit-number {
  display: block;
  font-size: 1.4rem;
  font-family: "optima", "Marcellus", serif;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0;
}
#item26 {
  margin: 10px 0 0 0;
}
.btn,
a.btn,
button.btn {
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.5;
  display: inline-block;
  padding: .6rem 2.7rem;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all .3s;
  transition: all .3s;
  text-align: center;
  vertical-align: middle;
  letter-spacing: .04em;
  color: #333333;
  border-radius: 1rem;
  position: relative;
}
a.btn-flat {
  overflow: hidden;
  /* padding: 1.5rem 6rem; */
  color: #ffffff;
  border-radius: 0;
  background: #333333;
}
a.btn-flat span {
  position: relative;
}
a.btn-flat::before {
  content: "";
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  -webkit-transform: translateX(-110%) translateY(-15%) rotate(45deg);
  transform: translateX(-110%) translateY(-15%) rotate(45deg);
  background: #36a2c9;
  position: absolute;
  top: 0;
  left: 0;
  width: 150%;
  height: 500%;
}
a.btn-flat:hover::before {
  -webkit-transform: translateX(-13.5%) translateY(-25%) rotate(45deg);
  transform: translateX(-13.5%) translateY(-25%) rotate(45deg);
}
.bg {
  background: #faf7d9;
  padding: 8% 0 10.7%;
  margin: 10.7% 0 0;
}
.gallery {
  margin: 0 5.5%;
}
.recommend-area {
  display: flex;
  flex-wrap: wrap;
  column-gap: 10px;
}
.recommend-area li {
  width: calc(100% / 2 - 5px);
}
.recommend-area > li:nth-child(n + 3) {
  margin: 36.5px 0 0 0;
}
.recommend-area li p {
  font-size: 1.3rem;
  line-height: 1.5;
  letter-spacing: .04em;
  margin: 16.5px 0 0 0;
}
.recommend-area li p span {
  display: block;
  font-size: 1.4rem;
  font-family: "optima", "Marcellus", serif;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0;
}
.all-button {
  text-align: center;
  padding: 10% 0 0 0;
}
.all-button a {
  display: inline-block;
  background: #36a2c9;
  width: 275px;
  height: 48px;
  line-height: 48px;
  border-radius: 50px;
  color: #ffffff;
  font-size: 1.4rem;
  font-weight: 700;
  font-style: normal;
  letter-spacing: .04em;
}
@media(min-width: 431px) {
  picture.kv-image img {
    display: block;
    width: 900px;
    margin: 0 auto;
  }
  .lead {
    margin: 59px 0 0 0;
    text-align: center;
  }
  .pc {
    display: block;
  }
  .heading-area {
    margin: 91px 0 0 0;
  }
  .heading-area::after {
    height: 104px;
    top: 7em;
  }
  .grid-container {
    width: 960px;
    margin: 0 auto;
    display: grid;
  }
  .grid-container {
    margin: 220px auto 0 auto;
    display: flex;
    flex-wrap: wrap;
  }
  .grid-container > .grid-content:not(:first-child) {
    margin: 0 auto;
  }
  .grid-container > .grid-content:nth-child(n + 3) {
    margin: 120px auto 0;
  }
  .grid-content {
    width: 48%;
    margin: 0 auto;
  }
  .credit-list {
    display: flex;
    flex-direction: column;
    margin: 60.5px 25px 0 25px;
  }
  .credit-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1.4rem;
    line-height: 1.5;
    margin: 0 0 0 0;
    height: 60px;
  }
  .credit-list li:not(:first-child) {
    margin: 36.5px 0 0 0;
  }
  .btn,
  a.btn,
  button.btn {
    padding: 8px 30px;
    cursor: pointer;
  }
  /* item26 start */
  .grid-container > .grid-content:last-child {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
    width: 98%;
  }
  .grid-container > .grid-content:last-child .grid-wrapper {
    width: 48%;
    margin-right: auto;
  }
  .grid-container > .grid-content:last-child .credit-list {
    width: 45%;
  }
  .grid-container > .grid-content:last-child .credit-list {
    margin: 0 25px 0 0;
    padding: 0 0 0 15px;
  }
  #item26 {
    margin: 10px 0 0 0;
  }
  /* item26 end */
  .bg {
    margin: 120px 0 0 0;
    padding: 80px 0 80px;
  }
  .gallery {
    width: 878px;
    margin: 0 auto;
  }
  .recommend-area > li:nth-child(n + 3) {
    margin: 0 0 0 0;
  }
  .recommend-area > li:nth-child(n + 5) {
    margin: 36.5px 0 0 0;
  }
  .recommend-area li {
    width: calc(98% / 4 - 5px);
  }
  .all-button {
    padding: 77px 0 0 0;
  }
  .all-button a {
    width: 400px;
  }
}