/* 常に表示される部分のスタイル情報をまとめたファイル */

@charset "utf-8";

@font-face {
    font-family: "Riipop";
    src: url(/assets/font/riipopkr.otf) format("opentype");
    font-display: swap;
}

:root {
    --HeightHeaderFooter: 10svh;
    --WidthButtonSquare: 7svh;
    --MarginEdgeButton: 10px;
    --MaxWidthContentsFooter: calc(100svw - var(--WidthButtonSquare) * 2 - var(--MarginEdgeButton) * 2);
    --DurationMenuToggle: 500ms;
    --OffsetMenuCrabNear: 70%;
    --OffsetMenuCrabFar: 100%;
    --DurationMenuCrabBounce: 2000ms;
    --SizeLogoSymbol: 7svh;
    --MarginEdgeLogo: 10px;
    --SizeBrick: calc(10.5svh + 30px) 100%;
}

#Debug {
    position: fixed;
    top: 10svh; left: 10px;
    z-index: 100;
    display: none;
}

* {
    background-color: transparent;
    padding: 0; margin: 0; border: 0 none transparent;
    forced-color-adjust: none;
    /* サイト全体をAndroidの強制ダーク変換の対象から除外する(このサイトはprefers-color-schemeで配色を変えていないため) */
    color-scheme: dark;
}

noscript {
    color: #fff;
    position: fixed;
    display: inline-block;
    width: 100%;
    left: 0; bottom: 50%;
    z-index: 99;
    visibility: visible;
}

body {
    background-color: #ccc;
    /* color-schemeの影響でcurrentColor(box-shadowや枠線などの既定色)が変わらないよう、文字色を明示しておく */
    color: #000;
    position: relative;
    width: 100dvw; height: 100dvh;
    text-align: center;
    font-family: "Riipop", sans-serif;
    visibility: hidden;
    touch-action: none;
    user-select: none;
}

header, footer {
    background-color: #666;
    position: fixed;
    width: 100%; height: var(--HeightHeaderFooter);
    background-repeat: no-repeat;
    z-index: 90;
}
header {
    top: 0;
}
footer {
    --AspectRatioTextFooter: calc(1800 / 200);
    bottom: 0;
    background-image: url(/assets/image/decoration/text-footer.webp);
    background-size: auto min(3svh, calc(var(--MaxWidthContentsFooter) / var(--AspectRatioTextFooter)));
    background-position: center;
}

#Contents {
    position: fixed;
    width: 100%;
    /* JS(UpdateContentsPosition)がHeader/Footerの実測位置から--Measured*を設定する。
       未設定時はsvhベースの値にフォールバックする */
    top: var(--MeasuredMiddleTop, var(--HeightHeaderFooter));
    bottom: var(--HeightHeaderFooter);
    height: var(--MeasuredMiddleHeight, auto);
    overflow: hidden;
}

#ErrorAspectRatio {
    display: none;
}
#ErrorAspectRatio.Display {
    color: #fff;
    position: fixed;
    display: inline-block;
    width: 100%;
    left: 0; bottom: 50%;
    z-index: 99;
}

button {
    /* button要素は既定でbodyのcolorを継承しないため、currentColor(box-shadowなど)がずれないよう明示的に継承させる */
    color: inherit;
    transition-property: scale;
    transition-duration: 200ms;
}
button.Hovering {
    background-blend-mode: multiply;
    scale: 1.1;
}

button.ButtonSquare {
    width: var(--WidthButtonSquare); aspect-ratio: 1 / 1;
    border-radius: 26%;
    box-shadow: 0 0.5svh 0.5svh;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

#ButtonOption {
    position: absolute;
    right: var(--MarginEdgeButton); top: calc(50% - var(--WidthButtonSquare) / 2);
    background-image: url(/assets/image/button/button-option.webp), url(/assets/image/button/button-option-push.webp);
    z-index: 91;
}
#ButtonOption.Pressed {
    background-image: url(/assets/image/button/button-option-push.webp);
}

#ButtonHelp {
    display: none;
    position: absolute;
    left: var(--MarginEdgeButton); top: calc(50% - var(--WidthButtonSquare) / 2);
    background-image: url(/assets/image/button/button-help.webp), url(/assets/image/button/button-help-push.webp);
}
#ButtonHelp.Pressed {
    background-image: url(/assets/image/button/button-help-push.webp);
}

