@font-face {
    font-family: "棘丸ゴシック";
    /*src: url(TogeMaruGothic-200-Thin.ttf);
    src: url(TogeMaruGothic-300-Light.ttf);*/
    /*src: url(TogeMaruGothic-400-Regular.ttf);*/
    src: url(Subset6-TogeMaruGothic-400-Regular.ttf);
    /*src: url(TogeMaruGothic-600-Medium.ttf);
    src: url(TogeMaruGothic-700-Bold.ttf);
    src: url(TogeMaruGothic-800-Heavy.ttf);
    src: url(TogeMaruGothic-900-Black.ttf);*/
}

body {
  font-family: "棘丸ゴシック";
  color: #111;
  background-color: #5a5a5a;
  margin: 0;
}

.background::before {
  content:"";
  display:block;
  background-image: url("白黒_web背景.jpg");
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: -1;
}

/* 縦横比率が2:1以下の場合のスタイル */
@media only screen and (max-aspect-ratio: 1/2) {
    .ningen {
        width: 100%;
        height: 100%;
    }

    .saka {
        position: fixed;
        height: 100vh;
        left: -5vw;
        z-index: -1;
    }
    
    .ori {
        position: fixed;
        height: 100vh;
        right: -5vw;
        z-index: -1;
    }

    .title {
        color: #ffffff;
        text-align: center;
        padding-top: 5vw;
        filter: drop-shadow(0.1vw 0.1vw 0.5vw #111111);
    }
    
    .top_logo {
        width: 30vw;
    }

    /*文字たち*/
    h2 {
        text-align: center;
        font-size: 4.5vw;
    }
    
    h3 {
        text-align: center;
        font-size: 3.5vw;
    }
    
    p {
        font-size: 3vw;
        line-height: 4vw;
    }

    .attention {
        font-size: 2.5vw;
        line-height: 3vw;
    }
    
    a {
        text-decoration: none;
        color: #111;
    }

    

    /*白いの*/
    .test_white01 {
        color: #111111;
        margin: 2.5vw 5vw 10vw 5vw;
        padding: 5vw 0vw;
        width: 90vw;
        background-color: rgba(255, 255, 255, 0.8);
        z-index: 1;
    }
    
    .test_white02 {
        color: #111111;
        margin: 10vw 5vw;
        padding: 5vw 0vw;
        width: 90vw;
        background-color: rgba(255, 255, 255, 0.8);
    }

    

    /*メニュー*/
    .menu-btn {
        position: fixed;
        top: 3vw;
        right: 3vw;
        display: flex;
        height: 8vw;
        width: 8vw;
        justify-content: center;
        align-items: center;
        z-index: 90;
        /*filter: blur(0.05vw);*/
    }

    .menu-btn span,
    .menu-btn span:before,
    .menu-btn span:after {
        content:" ";
        display: block;
        height: 0.25vw;
        width: 6vw;
        background-color: #fff;
        position: absolute;
    }

    .menu-btn span:before {
        bottom: 1.5vw;
    }

    .menu-btn span:after {
        top: 1.5vw;
    }

    #menu-btn-check:checked ~ .menu-btn span {
        background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
    }
    #menu-btn-check:checked ~ .menu-btn span::before {
        bottom: 0;
        transform: rotate(45deg);
        background-color: #5a5a5a;
    }
    #menu-btn-check:checked ~ .menu-btn span::after {
        top: 0;
        transform: rotate(-45deg);
        background-color: #5a5a5a;
    }

    /*中身自体*/
    .menu-content {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        z-index: 2;
        background-color: #fff;
        pointer-events: none;
        opacity: 0;
    }

    .is-active {
        pointer-events: auto;
    }

    .menu-content ul {
        height: 80%;
        overflow: auto;
        padding: 10vw 3vw 0;
    }
    .menu-content ul li {
        border-bottom: solid 0.25vw #5a5a5a;
        list-style: none;
    }
    .menu-content ul li a {
        display: block;
        font-size: 3.5vw;
        color:#5a5a5a;
        text-decoration: none;
        padding: 5vw 0 5vw 20vw;
    }
    .menu-content ul li a::before {
        content: "";
        width: 5vw;
        height: 4vw;
        transform: rotate(45deg);
        position: absolute;
        top: 7vw;
    }

    #menu-btn-check:checked ~ .menu-content {
        opacity: 1;/*メニューを画面内へ*/
    }

    #menu-btn-check {
        display: none;
    }

    .menu-coin {
        display: block;
        padding: 5vw 5vw 5vw 10vw;
        background-color: #fff;
        background-position: left 5vw center;
        background-repeat: no-repeat;
        background-size: 7.5vw 7.5vw;
        overflow-wrap: break-word;
        background-image: url("コイン.png");
    }

    .diagram {
        width: 70vw;
        margin: 2.5vw;
        background-color: rgba(90, 90, 90, 0.7);
        box-shadow: inset 0 0 1vw rgba(255, 255, 255, 0.8);
    }

    .diagram {
        width: 70vw;
        margin: 2.5vw;
        background-color: rgba(90, 90, 90, 0.7);
        box-shadow: inset 0 0 1vw rgba(255, 255, 255, 0.8);
    }
    
}

