@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Sans+KR:wght@100..900&family=Noto+Sans+SC:wght@100..900&family=Noto+Sans+TC:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Zen+Kaku+Gothic+New&family=Zen+Maru+Gothic&display=swap');

html {
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
    font-size: 62.5%;
}

img {
    width: 100%;

    vertical-align: bottom;
}
p {
    line-height: 1.75;
}
a {
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
.pc {
    display: block;
}
.sp {
    display: none;
}
@media print, screen and (max-width: 768px) {
    .pc {
        display: none;
    }
    .sp {
        display: block;
    }
}
body:before {
    content: "";
    background-image: url(../images/main-bg.jpg);
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    width: 100vw;
    height: 100dvh;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: -1;
}
@media print, screen and (max-width: 768px) {
    body:before {
        background-image: url(../sp-images/main-bg.jpg);
    }
}

header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1;
}
header .inner {
    display: flex;
    justify-content: space-between;

    width: 78.125%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 25px 0;
}
header ul {
    display: flex;
    justify-content: space-between;
}
header ul.language {
    width: 55.6%;
    max-width: 556px;
}
header ul.language li {
    display: flex;

    max-width: 108px;
    width: 19.4%;
}
header ul.language li a {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;

    background-color: #000000;
    color: #FFF;
    border: 2px solid;
    border-image: linear-gradient(70deg, #e60012 0%, #320000 50%, #e60012 100%) 1;
    font-size: min(2rem, 1.56vw);
    box-sizing: border-box;
}
header ul.language li a:hover {
    text-decoration: none;

    opacity: 0.6;
}

header ul.btn-dl_appli {
    display: flex;
    justify-content: space-between;

    width: 4.8%;
    max-width: 48px;
    margin:  0 0 0 auto;
}
header ul.btn-dl_appli li.btn-x {
    width: 100%;
    max-width: 48px;
}
header ul.btn-dl_appli li.btn-x a {
    display: block;
    background-color: #000;
    border: 2px solid;
    border-image: linear-gradient(70deg, #e60012 0%, #320000 50%, #e60012 100%) 1;
    box-sizing: border-box;
    padding: 8px;
}

@media print, screen and (max-width: 768px) {
    header .inner {
        width: 90vw;
        padding: 3.7vw 0;
    }
    header ul {
        flex-wrap: wrap;
        justify-content: space-between;
    }
    header ul.language {
        width: 73vw;
        height: 15.625vw;
        margin-right: 0;
    }
    header ul.language li {
        width: 35.9vw;
        max-width: 100%;
    }
    header ul.language li:nth-last-of-type(-n+3)  {
        width: 23.4vw;
    }
    header ul.language li a {
        height: 7.29vw;
        font-size: 3.3vw;
    }

    header ul.btn-dl_appli {
        display: none;
    }
}

section {
    padding: 10.9% 0 0;
}
section .section {
    margin: 0 auto;

    /* background: #FFF; */
    position: relative;

}
section .section .inner {
    width: 78.125%;
    max-width: 1000px;
    margin: 0 auto;
    box-sizing: border-box;
}
section .section .inner h3 {
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url(../images/bg-title.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    margin-bottom: 8%;
    aspect-ratio: 5 / 1;
    text-align: center;
}
section .section .inner h3 picture {
    display: block;
    width: 100%;
}
@media print, screen and (max-width: 768px) {
    main {
        padding-bottom: 6.5vw;

        background-size: 56.25vw auto;
    }
    section {
        margin: 0 auto 0;
        padding: 10.4vw 0 0;
    }
    section .section {
        width: 87.2vw;
    }
    section .section .inner {
        width: 100%;
    }
    section h3 {
        margin-bottom: 6.5vw;
    }
}

/* ==============================
  FV
============================== */
#fv {
    position: relative;

    /* background-image: url(../images/main-bg.jpg);
    background-size: cover; */
}

#fv .fv-inner {
    display: flex;
    flex-direction: column;
    max-width: 1280px;
    margin: 0 auto;
}

#fv .main-image {
    width: 100%;
    margin: 0 auto;
}
#fv .main-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    align-items: center;
}
#fv h1 {
    width: 43.4%;
    max-width: 556px;
    margin-bottom: 2.16%;
}
#fv h2 {
    width: 46.71%;
    max-width: 598px;
    margin: 9.4% 0 0.9%;
}
#fv .date {
    width: 100%;
    background-color: #000;
    text-align: center;
    padding: 1.2% 0 1.0%;
}
#fv .date img {
    width: 51.5%;
    max-width: 661px;
}
@media print, screen and (max-width: 768px) {
    #fv {
        position: relative;
    }

    #fv .fv-inner {
        flex-wrap: wrap;
        padding-top: 24.6vw;
    }

    #fv h1 {
        width: 77.8vw;
        margin-bottom: 4.5vw;
    }
    #fv h2 {
        width: 72.3vw;
        margin: 0 0 1.56vw;
    }

    #fv .date img {
        width: 86vw;
    }
}

/* ==============================
  ナビゲーション
============================== */

main .icn-menu {
    display: none;
}
nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    width: 70.3%;
    max-width: 900px;
    margin: 0 auto;
    padding: 2.3% 0;
}
nav ul li {

    display: flex;
    align-items: center;
    width: 22.2%;
    max-width: 200px;
}