nav#HomeMenu {
    background-color: #999;
    position: fixed;
    width: 100%;
    top: var(--MeasuredMiddleTop, var(--HeightHeaderFooter));
    bottom: var(--HeightHeaderFooter);
    height: var(--MeasuredMiddleHeight, auto);
    opacity: 0;
    pointer-events: none;
    overflow-y: scroll;
    transition: all var(--DurationMenuToggle);
    z-index: 80;
}

nav#HomeMenu.OnClickOption {
    opacity: 1;
    pointer-events: auto;
}

.MenuCrab {
    position: fixed;
    width: var(--WidthMenuCrab); aspect-ratio: 1 / 1;
    top: calc(var(--MeasuredFooterTop, calc(100% - var(--HeightHeaderFooter))) - var(--WidthMenuCrab));
    translate: var(--TranslateXClosed, 0) 200%;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom;
    animation: MenuCrabExit var(--DurationMenuToggle) ease-in forwards;
    z-index: 81;
}
#MenuCrabR.MenuCrab {
    --TranslateXClosed: calc(0.5 * var(--WidthMenuCrab) - 20dvw);
    right: calc(50% - var(--WidthMenuCrab) / 2 + var(--WidthMenuCrab));
    background-image: url(/assets/image/character/anime-crab-r.webp);
}
#MenuCrabB.MenuCrab {
    --TranslateXClosed: calc(20dvw - 0.5 * var(--WidthMenuCrab));
    left: calc(50% - var(--WidthMenuCrab) / 2 + var(--WidthMenuCrab));
    background-image: url(/assets/image/character/anime-crab-b.webp);
}
#MenuCrabY.MenuCrab {
    --TranslateXClosed: calc(1.5 * var(--WidthMenuCrab) - 50dvw);
    right: calc(50% - var(--WidthMenuCrab) / 2 + var(--WidthMenuCrab) * 2);
    background-image: url(/assets/image/character/anime-crab-y.webp);
}
#MenuCrabG.MenuCrab {
    --TranslateXClosed: calc(50dvw - 1.5 * var(--WidthMenuCrab));
    left: calc(50% - var(--WidthMenuCrab) / 2 + var(--WidthMenuCrab) * 2);
    background-image: url(/assets/image/character/anime-crab-g.webp);
}
#MenuCrabP.MenuCrab {
    left: calc(50% - var(--WidthMenuCrab) / 2);
    background-image: url(/assets/image/character/anime-crab-p.webp);
}

@keyframes MenuCrabEnter {
    from {
        translate: var(--TranslateXClosed, 0) 200%;
    }
    to {
        translate: 0;
    }
}
@keyframes MenuCrabExit {
    from {
        translate: 0;
    }
    to {
        translate: var(--TranslateXClosed, 0) 200%;
    }
}

#MenuCrabR.MenuCrab.OnClickOption {
    animation: MenuCrabEnter var(--DurationMenuToggle) ease-out forwards,
               MenuCrabR var(--DurationMenuCrabBounce) var(--DurationMenuToggle) ease-in-out infinite;
}
#MenuCrabB.MenuCrab.OnClickOption {
    animation: MenuCrabEnter var(--DurationMenuToggle) ease-out forwards,
               MenuCrabB var(--DurationMenuCrabBounce) var(--DurationMenuToggle) ease-in-out infinite;
}
#MenuCrabY.MenuCrab.OnClickOption {
    animation: MenuCrabEnter var(--DurationMenuToggle) ease-out forwards,
               MenuCrabY var(--DurationMenuCrabBounce) var(--DurationMenuToggle) ease-in-out infinite;
}
#MenuCrabG.MenuCrab.OnClickOption {
    animation: MenuCrabEnter var(--DurationMenuToggle) ease-out forwards,
               MenuCrabG var(--DurationMenuCrabBounce) var(--DurationMenuToggle) ease-in-out infinite;
}
#MenuCrabP.MenuCrab.OnClickOption {
    animation: MenuCrabEnter var(--DurationMenuToggle) ease-out forwards,
               MenuCrabP var(--DurationMenuCrabBounce) var(--DurationMenuToggle) ease-in-out infinite;
}
@keyframes MenuCrabY {
    0% {
        translate: 0;
    }
    30% {
        translate: 0;
    }
    40% {
        translate: 0 calc(-1 * var(--WidthMenuCrab));
    }
    50% {
        translate: 0;
    }
    100% {
        translate: 0;
    }
}
@keyframes MenuCrabR {
    0% {
        translate: 0;
    }
    40% {
        translate: 0;
    }
    50% {
        translate: 0 calc(-1 * var(--WidthMenuCrab));
    }
    60% {
        translate: 0;
    }
    100% {
        translate: 0;
    }
}
@keyframes MenuCrabP {
    0% {
        translate: 0;
    }
    50% {
        translate: 0;
    }
    60% {
        translate: 0 calc(-1 * var(--WidthMenuCrab));
    }
    70% {
        translate: 0;
    }
    100% {
        translate: 0;
    }
}
@keyframes MenuCrabB {
    0% {
        translate: 0;
    }
    60% {
        translate: 0;
    }
    70% {
        translate: 0 calc(-1 * var(--WidthMenuCrab));
    }
    80% {
        translate: 0;
    }
    100% {
        translate: 0;
    }
}
@keyframes MenuCrabG {
    0% {
        translate: 0;
    }
    70% {
        translate: 0;
    }
    80% {
        translate: 0 calc(-1 * var(--WidthMenuCrab));
    }
    90% {
        translate: 0;
    }
    100% {
        translate: 0;
    }
}