/* 縦横比率が2:1より大きく16:9以下の場合のスタイル */
@media only screen and (min-aspect-ratio: 1/2) and (max-aspect-ratio: 9/16) {
    .ningen {
        width: 100%;
        height: 100%;
    }

    .saka {
        position: fixed;
        width: 155vw;
        left: 0;
        z-index: -1;
    }
    
    .ori {
        position: fixed;
        width: 155vw;
        right: 0;
        z-index: -1;
    }

    .title {
        color: #ffffff;
        text-align: center;
        padding-top: 5vw;
        filter: drop-shadow(0.1vw 0.1vw 0.5vw #111111);
    }
    
    .top_logo {
        width: 30vw;
    }

    /*文字たち*/
    h2 {
        text-align: center;
        font-size: 4.5vw;
    }
    
    h3 {
        text-align: center;
        font-size: 3.5vw;
    }
    
    p {
        font-size: 3vw;
        line-height: 4vw;
    }

    .attention {
        font-size: 2.5vw;
        line-height: 3vw;
    }
    
    a {
        text-decoration: none;
        color: #111;
    }

    

    /*白いの*/
    .test_white01 {
        color: #111111;
        margin: 2.5vw 5vw 10vw 5vw;
        padding: 5vw 0vw;
        width: 90vw;
        background-color: rgba(255, 255, 255, 0.8);
        z-index: 1;
    }
    
    .test_white02 {
        color: #111111;
        margin: 10vw 5vw;
        padding: 5vw 0vw;
        width: 90vw;
        background-color: rgba(255, 255, 255, 0.8);
    }

    

    /*メニュー*/
    .menu-btn {
        position: fixed;
        top: 3vw;
        right: 3vw;
        display: flex;
        height: 8vw;
        width: 8vw;
        justify-content: center;
        align-items: center;
        z-index: 90;
        /*filter: blur(0.05vw);*/
    }

    .menu-btn span,
    .menu-btn span:before,
    .menu-btn span:after {
        content:" ";
        display: block;
        height: 0.25vw;
        width: 6vw;
        background-color: #fff;
        position: absolute;
    }

    .menu-btn span:before {
        bottom: 1.5vw;
    }

    .menu-btn span:after {
        top: 1.5vw;
    }

    #menu-btn-check:checked ~ .menu-btn span {
        background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
    }
    #menu-btn-check:checked ~ .menu-btn span::before {
        bottom: 0;
        transform: rotate(45deg);
        background-color: #5a5a5a;
    }
    #menu-btn-check:checked ~ .menu-btn span::after {
        top: 0;
        transform: rotate(-45deg);
        background-color: #5a5a5a;
    }

    /*中身自体*/
    .menu-content {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        z-index: 2;
        background-color: #fff;
        pointer-events: none;
        opacity: 0;
    }

    .is-active {
        pointer-events: auto;
    }

    .menu-content ul {
        height: 80%;
        overflow: auto;
        padding: 10vw 3vw 0;
    }
    .menu-content ul li {
        border-bottom: solid 0.25vw #5a5a5a;
        list-style: none;
    }
    .menu-content ul li a {
        display: block;
        font-size: 3.5vw;
        color:#5a5a5a;
        text-decoration: none;
        padding: 5vw 0 5vw 20vw;
    }
    .menu-content ul li a::before {
        content: "";
        width: 5vw;
        height: 4vw;
        transform: rotate(45deg);
        position: absolute;
        top: 7vw;
    }

    #menu-btn-check:checked ~ .menu-content {
        opacity: 1;/*メニューを画面内へ*/
    }

    #menu-btn-check {
        display: none;
    }

    .menu-coin {
        display: block;
        padding: 5vw 5vw 5vw 10vw;
        background-color: #fff;
        background-position: left 5vw center;
        background-repeat: no-repeat;
        background-size: 7.5vw 7.5vw;
        overflow-wrap: break-word;
        background-image: url("コイン.png");
    }

    .diagram {
        width: 70vw;
        margin: 2.5vw;
        background-color: rgba(90, 90, 90, 0.7);
        box-shadow: inset 0 0 1vw rgba(255, 255, 255, 0.8);
    }
    
}

