@charset "utf-8";

.mobile-menu {
  position: absolute;
  top: -100vh;
  left: 0;
  transition: all .2s;
  z-index: 10;
}

.header-space {
  display: none;
}

.banner_kinan_mobile {
  display: none;
}

.otoiawase_mobile {
  display: none;
}

@media screen and (max-width: 1247px) {
  header nav ul li br, footer nav ul li br {
    display: inline;
  }

  header nav {
    width: 100%;
  }

  header nav ul {
    display: -webkit-flex;
    display: flex;
  }

  header nav a {
    flex: 1;
  }

  header nav ul li {
    border-right: solid 2px rgba(255, 255, 255, 0.18);
    box-sizing: border-box;
    color: #ffffff;
    cursor: pointer;
    float: none;
    font-size: 1.4rem;
    font-weight: 700;
    padding: 0;
    width: auto;
    height: 33px;
    line-height: 1;
    transition: all .2s;
    text-align: center;
  }

  footer nav {
    width: 100%;
  }

  footer nav ul {
    display: -webkit-flex;
    display: flex;
  }

  footer nav a {
    flex: 1;
  }

  footer nav ul li {
    border-right: solid 2px rgba(255, 255, 255, 0.18);
    box-sizing: border-box;
    color: #ffffff;
    cursor: pointer;
    float: none;
    font-size: 1.4rem;
    font-weight: 700;
    padding: 0;
    width: auto;
    height: 33px;
    line-height: 1;
    transition: all .2s;
    text-align: center;
  }
}

@media screen and (max-width: 1200px) {
  button#readmore {
    bottom: 11px;
    right: 11px;
  }

  ul.news-list li .news-title {
    font-size: 1.6rem;
    line-height: 1.25;
  }

  ul.news-list li .news-body p {
    line-height: 1.25;
    margin: 0 0 2px 0;
  }
}

@media screen and (max-width: 1099px) {
  header .line_break br {
    display: none;
  }

  header .line_break {
    font-size: 1.2rem !important;
  }

  footer .line_break br {
    display: none;
  }

  footer .line_break {
    font-size: 1.2rem !important;
  }
}

@media screen and (max-width: 960px) {
  .route_name h2 {
    font-size: 2.4rem;
  }

  .movie-caption {
    bottom: 22px;
    left: 11px;
    width: calc(100% - 22px);
    padding: 0 0 0 11px;
  }

  #movie-category {
    font-size: 1.4rem;
    margin-bottom: 6px;
  }

  #movie-body {
    font-size: 2.4rem;
  }

  ul.news-list li {
    padding: 0 0 22px 0;
  }

  ul.news-list li .news-title {
    display: block;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: none;
  }

  ul.news-list li.news-contact h3 {
    font-size: 3.2rem;
  }

  img.movie-play {
    width: 66px;
    height: 66px;
  }

  .contents-half#movie-thumbnail {
    float: none;
    overflow: hidden;
    position: relative;
    width: 100%;
  }

  .movie-poster {
    padding-top: 50%;
  }

  .contents-half {
    float: none;
    width: 100%;
  }

  /*
  ul.news-list {
    padding-top: 25%;
    margin-bottom: 11px;
  }
  */
  button#readmore {
    bottom: 0;
    right: 11px;
  }

  .btn_all_news {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: auto;
    margin-bottom: 22px;
  }

  .btn_all_news button#readmore {
    margin-right: 0;
  }

  /*
  ul.news-list li .news-body, .news-body {
    height: 40px;
  }
  ul.news-list li:nth-child(1) {
    top: 0;
    left: 0;
    width: 25%;
    height: 100%;
  }
  ul.news-list li:nth-child(2) {
    top: 0;
    left: 25%;
    width: 25%;
    height: 100%;
  }
  ul.news-list li:nth-child(3) {
    top: 0;
    left: 50%;
    width: 25%;
    height: 100%;
  }
  ul.news-list li.news-contact {
    top: 0;
    left: 75%;
    width: 25%;
    height: 100%;
  }
  */
}

