/*
	CSS Document
	Author:
	version: 1.0
	Last Update: 2022.1.30
	web fonts: M PLUS Rounded 1c
*/
/* m-plus-rounded-1c-regular - latin_japanese */
@font-face {
  font-family: 'M PLUS Rounded 1c';
  font-style: normal;
  font-weight: 400;
  src: local(""), url("../fonts/m-plus-rounded-1c-v15-latin_japanese-regular.woff2") format("woff2"), url("../fonts/m-plus-rounded-1c-v15-latin_japanese-regular.woff") format("woff");
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ }
/* m-plus-rounded-1c-700 - latin_japanese */
@font-face {
  font-family: 'M PLUS Rounded 1c';
  font-style: normal;
  font-weight: 700;
  src: local(""), url("../fonts/m-plus-rounded-1c-v15-latin_japanese-700.woff2") format("woff2"), url("../fonts/m-plus-rounded-1c-v15-latin_japanese-700.woff") format("woff");
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ }
/* =======================
	Common
========================= */
body {
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.75em;
  background-color: gray; }

a {
  text-decoration: none; }

.hide {
  display: none; }

/* =======================
	iOS
========================= */
html {
  height: -webkit-fill-available; }

body {
  min-height: 100vh;
  min-height: 100dvh;
  min-height: -webkit-fill-available; }

/* =======================
	Wrapper
========================= */
#Wrapper {
  width: 100vw;
  max-width: 1920px;
  height: auto;
  margin: 0 auto;
  overflow-y: scroll; }
  #Wrapper::before {
    content: "";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    background: url("../images/background-pr.png") center center no-repeat;
    background-size: cover; }
  @media screen and (min-width: 576px) {
    #Wrapper {
      width: 100%;
      height: 100vh;
      height: 100dvh;
      min-height: 120vw;
      background: white url("../images/background-pr@2x.png") center center no-repeat;
      background-size: cover; } }
  @media screen and (min-width: 768px) {
    #Wrapper {
      width: 100%;
      height: 100vh;
      height: 100dvh;
      min-height: 120vw; } }
  @media screen and (min-width: 1024px) {
    #Wrapper {
      width: 100%;
      height: 100vh;
      height: 100dvh;
      min-height: 56.25vw;
      background: white url("../images/background-ls@2x.png") center top no-repeat;
      background-size: cover; } }
  @media screen and (min-width: 1920px) {
    #Wrapper {
      width: 1920px;
      height: 1080px;
      min-height: 1080px;
      margin: 0 auto;
      background: white url("../images/background-ls@2x.png") center top no-repeat;
      background-size: cover; }
      #Wrapper::before {
        content: none; } }

/* =======================
	Main Content
========================= */
main {
  position: relative;
  display: block;
  background: none;
  overflow: hidden;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 130vw; }
  @media screen and (min-width: 576px) {
    main {
      min-height: 130vw; } }
  @media screen and (min-width: 768px) {
    main {
      min-height: 130vw; } }
  @media screen and (min-width: 1024px) {
    main {
      min-height: 56.25vw; } }
  @media screen and (min-width: 1920px) {
    main {
      width: 1920px;
      height: 1080px;
      min-height: 1080px; } }
  main .gotoppage {
    position: absolute;
    right: 0;
    bottom: 8%;
    width: 50%;
    height: auto;
    margin: 0;
    transform: translateX(60%);
    transition: transform 0.2s linear;
    z-index: 4000; }
    @media screen and (min-width: 768px) {
      main .gotoppage {
        bottom: 10%;
        width: 40%; } }
    @media screen and (min-width: 1024px) {
      main .gotoppage {
        bottom: 11.85%;
        width: 30.73%; } }
    @media screen and (min-width: 1920px) {
      main .gotoppage {
        width: 590px; } }
    main .gotoppage__button {
      position: relative;
      top: 0;
      left: 0;
      width: 100%; }
      main .gotoppage__button a {
        display: block;
        width: 100%;
        height: 100%; }
    main .gotoppage__shadow {
      position: absolute;
      top: 2px;
      left: 2px;
      z-index: -1; }
      @media screen and (min-width: 1920px) {
        main .gotoppage__shadow {
          top: 4px;
          left: 4px;
          width: 100%;
          height: 100%; } }
    main .gotoppage img {
      display: block;
      width: 100%;
      height: auto; }
    main .gotoppage:hover {
      transform: translateX(40%); }

/* =======================
	Scroll Guide
========================= */
.scrollguide {
  position: absolute;
  left: 35%;
  bottom: 15%;
  width: 20px;
  height: 60px;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 4px;
  animation: 5s linear 0.5s 1 normal forwards scrollbase;
  opacity: 0;
  z-index: 3500; }
  .scrollguide--bar {
    position: relative;
    top: 12px;
    left: 9px;
    right: 9px;
    bottom: 12px;
    width: 2px;
    height: 36px;
    border-radius: 1px;
    background-color: #aeafb0;
    z-index: -1; }
  .scrollguide--area {
    position: absolute;
    top: 10px;
    left: 7px;
    right: 7px;
    width: 6px;
    height: 20px;
    border-radius: 3px;
    background-color: #007bc7;
    transform: translateY(0px);
    animation: 5s linear 0.5s 1 normal forwards scrollact;
    opacity: 0;
    z-index: 1; }
@keyframes scrollbase {
  0% {
    display: block;
    opacity: 0; }
  10% {
    opacity: 1; }
  70% {
    opacity: 1; }
  80% {
    opacity: 0; }
  100% {
    display: none; } }
@keyframes scrollact {
  0% {
    transform: translateY(0px);
    opacity: 0; }
  10% {
    transform: translateY(0px);
    opacity: 1; }
  20% {
    transform: translateY(20px); }
  30% {
    transform: translateY(0px); }
  40% {
    transform: translateY(20px); }
  50% {
    transform: translateY(0px); }
  60% {
    transform: translateY(20px); }
  70% {
    transform: translateY(0px);
    opacity: 1; }
  80% {
    opacity: 0; } }