@charset "UTF-8";
@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
/*--------------------
共通設定
----------------------*/
img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom; }

a {
  text-decoration: none;
  color: #171717;
  transition: .4s; }
  a:hover {
    color: #171717; }
  a:visited {
    color: transparent; }
  a.disabled {
    pointer-events: none;
    text-decoration: none; }

ul, ol {
  list-style: none; }

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

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

p {
  margin: 0;
  padding: 0; }

/*--------------------- ここから ----------------------*/
main {
  width: 90%;
  margin: 0 auto 15%;
  padding-top: 60px;
  overflow-x: hidden;
  max-width: 1800px; }
  @media screen and (max-width: 1920px) {
    main {
      max-width: 1500px; } }
  @media screen and (max-width: 600px) {
    main {
      margin-bottom: 15%;
      width: 94%; } }

h2 {
  font-size: 3.0em;
  font-weight: 400;
  text-align: left;
  margin: 24px auto; }
  @media screen and (max-width: 600px) {
    h2 {
      font-size: 8vw; } }

#futureBox {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap; }
  @media screen and (max-width: 1080px) {
    #futureBox {
      justify-content: space-between; } }
  #futureBox div {
    width: calc(100%/3 - 1.5em);
    margin: .75em;
    overflow: hidden; }
    @media screen and (max-width: 1080px) {
      #futureBox div {
        width: calc(100%/2 - 0.5em);
        margin: .5em 0; } }
    @media screen and (max-width: 600px) {
      #futureBox div {
        width: 100%; } }
    #futureBox div a img {
      transform: scale(1);
      transition: .8s; }
      #futureBox div a img:hover {
        transform: scale(1.05); }

.filtered-item {
  display: block; }
  .filtered-item.hide {
    display: none; }

/*ページネーション*/
@media screen and (max-width: 600px) {
  .light-theme a, .light-theme span {
    font-size: 3.0vw; } }

.modal-open-button {
  padding: 16px 32px;
  color: #ffffff;
  text-decoration: none;
  cursor: pointer;
  background: #404040;
  position: fixed;
  bottom: 20px;
  right: 10px;
  z-index: 2;
  border-radius: 50vh;
  display: flex; }
  @media screen and (max-width: 1080px) {
    .modal-open-button {
      bottom: 16px;
      right: auto;
      left: 50%;
      transform: translateX(-50%);
      padding: 10px 32px; } }
  .modal-open-button p {
    font-size: 1.0em;
    padding-left: 1.0em; }
    @media screen and (max-width: 600px) {
      .modal-open-button p {
        font-size: 3.0vw; } }
  .modal-open-button img {
    max-width: 15px; }
  @media screen and (max-width: 1080px) {
    .modal-open-button {
      display: flex;
      align-items: center;
      bottom: 16px; } }

.modal_narrow {
  position: fixed;
  bottom: 20px;
  right: 10px;
  z-index: 1;
  width: 100%;
  max-width: 200px;
  opacity: 0;
  transition: opacity 0.3s, scale 0s 0.3s;
  scale: 0; }
  @media screen and (max-width: 1080px) {
    .modal_narrow {
      bottom: 16px;
      right: auto;
      left: 50%;
      transform: translateX(-50%); } }
  .modal_narrow.active {
    opacity: 1;
    transition: opacity 0.5s;
    scale: 1;
    z-index: 3; }
    .modal_narrow.active .modal-wrapper {
      transition: scale 0.5s;
      scale: 1; }
  .modal_narrow .modal-wrapper {
    position: relative;
    width: 100%;
    max-width: 300px;
    max-height: 450px;
    overflow-y: auto;
    background-color: #404040;
    border-radius: 24px;
    transition: scale 0.5s;
    scale: 0;
    padding: 32px 24px;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.25); }
    .modal_narrow .modal-wrapper .close {
      position: absolute;
      width: 30px;
      height: 30px;
      top: 24px;
      right: 28px;
      border-radius: 50%;
      font-size: 24px;
      font-weight: 400;
      color: #ffffff;
      line-height: 1.0;
      text-decoration: none;
      cursor: pointer;
      text-align: center;
      z-index: +1; }

/*-------------------
絞り込み
-----------------------*/
.menu {
  width: 100%;
  border-bottom: 1px solid #ffffff; }
  .menu p {
    padding: 16px 8px;
    font-size: 1.0em;
    color: #ffffff;
    border-top: 1px solid #ffffff; }
    @media screen and (max-width: 600px) {
      .menu p {
        font-size: 3.0vw; } }
    .menu p.ttl {
      border-top: none;
      padding-top: 0; }
      .menu p.ttl::before {
        display: none; }
    .menu p button {
      width: 100%;
      display: block;
      text-align: left; }
  .menu .menu-item .menu-item-btn {
    padding: 16px 8px;
    border-top: 1px solid #ffffff;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    cursor: pointer;
    font-size: 1.0em;
    text-align: left;
    position: relative;
    color: #ffffff; }
    @media screen and (max-width: 600px) {
      .menu .menu-item .menu-item-btn {
        font-size: 3.0vw; } }

.select_Btn {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start; }
  .select_Btn .active-filter {
    border: 1px solid #404040;
    border-radius: 3px;
    padding: 8px;
    margin-right: 8px;
    margin-bottom: 8px;
    position: relative;
    font-size: 1.0em;
    color: #404040; }
    @media screen and (max-width: 600px) {
      .select_Btn .active-filter {
        font-size: 3.2vw; } }
    .select_Btn .active-filter .clear-icon {
      font-size: 120%;
      padding: 0;
      margin: 0;
      line-height: 1.0; }