nav ul li:first-of-type,
nav ul li:nth-of-type(6) {
    padding-left: 0;
}
nav ul li:nth-of-type(4),
nav ul li:nth-of-type(8) {

    width: 28.1%;
    max-width: 253px;
}
nav ul li:last-of-type,
nav ul li:nth-of-type(5) {
    padding-right: 0;
}
nav ul li:nth-of-type(n + 6) {
    margin-top: 2.2%;
}
@media print, screen and (max-width: 768px) {
    #navigation {
        padding: 0;
    }
    main .icn-menu {
        position: absolute;
        z-index: 90;
        top: 7.1vw;
        right: 5vw;

        display: block;

        width: 9.3vw;
        height: 9.5vw;
        margin: 0;

        cursor: pointer;
    }
    #menu-btn-check {
        display: none;
    }
    .menu-btn {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 8vw;
        height: 5.5vw;
        margin: 0 auto;
    }
    .menu-btn span,
    .menu-btn span:before,
    .menu-btn span:after {
        position: absolute;

        display: block;

        width: 7.9vw;
        height: 0.8vw;

        content: "";
        transition: 0.3s ease-in-out;

        background-color: #000;
    }
    .menu-btn span:before {
        bottom: 2vw;
    }
    .menu-btn span:after {
        top: 2vw;
    }
    main.open .icn-menu .menu-btn span {
        background-color: rgba(255, 255, 255, 0); /*メニューオープン時は真ん中の線を透明にする*/
    }
    main.open .icn-menu .menu-btn span::before {
        bottom: 0;

        transform: rotate(45deg);
    }
    main.open .icn-menu .menu-btn span::after {
        top: 0;

        transform: rotate(-45deg);
    }

    .menu-text {
        margin-top: 1.8vw;

        text-align: center;

        color: #000;
    }


    nav {
        position: absolute;
        z-index: 80;
        top: 0;
        left: 0; /*leftの値を変更してメニューを画面外へ*/

        background-color: #FFF;
        display: none;

        width: 100%;
        height: 100%;
        padding: 16vw 0 0;
    }

    nav ul {
        display: block;

        width: 90vw;
    }

    nav ul li,
    nav ul li.sp {
        display: flex;

        width: 100% !important;
        max-width: 100% !important;

        border: none;
    }
    nav ul li:first-of-type {
        display: none;
    }
    nav ul li + li,
    nav ul li:nth-last-of-type(-n+5) {
        margin-top: 5vw;
        padding: 0;
    }

    nav li a {
        display: flex;
        align-items: center;
    }
    nav li img {
        width: auto;
        height: 6vw;
    }
}

/* ==============================
  お知らせ
============================== */
#notice {
    padding: 25px 0;

    text-align: center;

    background-color: #FFCEE1;
}
#notice .notice-wrapper {
    display: flex;
    align-items: flex-start;
    justify-content: center;

    max-width: 90%;
    margin: 0 auto;
}
#notice h2 {
    width: 7%;
    max-width: 90px;
    margin: 0 20px 0 0;
    padding: 5px 8px;

    color: #FFFFFF;
    background-color: #E85493;

    font-size: min(1.8rem, 1.41vw);
    font-weight: 400;
}
#notice p {
    font-size: min(2rem, 1.56vw);
    font-weight: 400;
}
#notice a {
    color: #000000;
}

#notice .end {
    color: #D80C18;
    font-weight: 400;
    font-size: min(2.4rem, 1.88vw);
}
@media print, screen and (max-width: 768px) {
    #notice {
        padding: 0;
    }

    #notice .inner {
        position: relative;

        display: flex;
        align-items: center;
        justify-content: space-between;

        padding: 5.8vw 5vw 6.5vw;
    }

    #notice .btn-dl_appli {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        width: 41.4vw;
    }
    #notice .btn-dl_appli .app-release_text {
        width: 38.6vw;
        margin: 0 auto 1.3vw;
    }
    #notice .btn-dl_appli .btn-app_store {
        width: 17.7vw;
    }
    #notice .btn-dl_appli .btn-google_play {
        width: 22vw;
    }

    #notice .notice-wrapper {
        display: block;

        width: 41.4vw;
        max-width: 100%;
        margin-top: 4.1vw;

        background-color: #FFFFFF;
    }


    #notice h2 {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 2px 0 1px;

        text-align: center;

        font-size: 12px;
    }
    #notice .notice-text {
        padding: 2vw;
    }
    #notice .notice-text p {
        text-align: left;
        word-break: break-all;

        font-size: 10px;
        line-height: 1.5;
    }

    #notice .date {
        width: 41.1vw;
    }


    #notice .end {
        font-size: 16px;
        text-align: left;
    }
}


/* ==============================
  作品紹介
============================== */
#introduction h3 img {
    width: 31.9%;
}
#introduction .inner {
    text-align: left;
}
#introduction p {
    font-size: min(2rem, 1.56vw);
    font-weight: 400;
    line-height: 1.75;
}
#introduction p a {
    color: #000;
    text-decoration: none;
}
#introduction p a:hover {
    text-decoration: underline;
}
@media print, screen and (max-width: 768px) {
    #introduction h3 img {
        width: 31.25vw;
    }
    #introduction p {
        width: 100%;

        font-size: 3.125vw;
        line-height: 1.75;
    }
    #introduction p + picture {
        margin-top: 5.2vw;
    }
    #introduction p + picture img {
        width: 71.8vw;
    }
}


/* ==============================
  イベント情報
============================== */
#event_info h3 img {
    width: 47.2%;
}
#event_info .kickoff-event h4 {
    width: 38.9%;
    margin: 0 auto 4%;
}
#event_info h4 + p {
    font-size: min(2.5rem, 1.95vw);
    text-align: center;
    font-weight: 400;
    margin-bottom: 5%;
}
#event_info .kickoff-event {
    position: relative;
}
#event_info .kickoff-event-content {
    width: 90%;
    margin: 0 auto;
    display: flex;
}
#event_info .kickoff-event .img-wrapper {
    width: 19.5%;
    max-width: 176px;
}
#event_info .kickoff-event dl {
    width: 80%;
}
#event_info dl {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    justify-content: space-between;
    font-size: min(2rem, 1.56vw);
}
#event_info dl dt {
    /* text-align:justify;
    text-align-last:justify; */
    width: 96px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    margin-bottom: 20px;
}
#event_info dl dd {
    width: calc(100% - 115px);
    margin-bottom: 15px;
    font-weight: 400;
}
#event_info dl dd ul li {
    display: block;
    padding-left: 1em;
    font-size: min(2rem, 1.56vw);
}
#event_info dl dd ul li::before {
    content: "■";
    display: block;
    float: left;
    margin-left: -1em;
    width: 1em;
    text-align: center;
    color: #e60012;
}
#event_info dl dd span.text-red {
    color: #e60012;
}

