@charset "utf-8";
/* CSS Document */
/*--------------------layout */
#layout {
  max-width: 1900px;
  width: 100%;
  margin: 0 auto;
}
/*--------------------nav */
.nav {
  margin: 50px auto;
  max-width: 1200px;
}
.nav ul.btn {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.nav ul.btn li {
  cursor: pointer;
  text-align: center;
  padding: 10px;
  background: #FFF;
  border: 1px solid #2A5AED;
  margin: 0 0 5px 5px;
  flex: calc(100% / 5 - 2.5px);
  width: calc(100% / 5 - 2.5px);
  border-radius: 1.5em;
}
.nav ul.btn li.nav_groop {
  flex: calc(100% / 4 - 2.5px);
  width: calc(100% / 4 - 2.5px);
}
.nav ul.btn li:nth-of-type(5n) {
  margin-left: 0;
}
.nav ul.btn li:hover {
  opacity: .7;
}
.nav ul.btn li:nth-of-type(1) {
  font-weight: 600;
  color: #2A5AED;
  background: #C4EEFF;
  margin-left: 0;
  flex: 10%;
  width: 10%;
  padding: 1.6vw 0;
}
.nav ul.btn li:nth-of-type(2) {
  border: 1px solid #fa8333;
  color: #fa8333;
  padding: .1em 1.2em 0;
}
.nav ul.btn li:nth-of-type(3) {
  border: 1px solid #ff699e;
  color: #ff699e;
  padding: .1em 1.2em 0;
}
.nav ul.btn li:nth-of-type(4) {
  border: 1px solid #0C0C0C;
  color: #0C0C0C;
  padding: .1em 1.2em 0;
}
.nav ul.btn li.active:nth-of-type(1), .nav ul.btn li.active:nth-of-type(5), .nav ul.btn li.active:nth-of-type(6), .nav ul.btn li.active:nth-of-type(7), .nav ul.btn li.active:nth-of-type(8) {
  color: #fff;
  background-color: #2A5AED;
}
.nav ul.btn li.active:nth-of-type(2) {
  border: 7px solid #fa8333;
}
.nav ul.btn li.active:nth-of-type(3) {
  border: 7px solid #ff699e;
}
.nav ul.btn li.active:nth-of-type(4) {
  border: 7px solid #0C0C0C;
}
/*--------------------btnList */
#btnList {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  grid-column-gap: 1em;
  grid-row-gap: 1em;
}
#btnList li {
  width: 100%;
  height: auto;
  margin-bottom: 1em;
  position: relative; /*相対配置*/
}
#btnList li:after { /*画像を絶対配置*/
  position: absolute;
  content: '';
  top: auto;
  bottom: 2%;
  left: 0;
  display: block;
  width: 100%; /*幅*/
  height: 2.8em; /*どれだけデカくなってもはみ出ないであろう高さを指定*/
  background-image: url(../img/click.png);
  background-size: contain;
  background-position: right;
  background-repeat: no-repeat; /*画像を繰り返さない*/
}
button {
  background-color: #FDFAEE;
  border: none;
  cursor: pointer;
  text-align: center;
  font-size: min(1.1vw, 18px);
  font-weight: 700;
  padding: 0;
  line-height: 2;
  transition: 1s all;
  color: var(--black);
  box-shadow: 0px 0px 3px 0px rgba(17, 17, 17, 0.3);
  font-family: 'Noto Sans JP', sans-serif;
}
button:hover {
  transform: scale(1.05, 1.05);
  transition: .5s all;
}
/*--------------------モーダル */
.modal {
  display: none;
  position: fixed;
  z-index: 8887;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.6);
  transition: all 1s ease-in-out;
}
.modal-content {
  background: #FFF;
  overflow-y: auto;
  padding: 1em;
  width: 95%;
  max-width: 1600px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: 95%;
  animation: show 0.6s linear 0s;
  filter: drop-shadow(0px 2px 6px #777);
}
.modal-close {
  font-family: 'M PLUS Rounded 1c', sans-serif;
  color: #303030;
  text-decoration: none;
  font-size: 3.5em;
  line-height: 1;
  padding: 0 0 .5em;
  text-align: right;
  flex: 1em;
  font-weight: 900;
}
.modal-close:hover, .modal-close:focus {
  text-decoration: none;
  cursor: pointer;
}
.modal-title {
  color: #FFF;
}
@keyframes show {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/************************************************************
					★min770px－max999px
************************************************************/
@media screen /*and (min-width: 770px) */ and (max-width: 1000px) {
  /*--------------------btnList */
  #btnList {
    grid-template-columns: repeat(3, 1fr);
  }
  button {
    font-size: 1.7vw;
  }
  /*--------------------モーダル */
  .modal-top h3 {
    font-size: 3.5vw;
  }
}
/************************************************************
					★タブレット対応
************************************************************/
@media screen /*and (min-width:600px) */ and (max-width:769px) {
  /*--------------------btnList */
  #btnList {
    grid-template-columns: repeat(2, 1fr);
  }
  #btnList li {
    margin-bottom: 0;
  }
  button {
    font-size: 2.5vw;
  }
  /*------------------------------------------------------------------------------------------------------------ mv */
  .mv p {
    font-size: 1em;
  }
  .mv li a {
    font-size: 0.9em;
  }
  /*ul.map{	width: 100%;}*/
}
/************************************************************
						★スマホ対応
************************************************************/
@media screen and (max-width:599px) {
  .sp_only {
    display: block;
  }
  .sp_none {
    display: none;
  }
  /*--------------------nav */
  .nav {
    margin: 1em 5px;
  }
  .nav ul.btn {
    flex-wrap: wrap;
  }
  .nav ul.btn li {
    font-size: .9em;
    padding: .5em .2em;
    margin: 0 1px 5px;
  }
  .nav ul.btn li:first-of-type {
    flex: calc(100% / 2 - 2px);
    width: calc(100% / 2 - 2px);
  }
  .nav ul.btn li:nth-of-type(2) {
    flex: calc(100% / 2 - 2px);
    width: calc(100% / 2 - 2px);
  }
  .nav ul.btn li:nth-of-type(3) {
    flex: calc(100% / 2 - 2px);
    width: calc(100% / 2 - 2px);
  }
  .nav ul.btn li:nth-of-type(4) {
    flex: calc(100% / 2 - 2px);
    width: calc(100% / 2 - 2px);
  }
  .nav ul.btn li:nth-of-type(5) {
    flex: calc(100% / 4 - 2px);
    width: calc(100% / 4 - 2px);
  }
  .nav ul.btn li:nth-of-type(6) {
    flex: calc(100% / 4 - 2px);
    width: calc(100% / 4 - 2px);
  }
  /*--------------------btnList */
  button {
    font-size: 2.5vw;
  }
  /*--------------------モーダル */
  .modal-content {
    padding: 0 7px 7px;
  }
  .modal-close {
    font-size: 2.5em;
    padding: 0;
    text-align: left;
    position: sticky;
    top: 0;
    left: 0;
    background: rgba(255, 255, 255, 0.70);
    z-index: 888;
  }
  .box {
    padding-top: 0;
    margin: 0em 0;
  }
}