/* 縦横比率が16:9より大きく4:3以下の場合のスタイル */
@media only screen and (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
    /* 16:9以上 の縦横比率に対するスタイル */
    .ningen {
        width: 100%;
        height: 100%;
    }

    .saka {
        position: fixed;
        height: 100vh;
        left: 0;
        z-index: -1;
    }
    
    .ori {
        position: fixed;
        height: 100vh;
        right: 0;
        z-index: -1;
    }

    .title {
        color: #ffffff;
        text-align: center;
        padding-top: 5vw;
        filter: drop-shadow(0.1vw 0.1vw 0.5vw #111111);
    }
    
    .top_logo {
        width: 30vw;
    }
    
    /*文字たち*/
    h2 {
        text-align: center;
        font-size: 4.5vw;
    }
    
    h3 {
        text-align: center;
        font-size: 3.5vw;
    }
    
    p {
        font-size: 3vw;
        line-height: 4vw;
    }

    .attention {
        font-size: 2.5vw;
        line-height: 3vw;
    }
    
    a {
        text-decoration: none;
        color: #111;
    }

    

    /*白いの*/
    .test_white01 {
        color: #111111;
        margin: 2.5vw 5vw 10vw 5vw;
        padding: 5vw 0vw;
        width: 90vw;
        background-color: rgba(255, 255, 255, 0.8);
        z-index: 1;
    }
    
    .test_white02 {
        color: #111111;
        margin: 10vw 5vw;
        padding: 5vw 0vw;
        width: 90vw;
        background-color: rgba(255, 255, 255, 0.8);
    }

    

    /*メニュー*/
    .menu-btn {
        position: fixed;
        top: 3vw;
        right: 3vw;
        display: flex;
        height: 8vw;
        width: 8vw;
        justify-content: center;
        align-items: center;
        z-index: 90;
        /*filter: blur(0.05vw);*/
    }

    .menu-btn span,
    .menu-btn span:before,
    .menu-btn span:after {
        content:" ";
        display: block;
        height: 0.25vw;
        width: 6vw;
        background-color: #fff;
        position: absolute;
    }

    .menu-btn span:before {
        bottom: 1.5vw;
    }

    .menu-btn span:after {
        top: 1.5vw;
    }

    #menu-btn-check:checked ~ .menu-btn span {
        background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
    }
    #menu-btn-check:checked ~ .menu-btn span::before {
        bottom: 0;
        transform: rotate(45deg);
        background-color: #5a5a5a;
    }
    #menu-btn-check:checked ~ .menu-btn span::after {
        top: 0;
        transform: rotate(-45deg);
        background-color: #5a5a5a;
    }

    /*中身自体*/
    .menu-content {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        z-index: 2;
        background-color: #fff;
        pointer-events: none;
        opacity: 0;
    }

    .is-active {
        pointer-events: auto;
    }

    .menu-content ul {
        height: 80%;
        overflow: auto;
        padding: 10vw 3vw 0;
    }
    .menu-content ul li {
        border-bottom: solid 0.25vw #5a5a5a;
        list-style: none;
    }
    .menu-content ul li a {
        display: block;
        font-size: 3.5vw;
        color:#5a5a5a;
        text-decoration: none;
        padding: 5vw 0 5vw 20vw;
    }
    .menu-content ul li a::before {
        content: "";
        width: 5vw;
        height: 4vw;
        transform: rotate(45deg);
        position: absolute;
        top: 7vw;
    }

    #menu-btn-check:checked ~ .menu-content {
        opacity: 1;/*メニューを画面内へ*/
    }

    #menu-btn-check {
        display: none;
    }

    .menu-coin {
        display: block;
        padding: 5vw 5vw 5vw 10vw;
        background-color: #fff;
        background-position: left 5vw center;
        background-repeat: no-repeat;
        background-size: 7.5vw 7.5vw;
        overflow-wrap: break-word;
        background-image: url("コイン.png");
    }

    .diagram {
        width: 70vw;
        margin: 2.5vw;
        background-color: rgba(90, 90, 90, 0.7);
        box-shadow: inset 0 0 1vw rgba(255, 255, 255, 0.8);
    }

}