#event_info .border-text {
    background-color: #fff;
    display: inline-block;
    border: 2px solid;
    border-image: linear-gradient(360deg, #320000 0%, #e60012 100%) 1;
    padding: 5px 10px 8px;
    margin-top: 10px;
    color: #e60012;
    font-size: min(2.2rem, 1.71vw);
    font-weight: 400;
    line-height: 1;
    box-sizing: border-box;
}
#event_info .border-text.sp {
    display: none;
}

#event_info .youtube-live {
    width: 90%;
    background-color: #eee8d6;
    margin: 8% auto;
}
#event_info .youtube-live::before,
#event_info .youtube-live::after {
    content: "";
    display: block;
    width: 100%;
    border-top: 10px solid;
    border-image: linear-gradient(270deg, #320000 0%, #e60012 100%) 1;
}
#event_info .youtube-live::after {
    border-image: linear-gradient(90deg, #320000 0%, #e60012 100%) 1;
}
#event_info .youtube-live h4 {
    text-align: center;
    margin: 4% auto 3.5%;
    width: 36.6%;
}
#event_info .youtube-live p {
    font-size: min(2rem, 1.56vw);
    text-align: center;
    margin-bottom: 2.4%;
    font-weight: 600;
}
#event_info .youtube-live p .date {
    font-size: min(2.5rem, 1.95vw);
    font-weight: 400;
    text-align: center;
}
#event_info .youtube-live ul.attention {
    font-size: min(1.6rem, 1.25vw);
    width: 26em;
    margin: 0 auto;
    font-weight: 600;
    color: #e60012;
}
#event_info .youtube-live ul.attention li {
    display: block;
    padding-left: 1em;
}
#event_info .youtube-live ul.attention li::before {
    content: "※";
    display: block;
    float: left;
    margin-left: -1em;
    width: 1em;
    text-align: center;
}
#event_info .youtube-live .btn {
    width: 31.3%;
    margin: 2.9% auto 3.5%;
}


#event_info .greeting-event h4 {
    width: 70.8%;
    margin: 0 auto 5.8%;
}

#event_info .greeting-event dl {
    width: 90%;
    margin: 0 auto;
}
#event_info .greeting-event .photo-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}
#event_info .greeting-event .photo-wrapper .photo-box {
    font-size: min(2rem, 1.56vw);
    width: 25%;
    max-width: 250px;
    text-align: center;
    margin: 0 2.4%;
}
#event_info .greeting-event .photo-wrapper .photo-box img {
    margin-bottom: 0.5em;
}
#event_info .greeting-event .btn-event {
    text-align: center;
    margin-top: 5%;
}
#event_info .greeting-event .btn-event a {
    font-size: min(2rem, 1.56vw);
}

@media print, screen and (max-width: 768px) {
    #event_info h3 img {
        width: 46.2vw;
    }

    #event_info .kickoff-event h4 {
        width: 50.7vw;
        margin: 0 auto 5.4vw;
    }
    #event_info h4 + p {
        font-size: 3.6vw;
    }

    #event_info .kickoff-event-content {
        width: 100%;
        flex-direction: column;
        align-items: center;
    }
    #event_info .kickoff-event .img-wrapper {
        width: 22.9vw;
        max-width: 22.9vw;
    }
    #event_info .kickoff-event dl {
        width: 100%;
    }
    #event_info dl {
        font-size: 3.125vw;
    }
    #event_info dl dt {
        width: 11.7vw;
        height: 4.6vw;
        margin-bottom: 3.125vw;
    }
    #event_info dl dd {
        width: calc(100% - 15.1vw);
        margin-bottom: 3.125vw;
    }
    #event_info dl dd ul li {
        font-size: 3.125vw;
    }

    #event_info .border-text {
        padding: 5px 10px 8px;
        margin-top: 10px;
        font-size: 3.38vw;
    }

    #event_info .border-text.pc {
        display: none;
    }
    #event_info .border-text.sp {
        display: block;
    }

    #event_info .youtube-live {
        width: 100%;
        margin: 6.5vw auto 7.4vw;
    }
    #event_info .youtube-live::before,
    #event_info .youtube-live::after {
        border-top: 5px solid;
    }
    #event_info .youtube-live h4 {
        margin: 5.7vw auto 3.5vw;
        width:47.7vw;
    }
    #event_info .youtube-live p {
        font-size: 3.125vw;
        margin-bottom: 1em;
    }
    #event_info .youtube-live p .date {
        display: inline-block;

        text-align: left;
        font-size: 3.25vw;
    }
    #event_info .youtube-live ul.attention {
        font-size: 2.6vw;
    }
    #event_info .youtube-live .btn {
        width: 40.7vw;
        margin: 3.5vw auto 4.5vw;
    }


    #event_info .greeting-event h4 {
        width: 70.8%;
        margin: 0 auto 5.8%;
    }

    #event_info .greeting-event dl {
        width: 100%;
    }
    #event_info .greeting-event .photo-wrapper .photo-box {
        font-size: 2.86vw;
        width: 32.5vw;
        margin: 0 3.05vw;
    }
    #event_info .greeting-event .btn-event a {
        font-size: 3.125vw;
    }
}


/* ==============================
  任務説明
============================== */
#how_to_play h3 img {
    width: 31.2%;
}
#how_to_play h4 {
    width: 81.4%;
    margin: 0 auto 3.8%;
}
#how_to_play h4 + p {
    font-size: min(2.5rem, 1.95vw);
    font-weight: 400;
    text-align: center;
    margin-bottom: 5.5%;
}

