@charset "UTF-8";
/* Scss Document */
body {
  position: relative;
  padding-top: 94px; }

/*--------------------------------------------------------
#global-nav
--------------------------------------------------------*/
#global-nav {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 94px;
  background-color: #fff;
  opacity: 0.8; }
  #global-nav .inner {
    display: flex;
    justify-content: space-between;
    margin: 0 50px;
    padding: 0; }
    @media (max-width: 1024px) {
      #global-nav .inner {
        margin: 0 20px; } }
    #global-nav .inner .site-title {
      display: flex; }
      @media (max-width: 1024px) {
        #global-nav .inner .site-title {
          flex-direction: column;
          margin: 0; } }
      #global-nav .inner .site-title a {
        display: block;
        width: 110px;
        height: auto;
        margin: 30px 30px 0 0; }
        @media (max-width: 1024px) {
          #global-nav .inner .site-title a {
            width: 30%;
            margin: 20px 10px 5px 0; } }
        #global-nav .inner .site-title a img {
          width: 100%;
          height: auto; }
      #global-nav .inner .site-title h1 {
        font-size: 21rem;
        font-weight: 500;
        color: #4c453e;
        margin: 50px 50px 0 0; }
        @media (max-width: 1024px) {
          #global-nav .inner .site-title h1 {
            font-size: 18rem;
            margin: 0; } }
    #global-nav .inner .navi {
      display: flex;
      justify-content: flex-end;
      margin-left: auto;
      padding: 0; }
      @media (max-width: 1024px) {
        #global-nav .inner .navi {
          position: relative;
          width: 100%;
          height: 100%;
          background: none;
          background-color: rgba(0, 0, 0, 0.95);
          display: block;
          border: none;
          position: fixed;
          top: 0;
          left: 0;
          transform: translateX(120%);
          transition: all 0.5s;
          z-index: 3;
          overflow-y: scroll; }
          #global-nav .inner .navi.active {
            transform: translateX(0%); } }
      #global-nav .inner .navi .naviArea {
        display: flex;
        margin-top: 25px;
        margin-right: 0; }
        @media (max-width: 1024px) {
          #global-nav .inner .navi .naviArea {
            display: block;
            margin-top: 94px;
            margin-right: 0;
            border-bottom: 1px solid #333; } }
        #global-nav .inner .navi .naviArea li {
          margin-left: 30px;
          font-weight: 700;
          line-height: 80px; }
          @media (max-width: 1024px) {
            #global-nav .inner .navi .naviArea li {
              margin-left: 0;
              border-top: 1px solid #333;
              text-align: center;
              line-height: 1.0; } }
          #global-nav .inner .navi .naviArea li a {
            display: block; }
            #global-nav .inner .navi .naviArea li a:hover {
              opacity: 0.7; }
            @media (max-width: 1024px) {
              #global-nav .inner .navi .naviArea li a {
                color: #cccccc;
                padding: 20px 0; } }
    #global-nav .inner .naviToggle {
      display: none; }
      @media (max-width: 1024px) {
        #global-nav .inner .naviToggle {
          display: block;
          position: fixed;
          width: 70px;
          height: 70px;
          top: 0;
          right: 0;
          z-index: 4; }
          #global-nav .inner .naviToggle span {
            display: block;
            position: absolute;
            width: 40px;
            left: 15px;
            border-bottom: 3px solid #000;
            transition: 0.3s ease-in-out; }
            #global-nav .inner .naviToggle span:nth-child(1) {
              top: 20px; }
            #global-nav .inner .naviToggle span:nth-child(2) {
              top: 30px; }
            #global-nav .inner .naviToggle span:nth-child(3) {
              top: 40px; }
          #global-nav .inner .naviToggle p {
            position: absolute;
            top: 50px;
            width: 100%;
            margin: 0 auto;
            text-align: center; } }
      #global-nav .inner .naviToggle.active span {
        border-bottom: 3px solid #fff; }
      #global-nav .inner .naviToggle.active p {
        color: #fff; }

/*--------------------------------------------------------
contents
--------------------------------------------------------*/
#video-wrapper {
  width: 100%;
  height: calc(100vh - 94px);
  overflow: hidden;
  margin: 0 0 80px 0;
  background-color: #000; }
  @media (max-width: 1024px) {
    #video-wrapper {
      height: auto;
      overflow: visible;
      margin: 0 0 60px 0; } }
  #video-wrapper video {
    display: block;
    width: auto;
    max-width: 100%;
    height: 100%;
    margin: 0 auto;
    filter: drop-shadow(0px 0px rgba(0, 0, 0, 0));
    outline: none;
    border: none; }
    @media (max-width: 1024px) {
      #video-wrapper video {
        width: 100%;
        height: auto;
        max-height: 100%; } }