/* 縦横比率が4:3より大きく1:1以下の場合のスタイル */
@media only screen and (min-aspect-ratio: 3/4) and (max-aspect-ratio: 1/1) {
    /* 1:1 の縦横比率に対するスタイル */
    .ningen {
        width: 100%;
        height: 100%;
    }

    .saka {
        position: fixed;
        height: 100vh;
        left: 0;
        z-index: -1;
    }
    
    .ori {
        position: fixed;
        height: 100vh;
        right: 0;
        z-index: -1;
    }

    .title {
        color: #ffffff;
        text-align: center;
        padding-top: 5vw;
        filter: drop-shadow(0.1vw 0.1vw 0.5vw #111111);
    }
    
    .top_logo {
        width: 20vw;
    }

    /*文字たち*/
    h2 {
        text-align: center;
        font-size: 4.5vw;
    }
    
    h3 {
        text-align: center;
        font-size: 3.5vw;
    }
    
    p {
        font-size: 3vw;
        line-height: 4vw;
    }

    .attention {
        font-size: 2.5vw;
        line-height: 3vw;
    }

    .titlep {
        font-size: 2.5vw;
    }
    
    a {
        text-decoration: none;
        color: #111;
    }

    

    /*白いの*/
    .test_white01 {
        color: #111111;
        margin: 2.5vw 5vw 10vw 5vw;
        padding: 5vw 0vw;
        width: 90vw;
        background-color: rgba(255, 255, 255, 0.8);
        z-index: 1;
    }
    
    .test_white02 {
        color: #111111;
        margin: 10vw 5vw;
        padding: 5vw 0vw;
        width: 90vw;
        background-color: rgba(255, 255, 255, 0.8);
    }

    

    /*メニュー*/
    .menu-btn {
        position: fixed;
        top: 3vw;
        right: 3vw;
        display: flex;
        height: 8vw;
        width: 8vw;
        justify-content: center;
        align-items: center;
        z-index: 90;
        /*filter: blur(0.05vw);*/
    }

    .menu-btn span,
    .menu-btn span:before,
    .menu-btn span:after {
        content:" ";
        display: block;
        height: 0.25vw;
        width: 6vw;
        background-color: #fff;
        position: absolute;
    }

    .menu-btn span:before {
        bottom: 1.5vw;
    }

    .menu-btn span:after {
        top: 1.5vw;
    }

    #menu-btn-check:checked ~ .menu-btn span {
        background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
    }
    #menu-btn-check:checked ~ .menu-btn span::before {
        bottom: 0;
        transform: rotate(45deg);
        background-color: #5a5a5a;
    }
    #menu-btn-check:checked ~ .menu-btn span::after {
        top: 0;
        transform: rotate(-45deg);
        background-color: #5a5a5a;
    }

    /*中身自体*/
    .menu-content {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        z-index: 2;
        background-color: #fff;
        pointer-events: none;
        opacity: 0;
    }

    .is-active {
        pointer-events: auto;
    }

    .menu-content ul {
        height: 80%;
        overflow: auto;
        padding: 10vw 3vw 0;
    }
    .menu-content ul li {
        border-bottom: solid 0.25vw #5a5a5a;
        list-style: none;
    }
    .menu-content ul li a {
        display: block;
        font-size: 3.5vw;
        color:#5a5a5a;
        text-decoration: none;
        padding: 5vw 0 5vw 20vw;
    }
    .menu-content ul li a::before {
        content: "";
        width: 5vw;
        height: 4vw;
        transform: rotate(45deg);
        position: absolute;
        top: 7vw;
    }

    #menu-btn-check:checked ~ .menu-content {
        opacity: 1;/*メニューを画面内へ*/
    }

    #menu-btn-check {
        display: none;
    }

    .menu-coin {
        display: block;
        padding: 5vw 5vw 5vw 10vw;
        background-color: #fff;
        background-position: left 5vw center;
        background-repeat: no-repeat;
        background-size: 7.5vw 7.5vw;
        overflow-wrap: break-word;
        background-image: url("コイン.png");
    }

    .diagram {
        width: 70vw;
        margin: 2.5vw;
        background-color: rgba(90, 90, 90, 0.7);
        box-shadow: inset 0 0 1vw rgba(255, 255, 255, 0.8);
    }

}