#how_to_play .how_to_play-wrapper {
    position: relative;
    width: 93.75%;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 5.4% 0;
}
#how_to_play .how_to_play-wrapper::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0; /* 一番下に敷く */
    background: linear-gradient(70deg, #e60012 0%, #320000 50%, #e60012 100%);
    border-radius: 8px;
}
#how_to_play .how_to_play-wrapper::after {
    content: "";
    position: absolute;
    /* ボックスのサイズから線として出したい部分の分だけ小さくする */
    /* border-size: 2px; にしたいときは2*2px（上下or左右の分） */
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    top: 2px;
    left: 2px;
    z-index: 1;  /* グラデーションの上に被せる、かつ表示したいテキストより下にする */
    border-radius: 8px;
    background: white;
}

#how_to_play .how_to_play-wrapper ul {
    display: flex;
    justify-content: space-between;
}
#how_to_play .how_to_play-wrapper h5 {
    background-image: url(../images/line-black.png);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: contain;
    padding-bottom: 2.2%;
    margin-bottom: 5.5%;
}

#how_to_play .how_to_play-box,
#how_to_play .point_get-box {
    position: relative;
    z-index: 3;
    width: 83.3%;
    max-width: 1000px;
    margin: 0 auto;
}
@media print, screen and (max-width: 768px) {
    #how_to_play h3 img {
        width: 30.5vw;
    }
    #how_to_play h4 {
        width: 60.4vw;
        margin: 0 auto 5.4vw;
    }
    #how_to_play h4 + p {
        font-size: 3.6vw;
        margin-bottom: 8.4vw;
    }

    #how_to_play .how_to_play-wrapper {
        width: 100%;
        padding: 7.5vw 0 10.4vw;
    }

    #how_to_play .how_to_play-wrapper ul {
        flex-direction: column;
    }
    #how_to_play .how_to_play-wrapper h5 {
        background-image: url(../sp-images/line-black.png);
        padding-bottom: 3.125vw;
        margin-bottom: 7.1vw;
    }

    #how_to_play .how_to_play-box,
    #how_to_play .point_get-box {
        width: 75.1vw;
        max-width: 1000px;
    }
}

/* 遊び方ボックス */
#how_to_play .how_to_play-box h5 img {
    width: 13.3%;
}
#how_to_play .how_to_play-box h5 + p {
    font-size: min(3.5rem, 2.73vw);
    font-weight: 400;
    text-align: center;
    margin-bottom: 2.8%;
}
#how_to_play .how_to_play-box li {
    width: 29%;
}
#how_to_play li:nth-of-type(1) {
    width: 26%;
}
#how_to_play li .how_to_play-img {
    width: 61.3%;
    margin: 0 auto 8%;
}
#how_to_play li:nth-of-type(1) .how_to_play-img {
    width: 68.4%;
}
#how_to_play li .how_to_play-text {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;

    margin-bottom: 8%;
    font-size: min(2rem, 1.56vw);
    font-weight: 600;
    line-height: 1.25;
}
#how_to_play li .how_to_play-text picture {
    width: 17.2%;
    margin-right: 4.8%;
}
#how_to_play li .how_to_play-text p {
    width: calc(100% - 17.2% - 4.8%);
}
#how_to_play li:nth-of-type(1) .how_to_play-text picture {
    width: 19.2%;
    margin-right: 5.3%;
}
#how_to_play li:nth-of-type(1) .how_to_play-text p {
    width: calc(100% - 19.2% - 5.3%);
}
#how_to_play li .how_to_play-text::after {
    position: absolute;
    top: 0;
    right: -14.9473%;
    bottom: 0;

    display: block;

    width: 1.65em;
    height: 1.9em;
    margin: 0 auto;

    content: "";

    background-image: url(../images/arrow-right.png);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: contain;
}
#how_to_play li:last-of-type .how_to_play-text::after {
    display: none;
}
#how_to_play li p {
    font-size: min(1.5rem, 1.17vw);
    /* font-weight: 400; */
}
@media print, screen and (max-width: 768px) {

    #how_to_play .how_to_play-box h5 img {
        width: 17.4vw;
    }
    #how_to_play .how_to_play-box h5 + p {
        font-size: 4.55vw;
        margin-bottom:6.5vw;
    }
    #how_to_play .how_to_play-box li,
    #how_to_play li:nth-of-type(1) {
        width: 100%;
    }
    #how_to_play .how_to_play-box li + li {
        margin-top: 18.8vw;
    }
    #how_to_play li .how_to_play-img,
    #how_to_play li:nth-of-type(1) .how_to_play-img {
        width: 27.3vw;
        margin: 0 auto 5.2vw;
    }
    #how_to_play li .how_to_play-text {
        align-items: center;
        margin-bottom: 2.9vw;
        font-size: 4.5vw;
    }
    #how_to_play li .how_to_play-text picture,
    #how_to_play li:nth-of-type(1) .how_to_play-text picture {
        width: 13vw;
        margin-right: 3.6vw;
    }
    #how_to_play li .how_to_play-text::after {
        right: 0;
        bottom: -28.3vw;
        left: 0;

        width: 9.7vw;
        height: 8.8vw;
        margin: auto auto 0;

        background-image: url(../sp-images/arrow-bottom.png);
    }
    #how_to_play li p {
        font-size: 3.2vw;
    }
}

/* 任務参加ボタン */
#how_to_play .web_app {
    margin: 9.5% auto 10.5%;
    width: 91.5%;
}
#how_to_play .web_app p {
    font-size: min(2.8rem, 2.19vw);
    font-weight: 800;
    text-align: center;
    margin-top: 4%;
}
@media print, screen and (max-width: 768px) {
    #how_to_play .web_app {
        margin-top: 6.25vw;
        margin-bottom: 9.1vw;
    }
    #how_to_play .web_app p {
        font-size: 3.6vw;
        text-align: right;
        width: 14em;
        width: max-content;
        margin: 3.9vw auto 0;
    }
}