@media screen and (max-width: 813px) {
  header .line_break {
    font-size: 1.1rem !important;
  }

  footer .line_break {
    font-size: 1.1rem !important;
  }
}

@media screen and (max-width: 768px) {
  .banner_kinan {
    display: none;
  }

  .banner_kinan_mobile {
    display: inline-block;
    display: inline-block;
    margin: 11px 0 0 11px;
  }

  .banner_kinan_mobile img {
    width: auto;
    height: 66px;
  }

  button.otoiawase {
    margin: 11px 43px 0 0;
  }

  .header-space {
    display: block;
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 59px;
  }

  section.pages ul.gallery-list li {
    width: 33.333333%;
  }

  .heritage-left {
    display: block;
    width: 100%;
    padding: 0;
  }

  .heritage-right {
    display: block;
    width: 100%;
    padding-left: 0;
  }

  .team_item {
    cursor: pointer;
    float: left;
    width: 32.666666%;
    margin-right: 1%;
    margin-bottom: 1%;
  }

  .team_item:nth-child(4n+4) {
    margin-right: 1%;
  }

  .team_item:nth-child(3n+3) {
    margin-right: 0;
  }

  ul.ranking-menu {
    width: 100%;
    height: 33px;
    line-height: 33px;
    margin: 0 auto 44px auto;
  }

  .photo-collection {
    overflow: hidden;
    position: relative;
    width: 32.333333%;
    height: auto;
    margin: 0 1% 1% 0;
  }

  .route_item {
    width: 49.5%;
    margin-right: 1%;
    margin-bottom: 1%;
  }

  .route_item:nth-child(3n+3) {
    margin-right: 1%;
  }

  .route_item:nth-child(2n+2) {
    margin-right: 0;
  }

  .responsive {
    padding: 0 11px;
  }

  header {
    height: 59px;
    z-index: 11;
    position: fixed;
    top: 0;
    left: 0;
    border-bottom: solid 4px var(--color-theme);
    box-sizing: border-box;
  }

  header picture img#logo {
    margin-top: 11px;
    height: 33px;
  }

  header .search-form {
    margin-top: 9.5px;
  }

  header .search-form {
    display: none;
  }

  header nav {
    display: none;
  }

  .mobile-menu .search-form {
    float: none;
    padding: 16.5px 0;
    margin-top: 0;
    margin-left: 11px;
    margin-right: 11px;
    margin-bottom: 0;
    width: calc(100% - 22px);
    height: 66px;
  }

  .mobile-menu input[type="search"] {
    background-color: rgba(255, 255, 255, 0.82);
    float: left;
    font-family: 'Noto Sans JP', sans-serif;
    padding: 0 0.5em;
    width: calc(100% - 33px);
    height: 33px;
    line-height: 33px;
    transition: all .2s;
  }

  .mobile-menu.active {
    background-color: var(--color-theme);
    display: block;
    overflow: hidden;
    position: fixed;
    top: 59px;
    left: 0;
    width: 100%;
    height: calc(100vh - 59px);
  }

  .mobile-menu ul {
    overflow: hidden;
    position: relative;
    width: 100%;
  }

  .mobile-menu ul a {
    display: block;
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 33px;
    line-height: 33px;
  }

  .mobile-menu ul a li {
    border-bottom: solid 1px rgba(255, 255, 255, 0.09);
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 33px;
    line-height: 33px;
    padding: 0 11px;
  }

  .mobile-menu ul a:hover {
    background-color: rgba(255, 255, 255, 0.18);
  }

  /* slideshow */
  img.badge {
    top: 11px;
    right: 11px;
    height: 44px;
  }

  .headline {
    position: absolute;
    bottom: 44px;
    left: 11px;
  }

  ul.slick-dots {
    margin-bottom: 20px;
  }

  div.slideshow {
    height: calc(100vh - 59px);
  }

  div.slideshow-image {
    background-position: 66.666666% 50%;
    height: calc(100vh - 59px);
  }

  .headline-body {
    font-size: 2.8rem;
  }

  .headline-category {
    font-size: 1.4rem;
  }

  /* results */
  section h1 {
    font-size: 2.8rem;
  }

  ul.results-list {
    overflow: hidden;
    position: relative;
    margin: -22px auto 0 auto;
    width: 100%;
  }

  ul.results-list li {
    float: left;
    overflow: hidden;
    position: relative;
    width: 25%;
  }

  ul.results-list li .results-title {
    font-size: 1.4rem;
  }

  h2.results-name {
    font-size: 1.4rem;
  }

  p.results-value {
    font-size: 1.4rem;
    line-height: 1;
    margin-bottom: 0;
  }

  /* news */
  /*
  ul.news-list {
    padding-top: 100%;
    margin-bottom: 11px;
  }
  */
  button#readmore {
    bottom: 11px;
    right: 11px;
  }

  /*
  ul.news-list li .news-body, .news-body {
    height: 97px;
  }
  ul.news-list li:nth-child(1) {
    top: 0;
    left: 0;
    width: 50%;
    height: 50%;
  }
  ul.news-list li:nth-child(2) {
    top: 0;
    left: 50%;
    width: 50%;
    height: 50%;
  }
  ul.news-list li:nth-child(3) {
    top: 50%;
    left: 0;
    width: 50%;
    height: 50%;
  }
  ul.news-list li.news-contact {
    top: 50%;
    left: 50%;
    width: 50%;
    height: 50%;
  }
  */
  /* humberger menu */
  .menu-trigger, .menu-trigger span {
    display: inline-block;
    transition: all .2s;
    box-sizing: border-box;
    z-index: 1;
  }

  .menu-trigger {
    cursor: pointer;
    display: inline-block;
    position: absolute;
    top: 17px;
    right: 12px;
    width: 30px;
    height: 21px;
  }

  .menu-trigger span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #fff;
    border-radius: 0;
  }

  .menu-trigger span:nth-of-type(1) {
    top: 0;
  }

  .menu-trigger span:nth-of-type(2) {
    top: 9px;
  }

  .menu-trigger span:nth-of-type(3) {
    bottom: 0;
  }

  /* humberger menu animation */
  .menu-trigger.active span:nth-of-type(1) {
    -webkit-transform: translateY(9px) rotate(-45deg);
    transform: translateY(9px) rotate(-45deg);
  }

  .menu-trigger.active span:nth-of-type(2) {
    opacity: 0;
  }

  .menu-trigger.active span:nth-of-type(3) {
    -webkit-transform: translateY(-9px) rotate(45deg);
    transform: translateY(-9px) rotate(45deg);
  }

  /* access */
  table.access-list {
    display: block;
  }

  table.access-list tr {
    clear: both;
    display: block;
  }

  table.access-list tr th {
    display: block;
  }

  .access_name {
    background-color: var(--color-theme);
    color: #ffffff;
    overflow: hidden;
    padding: 0;
    text-align: left;
    width: 100%;
    height: 44px;
    line-height: 46px;
    transition: all .2s;
    padding: 0 22px;
  }

  table.access-list tr td.access_desc {
    display: block;
    float: none;
    padding: 22px 0 22px 0;
    width: 100%;
  }

  table.access-list tr td {
    display: block;
    float: left;
    width: 50%;
    padding: 22px 0 44px 0;
  }

  /* gallery */
  ul.gallery-list {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: auto;
  }

  ul.gallery-list a li {
    float: left;
    overflow: hidden;
    position: relative;
    width: 33.333333%;
    height: 0;
    padding-top: 22.222222%;
  }

  ul.gallery-list a li span {
    background-size: cover;
    background-position: 50% 15%;
    background-repeat: no-repeat;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    padding-top: 66.666666%;
    transition: all .6s;
    filter: brightness(0.82);
  }

  ul.gallery-list a:first-child li {
    width: 100%;
    padding-top: 66.666666%;
  }

  /* partner */
  ul.partner-list a {
    width: 19%;
    margin: 0 0.5% 1% 0.5%;
  }

  /* footer */
  footer {
    height: auto;
    padding-bottom: 22px;
  }

  footer img#footer-logo {
    margin-top: 22px;
    margin-bottom: 22px;
    width: auto;
    height: 33px;
  }

  footer nav ul {
    display: block;
  }

  footer nav a {
    flex: none;
  }

  footer nav ul li {
    border-right: none;
    border-bottom: solid 1px rgba(255, 255, 255, 0.09);
    box-sizing: border-box;
    color: #ffffff;
    cursor: pointer;
    float: none;
    font-size: 1.4rem;
    font-weight: 700;
    padding: 0 11px;
    width: 100%;
    height: 33px;
    line-height: 33px;
    transition: all .2s;
    text-align: left;
    webkit-align-items: left;
    align-items: left;
    -webkit-justify-content: left;
    justify-content: left;
  }

  footer nav ul li br {
    display: none;
  }

  footer nav ul a {
    display: block;
    width: 100%;
    height: 33px;
    line-height: 33px;
  }

  footer nav ul a:hover {
    background-color: rgba(255, 255, 255, 0.18);
  }
}