/* 縦横比率が1:1より大きく3:4以下の場合のスタイル */
@media only screen and (min-aspect-ratio: 1/1) and (max-aspect-ratio: 4/3) {
    /* 1:1 の縦横比率に対するスタイル */
    .ningen {
        width: 100%;
        height: 100%;
    }

    .saka {
        position: fixed;
        height: 120vh;
        left: 0;
        z-index: -1;
    }
    
    .ori {
        position: fixed;
        height: 120vh;
        right: 0;
        z-index: -1;
    }

    .title {
        color: #ffffff;
        text-align: center;
        padding-top: 5vw;
        filter: drop-shadow(0.1vw 0.1vw 0.5vw #111111);
    }
    
    .top_logo {
        height: 20vw;
    }

    /*文字たち*/
    h2 {
        text-align: center;
        font-size: 4.5vw;
    }
    
    h3 {
        text-align: center;
        font-size: 3.5vw;
    }

    p {
        font-size: 3vw;
        line-height: 4vw;
    }

    .attention {
        font-size: 1.75vw;
    }
    
    .titlep {
        font-size: 2vw;
    }
    
    a {
        text-decoration: none;
        color: #111;
    }

    

    /*白いの*/
    .test_white01 {
        color: #111111;
        margin: 2.5vw 5vw 10vw 5vw;
        padding: 5vw 0vw;
        width: 90vw;
        background-color: rgba(255, 255, 255, 0.8);
        z-index: 1;
    }
    
    .test_white02 {
        color: #111111;
        margin: 10vw 5vw;
        padding: 5vw 0vw;
        width: 90vw;
        background-color: rgba(255, 255, 255, 0.8);
    }

    /*中身*/
    .top_pv {
        width: 72vw;
        height: 40.5vw;
        z-index: 0.5;
    }

    /*メニュー*/
    .menu-btn {
        position: fixed;
        top: 3vw;
        right: 3vw;
        display: flex;
        height: 8vw;
        width: 8vw;
        justify-content: center;
        align-items: center;
        z-index: 90;
        /*filter: blur(0.05vw);*/
    }

    .menu-btn span,
    .menu-btn span:before,
    .menu-btn span:after {
        content:" ";
        display: block;
        height: 0.25vw;
        width: 6vw;
        background-color: #fff;
        position: absolute;
    }

    .menu-btn span:before {
        bottom: 1.5vw;
    }

    .menu-btn span:after {
        top: 1.5vw;
    }

    #menu-btn-check:checked ~ .menu-btn span {
        background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
    }
    #menu-btn-check:checked ~ .menu-btn span::before {
        bottom: 0;
        transform: rotate(45deg);
        background-color: #5a5a5a;
    }
    #menu-btn-check:checked ~ .menu-btn span::after {
        top: 0;
        transform: rotate(-45deg);
        background-color: #5a5a5a;
    }

    /*中身自体*/
    .menu-content {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        z-index: 2;
        background-color: #fff;
        pointer-events: none;
        opacity: 0;
    }

    .is-active {
        pointer-events: auto;
    }

    .menu-content ul {
        height: 80%;
        overflow: auto;
        padding: 10vw 3vw 0;
    }
    .menu-content ul li {
        border-bottom: solid 0.25vw #5a5a5a;
        list-style: none;
    }
    .menu-content ul li a {
        display: block;
        font-size: 3vw;
        color:#5a5a5a;
        text-decoration: none;
        padding: 4vw 0 4vw 20vw;
    }
    .menu-content ul li a::before {
        content: "";
        width: 5vw;
        height: 4vw;
        transform: rotate(45deg);
        position: absolute;
        top: 7vw;
    }

    #menu-btn-check:checked ~ .menu-content {
        opacity: 1;/*メニューを画面内へ*/
    }

    #menu-btn-check {
        display: none;
    }

    .menu-coin {
        display: block;
        padding: 5vw 5vw 5vw 10vw;
        background-color: #fff;
        background-position: left 5vw center;
        background-repeat: no-repeat;
        background-size: 7.5vw 7.5vw;
        overflow-wrap: break-word;
        background-image: url("コイン.png");
    }

    .diagram {
        width: 70vw;
        margin: 2.5vw;
        background-color: rgba(90, 90, 90, 0.7);
        box-shadow: inset 0 0 1vw rgba(255, 255, 255, 0.8);
    }
}

/* 縦横比率が3:4より大きく9:16以下の場合のスタイル */
@media only screen and (min-aspect-ratio: 4/3) and (max-aspect-ratio: 16/9) {
    /* 1:1 の縦横比率に対するスタイル */
    .ningen {
        width: 100%;
        height: 100%;
    }

    .saka {
        position: fixed;
        height: 120vh;
        left: 0;
        z-index: -1;
    }
    
    .ori {
        position: fixed;
        height: 120vh;
        right: 0;
        z-index: -1;
    }

    .title {
        color: #ffffff;
        text-align: center;
        padding-top: 5vw;
        filter: drop-shadow(0.1vw 0.1vw 0.5vw #111111);
    }
    
    .top_logo {
        height: 20vw;
    }

    /*文字たち*/
    h2 {
        text-align: center;
        font-size: 4vw;
    }
    
    h3 {
        text-align: center;
        font-size: 3.5vw;
    }

    p {
        font-size: 3vw;
        line-height: 4vw;
    }

    .attention {
        font-size: 1.75vw;
    }
    
    .titlep {
        font-size: 2vw;
    }
    
    a {
        text-decoration: none;
        color: #111;
    }

    

    /*白いの*/
    .test_white01 {
        color: #111111;
        margin: 2.5vw 5vw 10vw 5vw;
        padding: 5vw 0vw;
        width: 90vw;
        background-color: rgba(255, 255, 255, 0.8);
        z-index: 1;
    }
    
    .test_white02 {
        color: #111111;
        margin: 10vw 5vw;
        padding: 5vw 0vw;
        width: 90vw;
        background-color: rgba(255, 255, 255, 0.8);
    }

    /*中身*/
    .top_pv {
        width: 64vw;
        height: 36vw;
        z-index: 0.5;
    }

    /*メニュー*/
    .menu-btn {
        position: fixed;
        top: 3vw;
        right: 3vw;
        display: flex;
        height: 8vw;
        width: 8vw;
        justify-content: center;
        align-items: center;
        z-index: 90;
        /*filter: blur(0.05vw);*/
    }

    .menu-btn span,
    .menu-btn span:before,
    .menu-btn span:after {
        content:" ";
        display: block;
        height: 0.25vw;
        width: 6vw;
        background-color: #fff;
        position: absolute;
    }

    .menu-btn span:before {
        bottom: 1.5vw;
    }

    .menu-btn span:after {
        top: 1.5vw;
    }

    #menu-btn-check:checked ~ .menu-btn span {
        background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
    }
    #menu-btn-check:checked ~ .menu-btn span::before {
        bottom: 0;
        transform: rotate(45deg);
        background-color: #5a5a5a;
    }
    #menu-btn-check:checked ~ .menu-btn span::after {
        top: 0;
        transform: rotate(-45deg);
        background-color: #5a5a5a;
    }

    /*中身自体*/
    .menu-content {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        z-index: 2;
        background-color: #fff;
        pointer-events: none;
        opacity: 0;
    }

    .is-active {
        pointer-events: auto;
    }

    .menu-content ul {
        height: 80%;
        overflow: auto;
        padding: 5vw 3vw 0;
    }
    .menu-content ul li {
        border-bottom: solid 0.25vw #5a5a5a;
        list-style: none;
    }
    .menu-content ul li a {
        display: block;
        font-size: 2.5vw;
        color:#5a5a5a;
        text-decoration: none;
        padding: 3vw 0 3vw 20vw;
    }
    .menu-content ul li a::before {
        content: "";
        width: 5vw;
        height: 4vw;
        transform: rotate(45deg);
        position: absolute;
        top: 7vw;
    }

    #menu-btn-check:checked ~ .menu-content {
        opacity: 1;/*メニューを画面内へ*/
    }

    #menu-btn-check {
        display: none;
    }

    .menu-coin {
        display: block;
        padding: 5vw 5vw 5vw 10vw;
        background-color: #fff;
        background-position: left 5vw center;
        background-repeat: no-repeat;
        background-size: 6vw 6vw;
        overflow-wrap: break-word;
        background-image: url("コイン.png");
    }

    .diagram {
        width: 70vw;
        margin: 2.5vw;
        background-color: rgba(90, 90, 90, 0.7);
        box-shadow: inset 0 0 1vw rgba(255, 255, 255, 0.8);
    }
}