#wrapper {
  margin: 0 50px 100px 50px; }
  @media (max-width: 1024px) {
    #wrapper {
      margin: 0 20px 100px 20px; } }
  #wrapper section {
    display: flex;
    max-width: 1200px;
    margin: 0 auto 100px auto; }
    @media (max-width: 1024px) {
      #wrapper section {
        flex-direction: column;
        width: 100%;
        margin: 0 auto 60px auto; } }
    #wrapper section .sec-title {
      width: 260px;
      padding-right: 40px; }
      @media (max-width: 1024px) {
        #wrapper section .sec-title {
          width: 100%;
          padding: 0; } }
      #wrapper section .sec-title h2 {
        width: 220px;
        border-top: 4px solid #ccc;
        padding-top: 20px;
        font-size: 22rem;
        color: #4c453e; }
        @media (max-width: 1024px) {
          #wrapper section .sec-title h2 {
            width: 100%;
            margin-bottom: 20px;
            padding: 20px 5px;
            font-size: 20rem;
            border-top: 2px solid #ccc; } }
    #wrapper section .sec-body {
      width: calc(100% - 240px); }
      @media (max-width: 1024px) {
        #wrapper section .sec-body {
          width: 95%;
          margin: 0 auto; } }
      #wrapper section .sec-body h3.exibi-title {
        margin-bottom: 20px;
        font-size: 28rem;
        font-weight: 600;
        line-height: 1.1; }
        #wrapper section .sec-body h3.exibi-title.purple {
          color: #682157; }
        #wrapper section .sec-body h3.exibi-title.red {
          color: #81201f; }
        #wrapper section .sec-body h3.exibi-title.green {
          color: #11552f; }
      #wrapper section .sec-body P {
        margin-bottom: 40px;
        font-size: 16rem;
        line-height: 2; }
        @media (max-width: 1024px) {
          #wrapper section .sec-body P {
            font-size: 14rem;
            line-height: 1.5; } }
        #wrapper section .sec-body P strong {
          font-size: 18rem; }
      #wrapper section .sec-body :last-child {
        margin-bottom: 0; }
    #wrapper section#section2 .sec-body .item {
      display: flex;
      margin-bottom: 60px; }
      @media (max-width: 480px) {
        #wrapper section#section2 .sec-body .item {
          flex-direction: column;
          margin-bottom: 40px; } }
      #wrapper section#section2 .sec-body .item:last-child {
        margin-bottom: 0; }
      #wrapper section#section2 .sec-body .item img {
        width: 250px;
        height: 250px;
        margin-right: 20px;
        border: 1px solid #eee; }
        @media (max-width: 480px) {
          #wrapper section#section2 .sec-body .item img {
            width: 100%;
            height: auto;
            margin: 0 0 20px 0; } }
      #wrapper section#section2 .sec-body .item .explanation {
        width: calc(100% - 272px); }
        @media (max-width: 480px) {
          #wrapper section#section2 .sec-body .item .explanation {
            width: 100%; } }
        #wrapper section#section2 .sec-body .item .explanation h3 {
          margin-bottom: 5px;
          font-size: 20rem;
          font-weight: 600;
          line-height: 1.1; }
          #wrapper section#section2 .sec-body .item .explanation h3 span {
            font-size: 14rem; }
          #wrapper section#section2 .sec-body .item .explanation h3 br {
            display: none; }
            @media (max-width: 480px) {
              #wrapper section#section2 .sec-body .item .explanation h3 br {
                display: inline; } }
        #wrapper section#section2 .sec-body .item .explanation p.size {
          font-size: 14rem;
          margin-bottom: 10px; }
        #wrapper section#section2 .sec-body .item .explanation p.comment {
          line-height: 2; }
          @media (max-width: 480px) {
            #wrapper section#section2 .sec-body .item .explanation p.comment {
              line-height: 1.5; } }
        #wrapper section#section2 .sec-body .item .explanation a {
          text-decoration: underline; }
          #wrapper section#section2 .sec-body .item .explanation a:hover {
            text-decoration: none; }
    #wrapper section#section3 .sec-body dl {
      display: flex;
      align-items: center;
      border-top: 1px dashed #ccc;
      border-bottom: 1px dashed #ccc; }
      @media (max-width: 480px) {
        #wrapper section#section3 .sec-body dl {
          flex-direction: column;
          border-top: 1px solid #ccc;
          border-bottom: none; } }
      #wrapper section#section3 .sec-body dl dt {
        width: 15%;
        padding: 35px 35px 35px 10px;
        font-weight: 700; }
        @media (max-width: 1024px) {
          #wrapper section#section3 .sec-body dl dt {
            width: 20%; } }
        @media (max-width: 480px) {
          #wrapper section#section3 .sec-body dl dt {
            width: 100%;
            padding: 20px 5px;
            font-size: 16rem;
            font-weight: 400;
            border-bottom: 1px dashed #ccc; } }
      #wrapper section#section3 .sec-body dl dd {
        width: 85%;
        padding: 35px 10px 35px 0;
        line-height: 1.5; }
        @media (max-width: 480px) {
          #wrapper section#section3 .sec-body dl dd {
            width: 100%;
            margin-bottom: 20px;
            padding: 20px 5px; } }
    #wrapper section#section4 .sec-body {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between; }
      @media (max-width: 480px) {
        #wrapper section#section4 .sec-body {
          flex-direction: column; } }
      #wrapper section#section4 .sec-body dl {
        width: 49%;
        margin-bottom: 20px; }
        @media (max-width: 480px) {
          #wrapper section#section4 .sec-body dl {
            width: 100%;
            margin-bottom: 10px; } }
        #wrapper section#section4 .sec-body dl dt {
          padding: 10px;
          background-color: #eee;
          font-weight: 700; }
        #wrapper section#section4 .sec-body dl dd {
          padding: 10px; }
          #wrapper section#section4 .sec-body dl dd li {
            margin-bottom: 10px;
            line-height: 1.5; }
    #wrapper section#section5 .sec-body {
      display: flex; }
      @media (max-width: 1024px) {
        #wrapper section#section5 .sec-body {
          flex-direction: column; } }
      #wrapper section#section5 .sec-body img {
        width: 420px;
        height: 230px;
        margin-right: 20px; }
        @media (max-width: 1024px) {
          #wrapper section#section5 .sec-body img {
            width: 100%;
            max-width: 700px;
            height: auto;
            margin: 0 auto 30px auto; } }
      #wrapper section#section5 .sec-body .access {
        width: calc(100% - 440px);
        font-size: 14rem; }
        @media (max-width: 1024px) {
          #wrapper section#section5 .sec-body .access {
            width: 100%; } }
        #wrapper section#section5 .sec-body .access p {
          line-height: 1.5;
          margin-bottom: 20px; }
        #wrapper section#section5 .sec-body .access dl dt {
          font-weight: 600;
          margin-bottom: 5px; }
        #wrapper section#section5 .sec-body .access dl dd {
          margin-bottom: 10px; }
          #wrapper section#section5 .sec-body .access dl dd ul {
            padding-left: 20px;
            list-style-type: disc; }
            #wrapper section#section5 .sec-body .access dl dd ul li {
              margin-bottom: 5px;
              line-height: 1.5; }
  #wrapper .button {
    width: 250px;
    margin: 0 auto 100px; }
    @media (max-width: 480px) {
      #wrapper .button {
        width: 60%; } }
    #wrapper .button a {
      display: block;
      position: relative;
      line-height: 80px;
      text-align: center;
      color: #000;
      background-color: #fff;
      border: 1px solid #000;
      transition: all .6s;
      z-index: 0; }
      @media (max-width: 1024px) {
        #wrapper .button a {
          background: url("../images/btn-arrow.png") no-repeat 3% 50%;
          background-size: 20px; } }
      @media (max-width: 480px) {
        #wrapper .button a {
          line-height: 80px;
          padding-left: 6px; } }
      #wrapper .button a:after {
        position: absolute;
        content: "";
        background: url("../images/btn-arrow.png") no-repeat 0 0;
        background-size: 20px;
        width: 20px;
        height: 9px;
        top: 50%;
        left: 3%;
        transform: translateY(-50%);
        transition: all .3s; }
        @media (max-width: 1024px) {
          #wrapper .button a:after {
            background: none; } }
      #wrapper .button a:hover {
        background-color: #849f99; }
        #wrapper .button a:hover:after {
          left: 5%; }