@media screen and (max-width: 600px) {

  /* news single */
  ul.news-single-list li {
    overflow: hidden;
    position: relative;
    float: left;
    padding: 0 22px 22px 0;
    width: 33.333333%;
    height: 286px;
  }
}

@media screen and (max-width: 500px) {
  table.overview, table.overview tbody, table.overview tbody tr, table.overview tbody tr th, table.overview tbody tr td {
    display: block;
    width: 100%;
  }

  .contact-form table, .contact-form table tbody, .contact-form table tbody tr {
    width: 100%;
    display: block;
  }

  .contact-form table tr th {
    width: 100%;
    display: block;
    padding: 5px 0;
  }

  .contact-form table tr td {
    width: 100%;
    display: block;
    padding: 5px 0;
  }

  section.pages ul.gallery-list li {
    width: 50%;
  }

  .race-contents p {
    font-size: 1.4rem;
  }

  .race-contents ul li {
    font-size: 1.4rem;
  }

  .team_item {
    cursor: pointer;
    float: left;
    width: 100%;
    margin-right: 0;
    margin-bottom: 11px;
  }

  .team_item:nth-child(4n+4) {
    margin-right: 0;
  }

  .team_item:nth-child(3n+3) {
    margin-right: 0;
  }

  table.ranking-list {
    display: block;
    width: 100%;
  }

  table.ranking-list tbody {
    display: block;
    width: 100%;
  }

  table.ranking-list tr {
    display: block;
    width: 100%;
  }

  table.ranking-list tr th {
    display: block;
    width: 100%;
  }

  table.ranking-list tr td {
    display: block;
    width: 100%;
  }

  ul.ranking-menu a li {
    font-size: 1.3rem;
  }

  table.ranking-list th:nth-child(1), table.ranking-list td:nth-child(1) {
    display: block;
    float: left;
    width: 100%;
  }

  table.ranking-list th:nth-child(2), table.ranking-list td:nth-child(2) {
    display: block;
    float: left;
    width: 33.333333%;
  }

  table.ranking-list th:nth-child(3), table.ranking-list td:nth-child(3) {
    display: block;
    float: left;
    width: 33.333333%
  }

  table.ranking-list th:nth-child(4), table.ranking-list td:nth-child(4) {
    display: block;
    float: left;
    width: 33.333333%
  }

  table.ranking-list.team-column th:nth-child(1), table.ranking-list.team-column td:nth-child(1) {
    display: block;
    width: 100%;
  }

  table.ranking-list.team-column th:nth-child(2), table.ranking-list.team-column td:nth-child(2) {
    display: block;
    width: 33.333333%
  }

  table.ranking-list.team-column th:nth-child(3), table.ranking-list.team-column td:nth-child(3) {
    display: block;
    width: 33.333333%
  }

  table.ranking-list.team-column th:nth-child(4), table.ranking-list.team-column td:nth-child(4) {
    display: block;
    width: 33.333333%
  }

  .main-map img {
    width: 100%;
  }

  .map-list {
    width: 100%;
  }

  .photo-collection {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: auto;
    margin: 0 0 11px 0;
  }

  .route_item {
    width: 100%;
    margin-right: 0;
    margin-bottom: 11px;
  }

  .route_item:nth-child(3n+3) {
    margin-right: 0;
  }

  .route_item:nth-child(2n+2) {
    margin-right: 0;
  }

  /* results */
  ul.results-list li {
    width: 50%;
  }

  /* news */
  button#readmore {
    bottom: 11px;
    right: 0;
  }

  /*
  ul.news-list li .news-body, .news-body {
    height: 75%;
  }
  ul.news-list {
    padding-top: 400%;
  }
  ul.news-list li:nth-child(1) {
    top: 0;
    left: 0;
    width: 100%;
    height: 25%;
  }
  ul.news-list li:nth-child(2) {
    top: 25%;
    left: 0;
    width: 100%;
    height: 25%;
  }
  ul.news-list li:nth-child(3) {
    top: 50%;
    left: 0;
    width: 100%;
    height: 25%;
  }
  ul.news-list li.news-contact {
    top: 75%;
    left: 0;
    width: 100%;
    height: 25%;
  }
  ul.news-list {
    padding-top: 0;
    overflow: hidden;
    position: relative;
    height: 100%;
  }
  ul.news-list li:nth-child(1), ul.news-list li:nth-child(2), ul.news-list li:nth-child(3), ul.news-list li:nth-child(4) {
    overflow: hidden;
    position: relative;
    top: auto;
    left: auto;
    padding: 0 22px 22px 0;
    width: 100%;
    height: auto;
    margin-bottom: 44px;
  }
  ul.news-list li.news-contact {
    overflow: hidden;
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: calc((100vw - 22px)/2);
    margin-bottom: 0;
  }
  */
  img.news-contact-bg {
    width: 50%;
  }

  ul.news-list li .news-body p {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.3rem;
    font-weight: 400;
    margin: 0 0 1em 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.5;
    height: 35px;
    overflow: hidden;
  }

  .movie-poster {
    padding-top: 100%;
  }

  table.access-list tr td {
    display: block;
    float: none;
    width: 100%;
    padding: 0;
  }

  table.access-list tr td:last-child {
    padding: 0 0 44px 0;
  }

  /* partner */
  ul.partner-list a {
    width: 31.333333%;
    margin: 0 1% 1% 1%;
  }

  /* news single */
  ul.news-single-list li {
    overflow: hidden;
    position: relative;
    float: left;
    padding: 0 0 22px 0;
    width: 100%;
    height: auto;
    margin-bottom: 44px;
  }

  ul.news-single-list li .news-body p {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.3rem;
    font-weight: 400;
    margin: 0 0 1em 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.5;
    height: auto;
    overflow: hidden;
  }

  ul.partner-list {
    overflow: hidden;
    position: relative;
    display: flex;
    justify-content: left;
    list-style-type: none;
    flex-wrap: wrap;
  }
}

@media screen and (max-width: 375px) {
  button.otoiawase {
    display: none;
  }

  .otoiawase_mobile {
    left: auto;
    display: block;
    width: 132px;
    height: 33px;
    line-height: 31px;
    background-color: #ffffff;
    color: var(--color-theme);
    float: none;
    margin: 11px 0 0 11px;
  }
}