/* ポイント獲得ボックス */
#how_to_play .point_get-box h5 img {
    width: 35.2%;
}
#how_to_play .point_get-box li {
    width: 19.8%;
}
#how_to_play .point_get-box li .point_get-img {
    position: relative;
    margin: 0 auto 8%;
    font-size: min(1.6rem, 1.25vw);
}
#how_to_play .point_get-box li .point_get-img::after {
    position: absolute;
    top: 0;
    right: -22.9473%;
    bottom: 0;

    display: block;

    width: 1.65em;
    height: 1.9em;
    margin: auto 0;

    content: "";

    background-image: url(../images/arrow-right.png);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: contain;
}
#how_to_play .point_get-box li:last-of-type .point_get-img::after {
    display: none;
}
#how_to_play .point_get-box li .point_get-text {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;

    margin-bottom: 2%;
    font-size: min(1.6rem, 1.25vw);
    font-weight: 400;
    line-height: 1.5;
}
#how_to_play .point_get-box li .point_get-text picture {
    width: 1.375em;
    margin-top: 0.1em;
    margin-right: 4%;
}
#how_to_play .point_get-box li .point_get-text p {
    width: calc(100% - 1.375em - 4%);
}
#how_to_play .point_get-box li p.attention {
    display: block;
    font-size: min(1.2rem, 0.93vw);
    padding-left: 1em;
}
#how_to_play .point_get-box li p.attention::before {
    content: "※";
    display: block;
    float: left;
    margin-left: -1em;
    width: 1em;
    text-align: center;
}

#how_to_play .point_get-box li ul.attention {
    flex-direction: column;
}
#how_to_play .point_get-box li ul.attention li {
    display: block;
    font-size: min(1.4rem, 1.09vw);
    padding-left: 1em;
    width: 100%;
    color: #e60012;
    font-weight: 600;
}
#how_to_play .point_get-box li ul.attention li::before {
    content: "※";
    display: block;
    float: left;
    margin-left: -1em;
    width: 1em;
    text-align: center;
}

#how_to_play .point_get-bg {
    position: absolute;
    bottom: 1.5%;
    left: 2.5%;
    width: 23.9%;
    z-index: 2;
}

@media print, screen and (max-width: 768px) {
    #how_to_play .point_get-box h5 img {
        width: 45.9vw;
    }
    #how_to_play .point_get-box li {
        position: relative;
        width: 100%;
        padding-bottom: 20.7vw;
    }
    #how_to_play .point_get-box li:last-of-type {
        padding-bottom: 0;
    }
    #how_to_play .point_get-box li .point_get-img {
        position: unset;
        width: 47.6vw;
        margin: 0 auto 6.3vw;
    }
    #how_to_play .point_get-box li .point_get-img::after {
        right: 0;
        bottom: 5.8vw;
        left: 0;

        width: 9.7vw;
        height: 8.8vw;
        margin: auto auto 0;

        background-image: url(../sp-images/arrow-bottom.png);
    }
    #how_to_play .point_get-box li .point_get-text {
        align-items: center;
        margin-bottom: 2.9vw;
        font-size: 3.125vw;
    }
    #how_to_play .point_get-box li .point_get-text picture {
        width: 2.08em;
        margin-right: 2.34vw;
    }
    #how_to_play .point_get-box li .point_get-text p {
        width: calc(100% - 2.08em - 2.34vw);
    }
    #how_to_play .point_get-box li p.attention {
        font-size: 2.86vw;
        padding-left: 1em;
    }

    #how_to_play .point_get-box li ul.attention li {
        font-size: 2.86vw;
        padding-bottom: 0;
    }

    #how_to_play .point_get-bg {
        right: 0.78vw;
        bottom: 1.8vw;
        left: auto;
        width: 37.3vw;
    }
}

/* ==============================
  任地一覧
============================== */
#spot h3 img {
    width: 31.8%;
}
#spot .inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
#spot .spot-box {
    background-color: #fff;
    box-sizing: border-box;
    width: 47.6%;
    padding: 3%;

    border: 1px solid #aa8c32;
    border-radius: 8px;
}
#spot .spot-box .spot-text {
    margin-bottom: 20px;
    padding-bottom: 10px;

    border-bottom: 1px solid #000000;
    font-size: min(3.5rem, 2.7vw);
    font-weight: 800;
}
#spot .spot-box li {
    display: block;

    padding-left: 1.375em;

    font-size: min(1.6rem, 1.25vw);
    line-height: 1.875;
}
#spot .spot-box li::before {
    display: block;
    float: left;

    width: 0.78em;
    height: 0.78em;
    margin-top: 0.6em;
    margin-left: -1.25em;

    content: "";
    background-image: url(../images/icon.png);
    background-repeat: no-repeat;
    background-size: contain
}

#spot .attention {
    margin-top: 2.4%;
}
#spot .attention li {
    display: block;

    padding-left: 1em;

    font-size: min(1.5rem, 1.17vw);
    line-height: 1.53;
}
#spot .attention li::before {
    display: block;
    float: left;

    width: 1em;
    margin-left: -1em;

    content: "※";
    text-align: center;
}
#spot .attention li.text-red {
    color: #e60012;
}
@media print, screen and (max-width: 768px) {
    #spot h3 img {
        width: 31.1vw;
    }
    #spot .inner {
        flex-direction: column;
    }
    #spot .spot-box {
        width: 100%;
        padding: 4.5vw 6.5vw;
    }
    #spot .spot-box + .spot-box {
        margin-top: 6.3vw;
    }
    #spot .spot-box .spot-text {
        margin-bottom: 2.3vw;
        padding-bottom: 1.3vw;
        font-size: 4.5vw;
    }
    #spot .spot-box li {
        font-size: 2.8vw;
    }
    #spot .spot-box li::before {
        width: 2.4vw;
        height: 2.4vw;
        margin-top: 1.2vw;
        margin-left: -3.6vw;
    }

    #spot .attention {
        margin-top: 6.3vw;
    }
    #spot .attention li {
        font-size: 2.8vw;
    }
}

/* ==============================
  上弦の鬼、襲来
============================== */
#sunset .section {
    background-image: url(../images/bg-sunset.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
#sunset .section .inner {
    padding: 5% 0 7%;
}
#sunset .section .inner h3 {
    background-image: none;
    aspect-ratio: unset;
    margin-bottom: 6%;
}
#sunset h3 img {
    width: 31.3%;
}
#sunset h3 + p {
    font-size: min(2.2rem, 1.72vw);
    font-weight: 400;
    text-align: center;
    margin-bottom: 3.3%;
}

