@charset "UTF-8";
.space {
  padding: 100px 0;
  background: url(/cms/topics/SPACE/space-bg-star-navy2.jpg);
  /*color: #2d313a;*/ }
  .space .hidden-xs {
    display: block; }
  .space .visible-xs {
    display: none; }
  .space .wrapper {
    background: none;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto; }
  .space .inner {
    background: #fff;
    padding: 60px;
    border-radius: 8px; }
  .space section {
    padding: 60px 0; }
    .space section:first-of-type {
      padding-top: 0; }
    .space section:not(:first-of-type) {
      border-top: 2px dotted #ccc; }
    .space section p.lead {
      font-family: 'Noto Sans JP', sans-serif;
      /*font-weight: 600;*/
      font-size: 1.3em;
      padding-top: 1.2em;
      line-height: 1.6;
      text-align: center; }
      .space section p.lead .theme-text {
        display: inline-block;
        font-size: 1.9em;
        padding-bottom: 0.1em;
        font-weight: 600;
        color: #235093; }
    .space section h3 {
      margin: 0;
      padding: 0;
      text-align: center;
      font-size: 2.8em;
      font-weight: 600;
      border: none;
      font-family: 'qs_font';
      color: #075b96; }
    .space section h4 {
      font-family: 'Noto Sans JP', sans-serif;
      /*font-weight: 600;*/
      font-size: 1.4em;
      padding-bottom: 0.4em;
      text-align: center; }
    .space section a {
      text-decoration: underline;
      color: #235093; }
      .space section a.detail {
        display: block;
        font-weight: 600;
        padding-top: 0.5em; }
    .space section .event {
      padding-top: 3em; }
      .space section .event ul.notice {
        font-size: 0.9em;
        padding-top: 1em;
        color: #000; }
        .space section .event ul.notice li {
          position: relative;
          padding-left: 1em; }
          .space section .event ul.notice li::before {
            content: "※";
            margin-right: 0.5em;
            position: absolute;
            margin-left: -1em; }
      .space section .event table {
        width: 100%;
        border: 2px solid #2d313a; }
        .space section .event table tr th, .space section .event table tr td {
          padding: 20px; }
        .space section .event table tr th {
          background: #2d313a;
          color: #fff;
          text-align: center;
          font-family: 'Noto Sans JP', sans-serif;
          /*font-weight: 600;*/
          font-size: 1.1em;
          border-bottom: 2px solid #fff; }
        .space section .event table tr td {
          border-bottom: 2px solid #2d313a;
          color: #000; }
          .space section .event table tr td ul li:not(:last-of-type) {
            padding-bottom: 10px; }
          .space section .event table tr td ul li .tag {
            background: #000;
            color: #fff;
            padding: 2px 6px;
            margin-right: 5px; }
            .space section .event table tr td ul li .tag.launch {
              background: #d1162b; }
            .space section .event table tr td ul li .tag.live {
              background: #235093; }
            .space section .event table tr td ul li .tag.local {
              background: #d45e05; }
        .space section .event table tr:last-of-type th, .space section .event table tr:last-of-type td {
          border-bottom: none; }
    .space section a.link-btn {
      display: block;
      position: relative;
      width: 100%;
      max-width: 700px;
      margin: 2em auto 0;
      padding: 18px;
      background: #235093;
      color: #fff;
      text-align: center;
      /*font-weight: 600;*/
      font-size: 1.4em;
      font-family: 'Noto Sans JP', sans-serif;
      border-radius: 100px;
      text-decoration: none;
      transition: all ease-in-out .3s; }
      .space section a.link-btn svg {
        position: absolute;
        width: 14px;
        fill: #fff;
        right: 25px;
        top: 50%;
        transform: translateY(-50%); }
      .space section a.link-btn:hover {
        opacity: .7; }
    .space section.missions .missions-img ul li {
      padding-top: 40px; }
  .space .movie .movie-wrap iframe {
    aspect-ratio: 16 / 9;
    vertical-align: bottom; }

@media screen and (max-width: 767px) {
  .space {
    /*section end*/ }
    .space .hidden-xs {
      display: none; }
    .space .visible-xs {
      display: block; }
    .space .wrapper {
      padding: 0 15px; }
    .space .inner {
      padding: 25px 15px; }
    .space section p.lead {
      text-align: left;
      font-size: 1em; }
      .space section p.lead .theme-text {
        display: block;
        font-size: 1.6em;
        line-height: 1;
        text-align: center; }
    .space section h4 {
      font-size: 1.2em; }
    .space section .event table tr th, .space section .event table tr td {
      display: block;
      width: 100%;
      padding: 14px 20px; }
    .space section .event table tr th {
      font-size: 1em;
      border-bottom: none; }
    .space section .event table tr td {
      font-size: 1em; }
      .space section .event table tr td ul li .tag {
        font-size: 0.85em;
        margin-right: 7px; }
    .space section a.link-btn {
      margin: 2em auto 0;
      padding: 15px;
      font-weight: 600;
      font-size: 1.1em; }
      .space section a.link-btn svg {
        width: 9px; } }
/******  animation setting  ******/
.fadeUp {
  opacity: 0;
  transform: translateY(30px);
  transition: .5s; }

.fadeUp.is-inview {
  opacity: 1;
  transform: translateY(0);
  transition-delay: .3s; }

.fadeIn {
  opacity: 0;
  transition: .5s; }

.fadeIn.is-inview {
  opacity: 1;
  transition-delay: .3s; }