@charset "UTF-8";
/*
	CSS Document
	Author:
	version: 1.0
	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: 0;
    width: 100%;
    height: 20%; }
    @media screen and (min-width: 768px) {
      main .page__head {
        top: 0;
        width: 100%;
        height: 25%; } }
    @media screen and (min-width: 1024px) {
      main .page__head {
        top: 5%;
        width: 100%;
        height: 30%; } }
    @media screen and (min-width: 1920px) {
      main .page__head {
        top: 54px;
        width: 100%;
        height: 324px; } }
    main .page__head--mark {
      position: absolute;
      width: 20%;
      height: auto;
      top: 5%;
      left: auto;
      right: 3%;
      margin: 0;
      z-index: 99; }
      @media screen and (min-width: 768px) {
        main .page__head--mark {
          top: 10%; } }
      @media screen and (min-width: 1024px) {
        main .page__head--mark {
          width: 12.8%;
          right: 3.65%; } }
      @media screen and (min-width: 1920px) {
        main .page__head--mark {
          width: 246px;
          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: 14%;
      left: 5%;
      margin: 0;
      overflow: hidden; }
      @media screen and (min-width: 768px) {
        main .page__head--title {
          top: 20%; } }
      @media screen and (min-width: 1024px) {
        main .page__head--title {
          width: 65%;
          top: 10%;
          left: 8%;
          height: 0;
          padding-top: 9.2%; } }
      @media screen and (min-width: 1920px) {
        main .page__head--title {
          top: 40px;
          left: 120px;
          width: 1280px;
          height: 0;
          padding-top: 162px; } }
      main .page__head--title img {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: auto; }
    main .page__head--radio {
      position: absolute;
      width: 17em;
      height: auto;
      top: 36%;
      left: 6%;
      margin: 0.5em 0;
      text-align: left;
      overflow: hidden;
      z-index: 4000; }
      main .page__head--radio .brank {
        display: none; }
      @media screen and (min-width: 768px) {
        main .page__head--radio {
          top: 47%;
          left: 6.25%;
          width: 65%;
          margin: 0.5em 0.4em; } }
      @media screen and (min-width: 1024px) {
        main .page__head--radio {
          top: 47%;
          left: 6.25%;
          right: 30%;
          width: auto;
          margin: 1em 0.4em; }
          main .page__head--radio .brank {
            display: inline-block;
            width: 34%; } }
      @media screen and (min-width: 1920px) {
        main .page__head--radio {
          top: 210px;
          left: 120px;
          right: 400px;
          margin: 1.2em 0.5em; }
          main .page__head--radio .brank {
            display: inline-block;
            width: 400px; } }
  main .page__charactor {
    position: absolute;
    width: 64%;
    height: auto;
    top: 16%;
    right: -4%;
    bottom: auto;
    margin: 0 0 0 auto;
    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: 25%;
        right: -2%;
        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 .movie__innerbox {
  position: relative;
  top: 90px;
  width: 100%;
  height: calc( 80% - 90px );
  padding: 0 30% 0 5%;
  overflow-y: scroll; }
  @media screen and (min-width: 768px) {
    main .movie__innerbox {
      top: 0;
      height: 75%;
      padding: 0 30% 0 6%; } }
  @media screen and (min-width: 1024px) {
    main .movie__innerbox {
      top: 0;
      height: 70%;
      padding: 0 30% 0 6%; } }
  @media screen and (min-width: 1920px) {
    main .movie__innerbox {
      top: 54px;
      height: 702px;
      padding: 0 350px 0 50px; } }
  main .movie__innerbox--knowledge {
    width: 100%;
    margin: 0 auto 30px;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; }
    @media screen and (min-width: 768px) {
      main .movie__innerbox--knowledge {
        margin: 0 auto 30px; } }
    @media screen and (min-width: 1024px) {
      main .movie__innerbox--knowledge {
        margin: 0 auto 30px;
        justify-content: center; } }
    @media screen and (min-width: 1024px) {
      main .movie__innerbox--knowledge {
        margin: 0 auto 50px; } }
    main .movie__innerbox--knowledge li {
      display: inline-block;
      width: 98%;
      max-width: 240px;
      margin: 1%;
      padding: 0; }
      @media screen and (min-width: 768px) {
        main .movie__innerbox--knowledge li {
          width: calc( 50% - 10px );
          max-width: 320px;
          margin: 5px; } }
      @media screen and (min-width: 1024px) {
        main .movie__innerbox--knowledge li {
          width: calc( ( 100% / 3 ) - 10px );
          max-width: 320px;
          margin: 5px; } }
      @media screen and (min-width: 1920px) {
        main .movie__innerbox--knowledge li {
          width: 320px;
          margin: 15px; } }
      main .movie__innerbox--knowledge li a {
        display: block;
        transition: all 0.1s linear; }
        main .movie__innerbox--knowledge li a:hover {
          box-shadow: 0 0 6px 2px #f0e900;
          transform: rotate(-3deg); }
        main .movie__innerbox--knowledge li a:active {
          box-shadow: 0 0 6px 2px #f0e900;
          transform: rotate(-3deg) scale(1.2); }
      main .movie__innerbox--knowledge li img {
        width: 100%;
        height: auto; }

/* =======================
	radio
========================= */
/* 選択肢 */
input[type="radio"] {
  display: none; }
  input[type="radio"] + label {
    position: relative;
    display: inline-block;
    margin: 0 1em 0.25em 0;
    padding: 0 0 0 20px;
    font-size: 16px;
    font-weight: 700;
    color: #202020;
    line-height: 16px;
    border-radius: 0;
    box-shadow: none;
    transition: all 0.5s; }
    @media screen and (min-width: 768px) {
      input[type="radio"] + label {
        margin: 0 2em 0.35em 0;
        padding: 0 0 0 22px;
        font-size: 18px;
        line-height: 18px; } }
    @media screen and (min-width: 1024px) {
      input[type="radio"] + label {
        margin: 0 1.6em 0.5em 0;
        padding: 0 0 0 22px;
        font-size: 18px;
        line-height: 18px; } }
    @media screen and (min-width: 1920px) {
      input[type="radio"] + label {
        padding: 0 0 0 33px;
        font-size: 28px;
        line-height: 28px; } }
    input[type="radio"] + label:hover {
      cursor: pointer; }
    input[type="radio"] + label::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      width: 16px;
      height: 16px;
      background-color: white;
      border: 2px solid #202020;
      border-radius: 0;
      vertical-align: text-bottom; }
      @media screen and (min-width: 768px) {
        input[type="radio"] + label::before {
          width: 18px;
          height: 18px; } }
      @media screen and (min-width: 1024px) {
        input[type="radio"] + label::before {
          width: 18px;
          height: 18px; } }
      @media screen and (min-width: 1920px) {
        input[type="radio"] + label::before {
          width: 28px;
          height: 28px; } }
    input[type="radio"] + label::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      width: 16px;
      height: 16px;
      background-color: none;
      border-radius: 0;
      transition: all 0.5s;
      vertical-align: text-bottom; }
      @media screen and (min-width: 768px) {
        input[type="radio"] + label::after {
          width: 18px;
          height: 18px; } }
      @media screen and (min-width: 1024px) {
        input[type="radio"] + label::after {
          width: 18px;
          height: 18px; } }
      @media screen and (min-width: 1920px) {
        input[type="radio"] + label::after {
          width: 28px;
          height: 28px; } }
  input[type="radio"]:checked + label::before {
    background-color: white; }
  input[type="radio"]:checked + label::after {
    background-color: #333; }