/*--------------------------------------------------------
footer
--------------------------------------------------------*/
footer {
  width: 100%;
  padding: 20px 0 40px 0;
  background-color: #172b14; }
  footer .yokoku {
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 900px;
    margin: 0 auto 30px auto; }
    @media (max-width: 1024px) {
      footer .yokoku {
        width: 90%;
        justify-content: left; } }
    footer .yokoku .title {
      display: flex;
      align-items: center;
      margin: 0 auto 10px auto; }
      footer .yokoku .title img {
        width: 60px;
        height: auto;
        margin-right: 10px; }
      footer .yokoku .title h2 {
        font-size: 24rem;
        font-weight: 400;
        color: #fff465; }
    footer .yokoku p {
      font-size: 16rem;
      font-weight: normal;
      line-height: 1.5;
      text-align: center;
      color: #fff; }
      @media (max-width: 480px) {
        footer .yokoku p {
          text-align: left; } }
      footer .yokoku p span {
        font-size: 12rem; }
  footer p.copy {
    text-align: center;
    color: #999; }

/* ページトップボタン */
#page-top {
  position: fixed;
  bottom: 20px;
  right: 10px; }
  @media (max-width: 480px) {
    #page-top {
      bottom: 20px;
      right: 5px; } }

#page-top a {
  display: block;
  width: 60px;
  height: auto; }
  @media (max-width: 480px) {
    #page-top a {
      width: 50px; } }
  #page-top a img {
    width: 100%;
    height: auto; }