/* 縦横比率が9:16より大きく1:2以下の場合のスタイル */
@media only screen and (min-aspect-ratio: 16/9) and (max-aspect-ratio: 2/1) {
    .ningen {
        width: 100%;
        height: 100%;
    }

    .saka {
        position: fixed;
        height: 120vh;
        left: 0;
        z-index: -1;
    }
    
    .ori {
        position: fixed;
        height: 120vh;
        right: 0;
        z-index: -1;
    }

    .title {
        color: #ffffff;
        text-align: center;
        padding-top: 5vw;
        filter: drop-shadow(0.1vw 0.1vw 0.5vw #111111);
    }
    
    .top_logo {
        height: 20vw;
    }

    /*文字たち*/
    h2 {
        text-align: center;
        font-size: 3.5vw;
    }
    
    h3 {
        text-align: center;
        font-size: 3vw;
    }
    
    p {
        font-size: 2.5vw;
        line-height: 3vw;
    }

    .attention {
        font-size: 2vw;
        line-height: 2.5vw;
    }

    .titlep {
        font-size: 1.75vw;
    }
    
    a {
        text-decoration: none;
        color: #111;
    }

    

    /*白いの*/
    .test_white01 {
        color: #111111;
        margin: 2.5vw 5vw 10vw 5vw;
        padding: 5vw 0vw;
        width: 90vw;
        background-color: rgba(255, 255, 255, 0.8);
        z-index: 1;
    }
    
    .test_white02 {
        color: #111111;
        margin: 10vw 5vw;
        padding: 5vw 0vw;
        width: 90vw;
        background-color: rgba(255, 255, 255, 0.8);
    }

    /*中身*/
    .top_pv {
        width: 56vw;
        height: 31.5vw;
        z-index: 0.5;
    }

    /*メニュー*/
    .menu-btn {
        position: fixed;
        top: 3vw;
        right: 3vw;
        display: flex;
        height: 8vw;
        width: 8vw;
        justify-content: center;
        align-items: center;
        z-index: 90;
        /*filter: blur(0.05vw);*/
    }

    .menu-btn span,
    .menu-btn span:before,
    .menu-btn span:after {
        content:" ";
        display: block;
        height: 0.25vw;
        width: 6vw;
        background-color: #fff;
        position: absolute;
    }

    .menu-btn span:before {
        bottom: 1.5vw;
    }

    .menu-btn span:after {
        top: 1.5vw;
    }

    #menu-btn-check:checked ~ .menu-btn span {
        background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
    }
    #menu-btn-check:checked ~ .menu-btn span::before {
        bottom: 0;
        transform: rotate(45deg);
        background-color: #5a5a5a;
    }
    #menu-btn-check:checked ~ .menu-btn span::after {
        top: 0;
        transform: rotate(-45deg);
        background-color: #5a5a5a;
    }

    /*中身自体*/
    .menu-content {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        z-index: 2;
        background-color: #fff;
        pointer-events: none;
        opacity: 0;
    }

    .is-active {
        pointer-events: auto;
    }

    .menu-content ul {
        height: 80%;
        overflow: auto;
        padding: 5vw 3vw 0;
    }
    .menu-content ul li {
        border-bottom: solid 0.25vw #5a5a5a;
        list-style: none;
    }
    .menu-content ul li a {
        display: block;
        font-size: 2vw;
        color:#5a5a5a;
        text-decoration: none;
        padding: 2.5vw 0 2.5vw 20vw;
    }
    .menu-content ul li a::before {
        content: "";
        width: 5vw;
        height: 4vw;
        transform: rotate(45deg);
        position: absolute;
        top: 7vw;
    }

    #menu-btn-check:checked ~ .menu-content {
        opacity: 1;/*メニューを画面内へ*/
    }

    #menu-btn-check {
        display: none;
    }

    .menu-coin {
        display: block;
        padding: 5vw 5vw 5vw 10vw;
        background-color: #fff;
        background-position: left 5vw center;
        background-repeat: no-repeat;
        background-size: 5.5vw 5.5vw;
        overflow-wrap: break-word;
        background-image: url("コイン.png");
    }

    .diagram {
        width: 40vw;
        margin: 2.5vw 5vw 2.5vw 10vw;
        background-color: rgba(90, 90, 90, 0.7);
        box-shadow: inset 0 0 1vw rgba(255, 255, 255, 0.8);
    }

    .schetext {
        float: left;
        margin: 7.5vw 0;
    }
}