#sunset dl {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    justify-content: space-between;
    font-size: min(2rem, 1.56vw);
    width: 64%;
    max-width: 640px;
    margin: 0 auto 4%;
}
#sunset dl dt {
    width: 96px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url(../images/bg-dt.png);
    background-repeat: no-repeat;
    background-size: contain;
    color: #FFF;
    font-weight: 400;
    box-sizing: border-box;
    line-height: 1;
    margin-bottom: 20px;
}
#sunset dl dd {
    width: calc(100% - 115px);
    margin-bottom: 15px;
    font-weight: 700;
}

#sunset .spot-box {
    border: 2px solid;
    border-image: linear-gradient(70deg, #e60012 0%, #320000 50%, #e60012 100%) 1;
    background-color: #FFF;
    padding: 2% 0;
    width: 90%;
    margin: 0 auto;
}
#sunset .spot-box h5 {
    width: 84.4%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.8);
    margin: 0 auto 1.4%;
    padding-bottom: 0.3em;
}
#sunset .spot-box h5 img {
    width: 6.5%;
}

#sunset .spot-box .spot-list-wrapper {
    width: 84.4%;
    margin: 0 auto;
    display: flex;
    gap: 2%;
}
#sunset .spot-box .spot-list-wrapper ul {
    flex: 1;
}
#sunset .spot-box li {
    display: block;

    padding-left: 1.375em;

    font-size: min(1.6rem, 1.25vw);
    line-height: 1.875;
    font-weight: 400;
}
#sunset .spot-box li::before {
    display: block;
    float: left;

    width: 0.78em;
    height: 0.78em;
    margin-top: 0.6em;
    margin-left: -1.25em;

    content: "";
    background-image: url(../images/icon.png);
    background-repeat: no-repeat;
    background-size: contain
}

#sunset .spot-box p.attention {
    color: #e60012;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-left: 1em;
    font-size: min(2rem, 1.56vw);
    font-weight: 500;
    margin-top: 2%;
}
#sunset .spot-box p.attention::before {
    content: "※";
    display: block;
    margin-left: -1em;
    width: 1em;
    text-align: center;
}
@media print, screen and (max-width: 768px) {
    #sunset .section {
        background-image: url(../sp-images/bg-sunset.png);
        width: 100%
    }
    #sunset .section .inner {
        padding: 7.2vw 0 6.5vw;
    }
    #sunset h3 img {
        width: 40.8vw;
    }
    #sunset h3 + p {
        font-size: 3.6vw;
        margin-bottom: 3.9vw;
    }

    #sunset dl {
        font-size: 3.2vw;
        width: 87.1vw;
        margin: 0 auto 5vw;
    }
    #sunset dl dt {
        width: 14.9vw;
        height: 4.5vw;
        margin-bottom: 1.9vw;
    }
    #sunset dl dd {
        width: calc(100% - 17vw);
        margin-bottom: 1.9vw;
    }

    #sunset .spot-box {
        padding: 2% 0;
        width: 87.1vw;
    }
    #sunset .spot-box h5 {
        width: 73.9vw;
        padding-bottom: 1.04vw;
        margin: 0 auto 1.95vw;
    }
    #sunset .spot-box h5 img {
        width: 7.2vw;
    }
    #sunset .spot-box .spot-list-wrapper {
        width: 73.9vw;
        flex-direction: column;
    }
    #sunset .spot-box li {
        padding-left: 3.64vw;
        font-size: 2.86vw;
    }
    #sunset .spot-box li::before {
        width: 2.47vw;
        height: 2.47vw;
        margin-top: 1.2vw;
        margin-left: -3.64vw;
    }

    #sunset .spot-box p {
        width: 74.21vw;
        margin: 0 auto;
    }
    #sunset .spot-box p.attention {
        font-size: 2.86vw;
    }
}

/* ==============================
  任務報酬
============================== */
#goods h3 img {
    width: 31.7%;
}
#goods h4 {
    width: 78.4%;
    margin: 0 auto 3.9%;
}
#goods h4 + p {
    font-size: min(2.5rem, 1.95vw);
    font-weight: 400;
    text-align: center;
    margin-bottom: 5.5%;
}

#goods .goods-box-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 7.8%;
}
#goods .goods-box {
    width: 30%;
    padding-bottom: 18px;

    text-align: center;

    border: 2px solid;
    border-image: linear-gradient(360deg, #320000 0%, #320000 86%, #e60012 100%) 1;
    background-color: #FFFFFF;
}
#goods .goods-box .goods-rank {
    background-image: url(../images/goods-bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    padding: 4% 0;
}
#goods .goods-box .goods-rank img {
    width: 45.9%;
}
#goods .goods-box:nth-of-type(2) .goods-rank img,
#goods .goods-box:nth-of-type(3) .goods-rank img {
    width: 45.9%;
}
#goods .goods-box .points-text {
    width: 39.24%;
    margin: 7% auto 5.6%;
}
#goods .goods-box:nth-of-type(2) .points-text {
    width: 25.96%;
}
#goods .goods-box:nth-of-type(3) .points-text {
    width: 25.88%;
}
#goods .goods-box p {
    font-size: min(2rem, 1.56vw);
    font-weight: 400;
}

/*任務報酬引換所*/
#goods .pick-up_location {
    position: relative;
    width: 93.75%;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 5.4% 0;
}
#goods .pick-up_location::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0; /* 一番下に敷く */
    background: linear-gradient(70deg, #e60012 0%, #320000 50%, #e60012 100%);
    border-radius: 8px;
}
#goods .pick-up_location::after {
    content: "";
    position: absolute;
    /* ボックスのサイズから線として出したい部分の分だけ小さくする */
    /* border-size: 2px; にしたいときは2*2px（上下or左右の分） */
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    top: 2px;
    left: 2px;
    z-index: 1;  /* グラデーションの上に被せる、かつ表示したいテキストより下にする */
    border-radius: 8px;
    background: white;
}