#HomeMenu #Palette {
    display: grid;
    box-sizing: border-box;
    position: absolute;
    width: calc(100% - (100dvw - 100%));
    gap: var(--GapPalette);
    padding: var(--GapPalette);
    left: calc(100dvw - 100%); top: 0;
    translate: 0 -100%;
    transition: all var(--DurationMenuToggle);
    z-index: 82;
}
#HomeMenu #Palette.OnClickOption {
    translate: 0;
}

#HomeMenu #Palette figure .Icon {
    display: block;
    width: 100%;
    box-shadow: 0 calc(var(--GapPalette) / 2) calc(var(--GapPalette) / 2);
    transition: all 200ms;
    animation: Icon 2500ms linear infinite;
}
#HomeMenu #Palette figure .Icon.Hovering {
    scale: 1.1;
}
#HomeMenu #Palette figure .Icon.Pressed {
    opacity: 0.5;
}
@keyframes Icon {
    0% {
        border-radius: 20%;
    }
    50% {
        border-radius: 50%;
    }
    100% {
        border-radius: 20%;
    }
}

#HomeMenu #Palette figure figcaption {
    color: #fff;
    margin-top: var(--GapPalette);
    font-size: var(--SizeFont);
}


@media screen and (min-width: 0px) and (max-width: 500px) {

    :root {
        --WidthMenuCrab: 20dvw;
        --GapPalette: 3dvw;
        --SizeFont: 3dvw;
    }

    header {
        background-image: url(/assets/image/decoration/text-header-small.webp), url(/assets/image/decoration/symbol.webp), url(/assets/image/decoration/brick.webp);
        background-size: auto 8svh, var(--SizeLogoSymbol), var(--SizeBrick);
        background-position: center, left var(--MarginEdgeLogo) center, right center;
    }

    #HomeMenu #Palette {
        grid-template-columns: repeat(3, 1fr);
    }

}

@media screen and (min-width: 500px) and (max-width: 1000px) {

    :root {
        --WidthMenuCrab: 15dvw;
        --GapPalette: 2dvw;
        --SizeFont: 2dvw;
    }

    header {
        background-image: url(/assets/image/decoration/text-header-small.webp), url(/assets/image/decoration/symbol.webp), url(/assets/image/decoration/brick.webp);
        background-size: auto 8svh, var(--SizeLogoSymbol), var(--SizeBrick);
        background-position: left calc(var(--MarginEdgeLogo) + var(--SizeLogoSymbol) + 20px) center, left var(--MarginEdgeLogo) center, right center;
    }

    #HomeMenu #Palette {
        grid-template-columns: repeat(6, 1fr);
    }

}

@media screen and (min-width: 1000px) and (max-width: 9999px) {

    :root {
        --WidthMenuCrab: 10dvw;
        --GapPalette: 1dvw;
        --SizeFont: 1dvw;
    }

    header {
        background-image: url(/assets/image/decoration/text-header-large.webp), url(/assets/image/decoration/symbol.webp), url(/assets/image/decoration/brick.webp);
        background-size: auto 6svh, var(--SizeLogoSymbol), var(--SizeBrick);
        background-position: left calc(var(--MarginEdgeLogo) + var(--SizeLogoSymbol) + 30px) center, left var(--MarginEdgeLogo) center, right center;
    }

    #HomeMenu #Palette {
        grid-template-columns: repeat(9, 1fr);
    }

}