/* 縦横比率が1:2より大きいの場合のスタイル */
@media only screen and (min-aspect-ratio: 2/1) {
    /* 1:1 の縦横比率に対するスタイル */
    .ningen {
        width: 100%;
        height: 100%;
    }

    .saka {
        position: fixed;
        height: 120vh;
        left: 0;
        z-index: -1;
    }
    
    .ori {
        position: fixed;
        height: 120vh;
        right: 0;
        z-index: -1;
    }

    .title {
        color: #ffffff;
        text-align: center;
        padding-top: 5vw;
        filter: drop-shadow(0.1vw 0.1vw 0.5vw #111111);
    }
    
    .top_logo {
        height: 15vw;
    }

    /*文字たち*/
    h2 {
        text-align: center;
        font-size: 3vw;
    }
    
    h3 {
        text-align: center;
        font-size: 2.5vw;
    }

    p {
        font-size: 2.25vw;
    }

    .attention {
        font-size: 1.75vw;
    }
    
    .titlep {
        font-size: 1.5vw;
    }
    
    a {
        text-decoration: none;
        color: #111;
    }

    

    /*白いの*/
    .test_white01 {
        color: #111111;
        margin: 2.5vw 5vw 10vw 5vw;
        padding: 5vw 0vw;
        width: 90vw;
        background-color: rgba(255, 255, 255, 0.8);
        z-index: 1;
    }
    
    .test_white02 {
        color: #111111;
        margin: 10vw 5vw;
        padding: 5vw 0vw;
        width: 90vw;
        background-color: rgba(255, 255, 255, 0.8);
    }

    /*中身*/
    .top_pv {
        width: 48vw;
        height: 27vw;
        z-index: 0.5;
    }

    /*メニュー*/
    .menu-btn {
        position: fixed;
        top: 3vw;
        right: 3vw;
        display: flex;
        height: 8vw;
        width: 8vw;
        justify-content: center;
        align-items: center;
        z-index: 90;
        /*filter: blur(0.05vw);*/
    }

    .menu-btn span,
    .menu-btn span:before,
    .menu-btn span:after {
        content:" ";
        display: block;
        height: 0.25vw;
        width: 6vw;
        background-color: #fff;
        position: absolute;
    }

    .menu-btn span:before {
        bottom: 1.5vw;
    }

    .menu-btn span:after {
        top: 1.5vw;
    }

    #menu-btn-check:checked ~ .menu-btn span {
        background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
    }
    #menu-btn-check:checked ~ .menu-btn span::before {
        bottom: 0;
        transform: rotate(45deg);
        background-color: #5a5a5a;
    }
    #menu-btn-check:checked ~ .menu-btn span::after {
        top: 0;
        transform: rotate(-45deg);
        background-color: #5a5a5a;
    }

    /*中身自体*/
    .menu-content {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        z-index: 2;
        background-color: #fff;
        pointer-events: none;
        opacity: 0;
    }

    .is-active {
        pointer-events: auto;
    }

    .menu-content ul {
        height: 80%;
        overflow: auto;
        padding: 4vw 3vw 0;
    }
    .menu-content ul li {
        border-bottom: solid 0.25vw #5a5a5a;
        list-style: none;
    }
    .menu-content ul li a {
        display: block;
        font-size: 2vw;
        color:#5a5a5a;
        text-decoration: none;
        padding: 2.25vw 0 2.25vw 20vw;
    }
    .menu-content ul li a::before {
        content: "";
        width: 5vw;
        height: 4vw;
        transform: rotate(45deg);
        position: absolute;
        top: 7vw;
    }

    #menu-btn-check:checked ~ .menu-content {
        opacity: 1;/*メニューを画面内へ*/
    }

    #menu-btn-check {
        display: none;
    }

    .menu-coin {
        display: block;
        padding: 5vw 5vw 5vw 10vw;
        background-color: #fff;
        background-position: left 5vw center;
        background-repeat: no-repeat;
        background-size: 5vw 5vw;
        overflow-wrap: break-word;
        background-image: url("コイン.png");
    }

    .diagram {
        width: 40vw;
        margin: 0 2.5vw;
        background-color: rgba(90, 90, 90, 0.7);
        box-shadow: inset 0 0 1vw rgba(255, 255, 255, 0.8);
    }

    .schetext {
        float: left;
        margin: 7.5vw 0;
    }
}