#goods .pick-up_location-wrapper {
    position: relative;
    z-index: 2;
    width: 83.3%;
    max-width: 1000px;
    margin: 0 auto;
}
#goods .pick-up_location-wrapper h5 {
    background-image: url(../images/line-black.png);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: contain;
    padding-bottom: 2.2%;
    margin-bottom: 5.5%;
}


#goods .pick-up_location-wrapper h5 img {
    width: 31.4%;
    max-width: 315px;
    margin: 0;
}
#goods .pick-up_location-box {
    margin-left: 5%;
}
#goods .pick-up_location-name {
    display: block;

    padding-left: 1em;
    font-size: min(2.4rem, 1.875vw);
    font-weight: 600;
    margin-bottom: 0.45em;
}
#goods .pick-up_location-name::before {
    display: block;
    float: left;

    width: 0.75em;
    height: 0.75em;
    margin-top: 0.4em;
    margin-left: -1em;

    content: "";
    background-image: url(../images/icon.png);
    background-repeat: no-repeat;
    background-size: contain
}

#goods .pick-up_location dl {
    display: grid;
    grid-template-columns: auto 1fr;
    margin: 0 auto 2.09em;
    padding: 0 0 0 1.09em;
    box-sizing: border-box;
    font-size: min(2.2rem, 1.71vw);
    line-height: 1.63;
    font-weight: 400;
}
#goods .pick-up_location dt,
#goods .pick-up_location dd {
    box-sizing: border-box;
}
#goods .pick-up_location dt {
    text-align: justify;
    text-align-last: justify;
}
#goods .pick-up_location dd {
    padding-left: 1em;
}
#goods .pick-up_location dd::before {
    content: "：";
    display: block;
    margin-left: -1em;
    width: 1em;
    float: left;
}
#goods .pick-up_location dd span {
    font-size: min(1.8rem, 1.406vw);
}


#goods ul.attention {
    padding: 0 0 0 2.5em;

    font-size: min(2rem, 1.56vw);
}
#goods ul.attention li {
    display: block;

    padding-left: 1em;
    line-height: 1.75;
}
#goods ul.attention li::before {
    display: block;
    float: left;

    width: 1em;
    margin-left: -1em;

    content: "※";
    text-align: center;
}
#goods ul.attention li.text-red {
    color: #e60012;
}
@media print, screen and (max-width: 768px) {
    #goods h3 img {
        width: 31.1vw;
    }
    #goods h4 {
        width: 56.1vw;
        margin: 0 auto 5vw;
    }
    #goods h4 + p {
        font-size: 3.6vw;
        margin-bottom: 5.8vw;
    }

    #goods .goods-box-wrapper {
        flex-direction: column;
        width: 74.2vw;
        margin: 0 auto 6.3vw;
    }
    #goods .goods-box {
        width: 100%;
        padding-bottom: 2.2vw;
    }
    #goods .goods-box + .goods-box {
        margin-top: 6.25vw;
    }
    #goods .goods-box .goods-rank {
        padding: 1.9vw 0;
    }
    #goods .goods-box .goods-rank img,
    #goods .goods-box:nth-of-type(2) .goods-rank img,
    #goods .goods-box:nth-of-type(3) .goods-rank img {
        width: 23.1vw;
    }
    #goods .goods-box .points-text {
        width: 20.3vw;
        margin: 2.9vw auto 1.3vw;
    }
    #goods .goods-box:nth-of-type(2) .points-text {
        width: 13.5vw;
    }
    #goods .goods-box:nth-of-type(3) .points-text {
        width: 13.4vw;
    }
    #goods .goods-box p {
        font-size: 3.125vw;
    }

    /*任務報酬引換所*/
    #goods .pick-up_location {
        width: 100%;
        padding: 7.8vw 0;
    }

    #goods .pick-up_location-wrapper {
        width: 74.2vw;
    }
    #goods .pick-up_location-wrapper h5 {
        background-image: url(../sp-images/line-black.png);
        padding-bottom: 3.125vw;
        margin-bottom: 7.1vw;
    }


    #goods .pick-up_location-wrapper h5 img {
        width: 41vw;
    }
    #goods .pick-up_location-box {
        margin-left: 0;
    }
    #goods .pick-up_location-name {
        font-size: 3.125vw;
        margin-bottom: 0.625em;
        padding-left: 3.64vw;
    }
    #goods .pick-up_location-name::before {
        width: 2.4vw;
        height: 2.4vw;
        margin-top: 1.2vw;
        margin-left: -3.6vw;
    }

    #goods .pick-up_location dl {
        display: grid;
        grid-template-columns: auto 1fr;
        margin: 0 auto 3.6vw;
        padding: 0;
        font-size: 2.6vw;
    }
    #goods .pick-up_location dd span {
        font-size: 2.08vw;
    }


    #goods ul.attention {
        padding: 0;

        font-size: 2.6vw;
    }
}


/* ==============================
  利用規約
============================== */
#guidelines h3 img {
    width: 31.3%;
}
#guidelines h5 {
    margin-bottom: 2em;

    text-align: center;

    font-size: min(2.1rem, 1.625vw);
    font-weight: 600;
}
#guidelines p {
    margin-bottom: 2em;

    font-size: min(1.7rem, 1.34vw);
    line-height: 1.75;
}
#guidelines p span {
    font-size: min(2.1rem, 1.625vw);
    font-weight: 600;
}
#guidelines p a {
    color: #000000;
}
#guidelines p a:hover {
    text-decoration: underline;
}
#guidelines p + ul {
    margin-top: -2em;
    margin-bottom: 2em;
}
#guidelines p + ul li {
    display: block;
    padding-left: 1em;

    font-size: min(1.7rem, 1.34vw);
    line-height: 1.75;
}
#guidelines p + ul li::before {
    content: "・";
    display: block;
    float: left;
    margin-left: -1em;
    width: 1em;
    text-align: center;
}
@media print, screen and (max-width: 768px) {
    #guidelines h3 img {
        width: 30.7vw;
    }
    #guidelines h5 {
        font-size: 3.125vw;
    }
    #guidelines p {
        font-size: 2.86vw;
    }
    #guidelines p span {
        font-size: 3.125vw;
    }
    #guidelines p + ul li {
        font-size: 2.86vw;
    }
}

