/*
	CSS Document
	Author:
	version: 1.2
	Last Update: 2022.2.8
	web fonts: M PLUS Rounded 1c
*/
/* =======================
	Main Content
========================= */
main .page {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  text-align: center; }
  @media screen and (min-width: 1920px) {
    main .page {
      width: 1920px;
      height: 1080px; } }
  main .page__head {
    position: relative;
    top: 10px;
    width: 100%;
    height: 80px; }
    @media screen and (min-width: 768px) {
      main .page__head {
        top: 30px;
        width: 100%;
        height: 150px; } }
    @media screen and (min-width: 1024px) {
      main .page__head {
        top: 40px;
        width: 100%;
        height: 200px; } }
    @media screen and (min-width: 1920px) {
      main .page__head {
        top: 50px;
        width: 100%;
        height: 250px; } }
    main .page__head--mark {
      position: absolute;
      width: 80px;
      height: auto;
      top: 0;
      bottom: 0;
      left: auto;
      right: 3%;
      margin: auto 0;
      z-index: 99; }
      @media screen and (min-width: 768px) {
        main .page__head--mark {
          width: 150px; } }
      @media screen and (min-width: 1024px) {
        main .page__head--mark {
          width: 200px;
          right: 3.65%; } }
      @media screen and (min-width: 1920px) {
        main .page__head--mark {
          width: 250px;
          right: 70px; } }
      main .page__head--mark a {
        display: block;
        width: 100%;
        height: auto; }
      main .page__head--mark img {
        display: block;
        width: 100%;
        height: auto; }
    main .page__head--title {
      position: absolute;
      width: 65%;
      height: 0;
      padding-top: 8.2%;
      top: 0;
      bottom: 0;
      left: 5%;
      margin: auto 0;
      overflow: hidden; }
      @media screen and (min-width: 1024px) {
        main .page__head--title {
          width: 65%;
          left: 8%;
          padding-top: 8.5%; } }
      @media screen and (min-width: 1920px) {
        main .page__head--title {
          left: 120px;
          width: 1280px;
          padding-top: 162px; } }
      main .page__head--title img {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: auto; }
  main .page__charactor {
    position: absolute;
    width: 64%;
    height: auto;
    top: 25%;
    right: -2%;
    bottom: 0;
    margin: auto 0;
    z-index: 1000;
    pointer-events: none; }
    @media screen and (min-width: 576px) {
      main .page__charactor {
        width: 55%; } }
    @media screen and (min-width: 768px) {
      main .page__charactor {
        top: 30%;
        right: 8%;
        width: 45%; } }
    @media screen and (min-width: 1024px) {
      main .page__charactor {
        top: 30%;
        right: 0;
        width: 30%; } }
    @media screen and (min-width: 1920px) {
      main .page__charactor {
        top: 324px;
        width: 554px;
        height: auto; } }
    main .page__charactor--pict {
      width: 100%;
      pointer-events: none; }
      main .page__charactor--pict img {
        display: block;
        width: 100%;
        height: auto; }
  main .page__innerbox {
    position: relative;
    top: 20px;
    width: 100%;
    height: calc( 100% - 100px );
    padding: 10px 6% 2em 6%;
    z-index: 900; }
    @media screen and (min-width: 768px) {
      main .page__innerbox {
        top: 50px;
        height: calc( 100% - 200px );
        padding: 20px 10% 2em 10%; } }
    @media screen and (min-width: 1024px) {
      main .page__innerbox {
        top: 50px;
        height: calc( 100% - 250px );
        padding: 40px 30% 0 10%; } }
    @media screen and (min-width: 1920px) {
      main .page__innerbox {
        top: 100px;
        height: 730px;
        padding: 50px 450px 0 140px; } }
    main .page__innerbox--movie {
      position: relative;
      top: 0;
      left: 0;
      width: 100%;
      height: 0;
      padding-top: calc( (116/1138) * 100% );
      margin: 0 0 20px 0; }
      @media screen and (min-width: 768px) {
        main .page__innerbox--movie {
          margin: 0 0 25px 0; } }
      @media screen and (min-width: 1024px) {
        main .page__innerbox--movie {
          margin: 0 0 36px 0; } }
      @media screen and (min-width: 1920px) {
        main .page__innerbox--movie {
          margin: 0 0 40px 0; } }
      main .page__innerbox--movie div {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: auto; }
        main .page__innerbox--movie div a {
          display: block;
          width: 100%;
          height: auto; }
          @media screen and (min-width: 1920px) {
            main .page__innerbox--movie div a {
              width: auto;
              height: 100%; } }
          main .page__innerbox--movie div a:hover {
            cursor: pointer; }
            main .page__innerbox--movie div a:hover img {
              filter: brightness(1.2); }
          main .page__innerbox--movie div a:active img {
            filter: brightness(1.2); }
          main .page__innerbox--movie div a::after {
            content: "";
            position: absolute;
            top: 2px;
            left: 2px;
            display: block;
            width: 100%;
            height: 100%;
            background: url("../images/button-interactive-shadow@2x.png") left top no-repeat;
            background-size: contain;
            z-index: -1; }
            @media screen and (min-width: 768px) {
              main .page__innerbox--movie div a::after {
                top: 3px;
                left: 3px; } }
            @media screen and (min-width: 1024px) {
              main .page__innerbox--movie div a::after {
                top: 4px;
                left: 4px; } }
    main .page__innerbox--buttons {
      position: relative;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      margin: 0;
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      align-content: flex-start;
      align-items: flex-start;
      z-index: 1100; }
      @media screen and (min-width: 576px) {
        main .page__innerbox--buttons {
          height: 100%; } }
      @media screen and (min-width: 768px) {
        main .page__innerbox--buttons {
          height: 80%; } }
      @media screen and (min-width: 1024px) {
        main .page__innerbox--buttons {
          height: 26vw; } }
      @media screen and (min-width: 1920px) {
        main .page__innerbox--buttons {
          height: 450px; } }
      main .page__innerbox--buttons li {
        position: relative;
        display: block;
        width: 38.5%;
        height: auto;
        margin: 0 61.5% 20px 0; }
        @media screen and (min-width: 768px) {
          main .page__innerbox--buttons li {
            width: 38.5%;
            height: auto;
            margin: 0 61.5% 4% 0; } }
        @media screen and (min-width: 1024px) {
          main .page__innerbox--buttons li {
            width: 38.5%;
            height: auto;
            margin: 0 11.5% 4% 0; } }
        @media screen and (min-width: 1920px) {
          main .page__innerbox--buttons li {
            width: 50%;
            height: 116px;
            margin: 0 0 32px 0; } }
        main .page__innerbox--buttons li a {
          display: block;
          width: 100%;
          height: auto; }
          @media screen and (min-width: 1920px) {
            main .page__innerbox--buttons li a {
              width: auto;
              height: 100%; } }
          main .page__innerbox--buttons li a:hover {
            cursor: pointer; }
            main .page__innerbox--buttons li a:hover img {
              filter: brightness(1.2); }
          main .page__innerbox--buttons li a:active img {
            filter: brightness(1.2); }
          main .page__innerbox--buttons li a img {
            width: 100%;
            height: auto; }
            @media screen and (min-width: 1920px) {
              main .page__innerbox--buttons li a img {
                width: auto;
                height: 100%; } }
          main .page__innerbox--buttons li a::before {
            content: "";
            position: absolute;
            top: -15%;
            right: -8%;
            display: block;
            width: 25%;
            height: 60%;
            background: url("../images/rotate360c.svg") right top no-repeat;
            background-size: contain;
            z-index: 2; }
            @media screen and (min-width: 1024px) {
              main .page__innerbox--buttons li a::before {
                top: -20%; } }
            @media screen and (min-width: 1920px) {
              main .page__innerbox--buttons li a::before {
                right: 28%; } }
          main .page__innerbox--buttons li a::after {
            content: "";
            position: absolute;
            top: 2px;
            left: 2px;
            display: block;
            width: 100%;
            height: 100%;
            background: url("../images/button-a-shadow@2x.png") left top no-repeat;
            background-size: contain;
            z-index: -1; }
            @media screen and (min-width: 768px) {
              main .page__innerbox--buttons li a::after {
                top: 3px;
                left: 3px; } }
            @media screen and (min-width: 1024px) {
              main .page__innerbox--buttons li a::after {
                top: 4px;
                left: 4px; } }
    main .page__innerbox--subbox {
      position: relative;
      height: 96%;
      padding: 0 0 10%;
      overflow-y: scroll;
      -ms-overflow-style: none;
      /* IE & Edge */
      scrollbar-width: none;
      /* Firefox */ }
      main .page__innerbox--subbox::-webkit-scrollbar {
        display: none;
        /* Chrome & Safari */ }
      @media screen and (min-width: 768px) {
        main .page__innerbox--subbox {
          height: 96%; } }
      @media screen and (min-width: 1024px) {
        main .page__innerbox--subbox {
          height: 80%; } }
      @media screen and (min-width: 1920px) {
        main .page__innerbox--subbox {
          height: calc( 100% - 170px ); } }
    main .page__innerbox--notice {
      position: relative;
      width: 65%;
      height: auto;
      margin: auto 0;
      padding: 0 0 0 1em;
      list-style: none;
      font-size: clamp(14px, 1.2vw, 18px);
      color: #202020;
      font-weight: 400;
      line-height: 1.5em;
      text-align: justify;
      overflow-y: scroll;
      -ms-overflow-style: none;
      /* IE & Edge */
      scrollbar-width: none;
      /* Firefox */
      z-index: 1100; }
      main .page__innerbox--notice::-webkit-scrollbar {
        display: none;
        /* Chrome & Safari */ }
      @media screen and (min-width: 768px) {
        main .page__innerbox--notice {
          top: 0;
          width: 45%;
          height: auto; } }
      @media screen and (min-width: 1024px) {
        main .page__innerbox--notice {
          top: 0;
          width: 100%;
          height: auto; } }
      @media screen and (min-width: 1920px) {
        main .page__innerbox--notice {
          width: 1240px;
          height: auto; } }
      main .page__innerbox--notice li {
        position: relative;
        display: block;
        width: 100%;
        height: auto;
        padding: 0 0 0.4em 0;
        font-feature-settings: "palt";
        line-height: 1.4em;
        text-indent: -1em; }
        main .page__innerbox--notice li .exlink {
          display: inline-block;
          font-size: 110%;
          font-weight: 700;
          text-decoration: underline;
          padding: 0.35em 1em;
          color: #202020; }
      main .page__innerbox--notice img {
        display: block;
        width: 100%;
        height: auto; }
      main .page__innerbox--notice .b-notice-table {
        border-collapse: collapse;
        width: calc( 100% - 2px );
        margin: 0.4em 0;
        font-size: 13px; }
        @media screen and (min-width: 768px) {
          main .page__innerbox--notice .b-notice-table {
            font-size: inherit; } }
        @media screen and (min-width: 1024px) {
          main .page__innerbox--notice .b-notice-table {
            font-size: inherit; } }
        main .page__innerbox--notice .b-notice-table th {
          padding: 0.25em 0;
          text-align: center;
          background-color: #dae9d5;
          border: 1px solid #202020; }
        main .page__innerbox--notice .b-notice-table td {
          padding: 0.25em 0.5em;
          text-align: justify;
          background-color: white;
          border: 1px solid #202020; }
          main .page__innerbox--notice .b-notice-table td:last-child {
            min-width: 7.2em; }
    main .page__innerbox .documents {
      position: relative;
      top: 0;
      left: inherit;
      right: auto;
      display: block;
      width: 65%;
      text-align: center;
      padding: 0 0 10px;
      text-indent: 0;
      z-index: 1150; }
      main .page__innerbox .documents a {
        position: relative;
        display: block;
        width: 100%;
        height: 0;
        padding-top: calc( (73/528) * 100% );
        margin: 0;
        text-indent: -99999px;
        background-position: 0 0;
        background-repeat: no-repeat;
        background-size: contain; }
        main .page__innerbox .documents a::after {
          content: "";
          position: absolute;
          top: 2px;
          left: 2px;
          display: block;
          width: 100%;
          height: 100%;
          background: url("../images/button-b-shadow@2x.png") left top no-repeat;
          background-size: contain;
          z-index: -1; }
          @media screen and (min-width: 768px) {
            main .page__innerbox .documents a::after {
              top: 2px;
              left: 2px; } }
          @media screen and (min-width: 1024px) {
            main .page__innerbox .documents a::after {
              top: 3px;
              left: 3px; } }
        main .page__innerbox .documents a:hover {
          filter: brightness(1.2); }
          main .page__innerbox .documents a:hover::after {
            opacity: 0; }
        main .page__innerbox .documents a:active {
          filter: brightness(1.2); }
          main .page__innerbox .documents a:active::after {
            opacity: 0; }
      @media screen and (min-width: 768px) {
        main .page__innerbox .documents {
          width: 50%; } }
      @media screen and (min-width: 1024px) {
        main .page__innerbox .documents {
          width: 80%; }
          main .page__innerbox .documents a {
            width: 60%;
            padding-top: calc( (73/528) * 60% );
            margin: 2px 2%; } }
      main .page__innerbox .documents--download#Report {
        background-image: url("../images/button-b.png"); }
        @media screen and (min-width: 768px) {
          main .page__innerbox .documents--download#Report {
            background-image: url("../images/button-b@2x.png"); } }
      main .page__innerbox .documents--download#Scenario {
        background-image: url("../images/button-b2.png"); }
        @media screen and (min-width: 768px) {
          main .page__innerbox .documents--download#Scenario {
            background-image: url("../images/button-b2@2x.png"); } }
      main .page__innerbox .documents--download#Memo119 {
        background-image: url("../images/button-b3.png"); }
        @media screen and (min-width: 768px) {
          main .page__innerbox .documents--download#Memo119 {
            background-image: url("../images/button-b3@2x.png"); } }
  main .page.training .page__innerbox {
    background-color: rgba(217, 240, 255, 0.8); }