@media only screen and (max-width:750px) {
    .tatenaga {
        display: block;
    }

    .yokonaga {
        display: none;
    }

}

@media only screen and (min-width:750px) {
    .tatenaga {
        display: none;
    }

    .yokonaga {
        display: block;
    }

    .diagram {
        width: 40vw;
        margin: 0;
    }

    .schetext {
        font-size: 2.5vw;
        margin: 2.5vw 0;
        float: none;
    }

    .attention {
        font-size: 1.25vw;
        line-height: 1.75vw;
    }

    .tictext {
        font-size: 2.5vw;
    }

    .restext {
        font-size: 1.75vw;
    }

    .ticket {
        float: left;
    }

    .corich {
        font-size: 2vw;
    }

    .tickbl td {
        width: 40vw;
    }

}

/*横幅スマホ*/
@media only screen and (max-width: 750px) {
    .cap {
        font-size: 2.25vw;
        line-height: 3vw;
        text-align: left;
        margin: 1.25vw;
    }

    .tatenaga {
        display: block;
    }

    .yokonaga{
        display: none;
    }

    .testnaga {
        display: none;
    }
}

/*横幅タブレット*/
@media only screen and (min-width: 750px) {
    .cap {
        font-size: 1.75vw;
        line-height: 2.75vw;
        text-align: left;
        margin: 1vw;
    }

    .tatenaga {
        display: none;
    }

    .yokonaga{
        display: block;
    }

    .testnaga {
        display: none;
    }

    .yokonaga h3 {
        font-size: 2.5vw;
        line-height: 2.75vw;
    }

    .testnaga h3 {
        font-size: 2.5vw;
        line-height: 3vw;
    }
}

@media only screen and (min-width: 950px) {
    .cap {
        font-size: 1.25vw;
        line-height: 2vw;
    }

    .tatenaga {
        display: none;
    }

    .staff .yokonaga{
        display: none;
    }

    .testnaga {
        display: block;
    }
    .yokonaga {
        display: none;
    }

    .yokonaga h3 {
        font-size: 2.25vw;
        line-height: 2.5vw;
    }

    .testnaga h3 {
        font-size: 2vw;
        line-height: 2.25vw;
    }

    .title {
        color: #ffffff;
        text-align: left;
        padding-left: 5vw;
        padding-top: 2.5vw;
        filter: drop-shadow(0.1vw 0.1vw 0.5vw #5a5a5a);
    }
    
    .top_logo {
        width: 10vw;
        height: auto;
    }

    .titlep {
        margin: 0;
    }
}


/*ふわあ*/
.fadeUp{
  animation-name:fadeUpAnime;
  animation-duration:0.5s;
  animation-fill-mode:forwards;
  opacity:1;
}
  
@keyframes fadeUpAnime {
  from {
      opacity: 0;
      transform: translateY(15vw);
  }to {
      opacity: 3;
      transform: translateY(0);
  }
}

.fadeUpTrigger{
  opacity: 0;
}


/* その場で */
.fadeIn{
    animation-name:fadeInAnime;
    animation-duration:1s;
    animation-fill-mode:forwards;
    opacity:0;
}

@keyframes fadeInAnime{
    from {
      opacity: 0;
    }
  
    to {
      opacity: 1;
    }
  }



.aboutmore {
  margin: 5vw;
}

.dotted {
  border-bottom: 0.25vw dotted #5a5a5a;
  margin-top: 5vw;
}

.flyers {
  text-align: center;
}

.flyer {
  width: 40vw;
}

.diapng {
    text-align: center;
}

.tickbl {
    margin: 5vw 5vw 10vw;
}

.corich {
    text-decoration: underline;
}

.textinfo {
    float: left;
    margin: 1.25vw;
}