/* ==============================
  専用Webアプリ 注意事項
============================== */
#guidelines .appli-attention {
    position: relative;
    width: 93.75%;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 5.4% 0;
}
#guidelines .appli-attention::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0; /* 一番下に敷く */
    background: linear-gradient(70deg, #e60012 0%, #320000 50%, #e60012 100%);
    border-radius: 8px;
}
#guidelines .appli-attention::after {
    content: "";
    position: absolute;
    /* ボックスのサイズから線として出したい部分の分だけ小さくする */
    /* border-size: 2px; にしたいときは2*2px（上下or左右の分） */
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    top: 2px;
    left: 2px;
    z-index: 1;  /* グラデーションの上に被せる、かつ表示したいテキストより下にする */
    border-radius: 8px;
    background: white;
}

#guidelines .appli-attention-wrapper {
    position: relative;
    z-index: 2;
    width: 83.3%;
    max-width: 1000px;
    margin: 0 auto;
}
#guidelines .appli-attention-wrapper h5 {
    background-image: url(../images/line-black.png);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: contain;
    padding-bottom: 2.2%;
    margin-bottom: 5.5%;
    text-align: left;
}


#guidelines .appli-attention-wrapper h5 img {
    width: 53.4%;
    max-width: 534px;
    margin: 0;
}
#guidelines .appli-attention-wrapper li {
    display: block;
    padding-left: 1em;
    font-size: min(1.5rem, 1.17vw);
    line-height: 1.75;
}
#guidelines .appli-attention-wrapper li::before {
    content: "※";
    display: block;
    float: left;
    margin-left: -1em;
    width: 1em;
    text-align: center;
}

@media print, screen and (max-width: 768px) {
    #guidelines .appli-attention {
        width: 100%;
        padding: 7.81vw 0;
    }

    #guidelines .appli-attention-wrapper {
        width: 74.2vw;
    }
    #guidelines .appli-attention-wrapper h5 {
        background-image: url(../sp-images/line-black.png);
        padding-bottom: 3.125vw;
        margin-bottom: 7.1vw;
    }


    #guidelines .appli-attention-wrapper h5 img {
        width: 69.6vw;
    }
    #guidelines .appli-attention-wrapper li {
        font-size: 2.86vw;
    }
}

/* ==============================
  問 合
============================== */
#contact_us h3 img {
    width: 17.8%;
}
#contact_us .btn-contact_us {
    width: 91.5%;
    max-width: 915px;
    margin: 0 auto;
}
#contact_us p {
    margin-top: 5.4%;

    text-align: center;

    font-size: min(1.6rem, 1.25vw);
    font-weight: 400;
    line-height: 1.875;
}
#contact_us .attention {
    margin-top: 5.1%;
}
#contact_us .attention li {
    display: block;

    padding-left: 1em;

    font-size: min(1.2rem, 0.9375vw);
    font-weight: 400;
    line-height: 1.875;
}
#contact_us .attention li::before {
    display: block;
    float: left;

    width: 1em;
    margin-left: -1em;

    content: "※";
    text-align: center;
}
#contact_us .attention li a {
    color: #000000;
}
#contact_us .attention li a:hover {
    text-decoration: underline;
}
#contact_us .point_attention p {
    margin-top: 0;

    text-align: left;
}
#contact_us .point_attention p::before {
    color: #e60012;
    font-size: min(2rem, 1.56vw);
    content: "※";
    text-align: center;
}
#contact_us p span {
    color: #e60012;

    font-size: min(2rem, 1.56vw);
}
@media print, screen and (max-width: 768px) {
    #contact_us h3 img {
        width: 17.4vw;
    }
    #contact_us .btn-contact_us {
        width: 75.2vw;
    }
    #contact_us p {
        margin-top: 6.5vw;

        font-size: 3.125vw;
    }
    #contact_us .attention {
        margin-top: 6.5vw;
    }
    #contact_us .attention li {
        font-size: 2.86vw;
    }
    #contact_us .point_attention p::before {
        font-size: 3.9vw;
    }
    #contact_us p span {
        font-size: 3.9vw;
    }
}


/* ==============================
  フッター
============================== */

footer .inner {
    width: 78.125%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 16.3% 0 5.2%;
}
footer p {
    font-size: 12px;
    font-weight: 400;
    line-height: 2.1;
}
footer p span {
    font-size: 14px;
    font-weight: 400;
}
footer p + p {
    margin-top: 20px;
}

footer p.copyright {
    text-align: center;

    font-weight: normal;
}
footer p.copyright .pc {
    display: inline;
}
@media print, screen and (max-width: 768px) {
    footer {
        border-top: none;
    }
    footer .inner {
        position: relative;

        width: 100%;
        padding: 5.4vw 0;
    }
    footer p {
        font-size: 3.125vw;
        width: 20em;
        margin: 0 auto;
    }
    footer p span {
        margin-right: 1em;

        font-size: 3.125vw;
    }
    footer p + p {
        margin-top: 1.5vw;
    }

    footer p.copyright {
        width: 100%;
        margin: 5.8vw 0 0;

    }
    footer p.copyright .pc {
        display: none;
    }

}

/* ==============================
  終了テキスト
==============================
#navigation {
    padding-top: 0;
}
#notice {
    width: 100%;
    background-color: #FFA500;
}
#notice .notice-wrapper {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    max-width: 90%;
    margin: 0 auto;
}
#notice .end {
    color: #D80C18;
    font-weight: 400;
    font-size: 24px;
}

@media print, screen and (max-width: 768px) {
    #notice .notice-wrapper {
        background-color: inherit;
        width: 90vw;
    }
    #notice .end {
        font-size: 16px;
        text-align: center;
    }
}
*/