@charset "utf-8";
/* CSS Document */

body  {
    background-color: rgba(192,162,100,1.00);
    cursor: default;
    height: 100%;
}




/*@keyframes rotate-anime {
		
		0%{transform:rotate(0);}
		100%{transform:rotate(360deg);}}*/
.hole .mons {
    position: absolute;
    margin-left: 10%;
    margin-top: 31%;
    width: 28%;
}
.m1 {
	transform: rotateZ(45deg);
}

.hole .midohole {
    width: 100%;
    transform: translate(-50%, -50%);
    transform-origin: 50% 50%;
    animation: midoholeBreath 40s ease-in-out infinite;
    will-change: transform;
    margin-left: auto;
    margin-top: auto;
    margin-right: auto;
    margin-bottom: auto;
    top: 50%;
    position: absolute;
    left: 50%;
    z-index: -6;
    /* [disabled]background-color: rgba(187,148,149,1.00); */
    height: auto;
    
}
@keyframes midoholeBreath {
    0% {
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.05);
    }
    62.5% {
        transform: translate(-50%, -50%) scale(1.05);
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
    }
}
.mtet_hani {
    background-color: rgba(203,69,71,0.34);
}
.mhtxt {
   
}

.mtxt {
     position: absolute;
    font-size: 15px;
    margin-right: 0%;
    margin-left: 0%;
    left: 50%;
    right: 0px;
    top: 50%;
    margin-bottom: 0%;
    transform: translate(-50%, -50%);
    bottom: 0px;
    text-align: center;
    margin-top: 4%;
    width: 100%;
    z-index: 0;
    color: rgba(18,14,15,1.00);
}
.mtxt2 {
    position: absolute;
    font-size: 15px;
    text-align: center;
    width: 66%;
    z-index: 788;
    color: rgba(18, 14, 15, 1.00);
    line-height: 1.5;
    background-color: rgba(225,224,220,1.00);
    top: calc(16% - var(--battle-text-lift, 0%));
    transform: translateX(25%);
    border-radius: 6px;
    border: 2px outset rgba(90,90,90,1.00);
    transition: top 0.2s ease-out;
}

.htxt {
    /*    点滅カーソル消し*/
    　user-select: none;
    position: absolute;
    font-size: 50%;
    margin-right: 0%;
    margin-left: 0%;
    left: 50%;
    right: 0px;
    top: 50%;
    margin-bottom: 0%;
    margin-top: 21%;
    transform: translate(-50%, -50%);
    bottom: 0px;
    text-align: center;
    /* [disabled]background-color: #A74A4C; */
    z-index: 200;
}


.hole {
    /*background-color: rgba(241,137,139,0.60);*/
    position: absolute;
    z-index: -7;
    top: 50%;
    left: 50%;
    min-width: 98px;
    transform: translate(-50%, -50%);
    /*	animation: rotate-anime 3s linear infinite;
	*/
    padding-bottom: 82%;
    width: 75%;
}
.black {
    top: 19%;
    position: absolute;
    left: 73%;
    /* [disabled]background-color: rgba(179,69,71,1.00); */
    /* [disabled]width: 0px; */
    /* [disabled]height: auto; */
}
.sbl  {
    width: 88%;
    margin-left: auto;
    margin-right: auto;
    left: 0px;
    right: 0px;
    margin-top: auto;
    margin-bottom: auto;
    top: 0px;
    bottom: 0px;
    transform: translate(-50%, -50%);
    font-size: medium;
}
.blue {
    top: 49%;
    position: absolute;
    left: 85%;
    /* [disabled]background-color: rgba(179,69,71,1.00); */
    /* [disabled]width: 142px; */
    /* [disabled]height: auto; */
}
.sao  {
    /* [disabled]width: 98%; */
    margin-left: auto;
    margin-right: auto;
    left: 0px;
    right: 0px;
    margin-top: auto;
    margin-bottom: auto;
    top: 0px;
    bottom: 0px;
    transform: translate(-50%, -50%);
    font-size: medium;
}
.red {
    top: 82%;
    position: absolute;
    left: 70%;
    /* [disabled]background-color: rgba(179,69,71,1.00); */
    /* [disabled]height: auto; */
}
.sre  {
    /* [disabled]width: 88%; */
    margin-left: auto;
    margin-right: auto;
    left: 0px;
    right: 0px;
    margin-top: auto;
    margin-bottom: auto;
    top: 0px;
    bottom: 0px;
    transform: translate(-50%, -50%);
    font-size: medium;
}.yellow {
    top: 69%;
    position: absolute;
    left: 28%;
    /* [disabled]background-color: rgba(179,69,71,1.00); */
    /* [disabled]width: 190px; */
    /* [disabled]height: auto; */
}
.sye  {
    /* [disabled]width: 88%; */
    margin-left: auto;
    margin-right: auto;
    left: 0px;
    right: 0px;
    margin-top: auto;
    margin-bottom: auto;
    top: 0px;
    bottom: 0px;
    transform: translate(-50%, -50%);
    font-size: medium;
}.white {
    top: 32%;
    position: absolute;
    left: 25%;
    /* [disabled]background-color: rgba(179,69,71,1.00); */
    /* [disabled]width: 142px; */
    /* [disabled]height: auto; */
}
.swh  {
    /* [disabled]width: 88%; */
    margin-left: auto;
    margin-right: auto;
    left: 0px;
    right: 0px;
    margin-top: auto;
    margin-bottom: auto;
    top: 0px;
    bottom: 0px;
    transform: translate(-50%, -50%);
    font-size: medium;
}
.en {
    /* [disabled]width: 13%; */
    /* [disabled]min-width: 153px; */
    height: 0px;
    z-index: 44;
    min-height: 0px;
}

.bltxt  {color: rgba(204,204,204,1.00);
    font-size: 107%;
    /* [disabled]background-color: rgba(111,17,19,1.00); */
    width: 71%;
    height: 65%;
}
.aotxt  {
    color: rgba(205,194,176,1.00);
    font-size: 107%;
    /* [disabled]background-color: rgba(111,17,19,1.00); */
    width: 71%;
    height: 65%;
}
.retxt  {color: rgba(176,205,205,1.00);
    font-size: 107%;
    /* [disabled]background-color: rgba(111,17,19,1.00); */
    width: 71%;
    height: 65%;
}
.yetxt  {
    color: rgba(181,185,210,1.00);
    font-size: 107%;
    /* [disabled]background-color: rgba(111,17,19,1.00); */
    width: 66%;
    height: 65%;
}

.whtxt {
    color: rgba(174,174,174,1.00);
    font-size: 107%;
    /* [disabled]background-color: rgba(111,17,19,1.00); */
    width: 71%;
    height: 65%;
}
.en img {
    width: 100%;
    height: auto;
    left: 0px;
    right: 0px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 1000px) {
    .hole-event-mode .bltxt,
    .hole-event-mode .aotxt,
    .hole-event-mode .retxt,
    .hole-event-mode .yetxt,
    .hole-event-mode .whtxt {
        font-size: 85.6%;
    }

    .hole-event-mode .bltxt {
        color: rgba(184,184,184,1);
    }

    .hole-event-mode .aotxt {
        color: rgba(198,179,151,1);
    }

    .hole-event-mode .retxt {
        color: rgba(148,194,194,1);
    }

    .hole-event-mode .yetxt {
        color: rgba(158,165,207,1);
    }

    .hole-event-mode .whtxt {
        color: rgba(151,151,151,1);
    }
}


.modoru {
    width: 6%;
    height: auto;
    min-width: 91px;
    position: absolute;
    left: 6%;
    top: 83%;
}
.modoru img {
    width: 100%;
    height: auto;
    min-width: 37px;
}
.en_im_f {
    /*background-color: rgba(203,98,100,0.60);*/
    z-index: 1000;
    position: absolute;
    /* [disabled]top: 66%; */
    top: 64%;
    left: 50%;
    transform: translate(-50%, -5%);
    width: 72%;
    height: 8%;
}
.dynamic-element {
  width: 100%;
  height: auto;
  max-width: 500px; /* 必要に応じて変更してください */
  margin: 0 auto;
}
.hole img {
    width: 20%;
    height: auto;
    transform: translate(-50%, -50%);
    top: 55%;
    position: absolute;
    left: 50%;
}
.hole_gazo {


}

.uwa {
    position: fixed;
    z-index: 49;
   pointer-events: none;

}
.uwa.blao {
    left: 46%;
    top: 7%;

}
.uwa.aord {
    left: 78%;
    top: 32%;
}
.uwa.rdye {
    top: 64%;
    left: 78%;
}
.uwa.yewh {
    top: 78%;
    left: 47%;
}

.uwa.whbl {
    top: 51%;
    left: 25%;
}

.event-uwa-rainbow {
    animation: event-uwa-rainbow 5s linear infinite;
    will-change: filter;
}

@keyframes event-uwa-rainbow {
    0% {
        filter: invert(27%) sepia(95%) saturate(4700%) hue-rotate(225deg) brightness(92%) contrast(108%);
    }
    20% {
        filter: invert(20%) sepia(99%) saturate(6500%) hue-rotate(357deg) brightness(92%) contrast(118%);
    }
    40% {
        filter: invert(90%) sepia(99%) saturate(2600%) hue-rotate(355deg) brightness(108%) contrast(105%);
    }
    60% {
        filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(108%) contrast(100%);
    }
    80% {
        filter: invert(0%) sepia(0%) saturate(100%) hue-rotate(0deg) brightness(100%) contrast(100%);
    }
    100% {
        filter: invert(27%) sepia(95%) saturate(4700%) hue-rotate(225deg) brightness(92%) contrast(108%);
    }
}

.haiti0 {
}
.haiti1 {
}
.haiti2 {
}
.haiti3 {
}
.haiti4 {
}

/* AIに作ってもらったダメージアニメCSS */
@keyframes blinkAnimation {
  0%, 100% {
    opacity: 1; /* 0% と 100% の時点で不透明 */
  }
  50% {
    opacity: 0; /* 50% の時点で透明 */
  }
}

/* アニメーションを適用するクラス */
.im_m_blink {
  animation: blinkAnimation 0.1s 3; /* 1.5秒かけて3回繰り返す */
	
}

@keyframes sokokuGuardShake {
  0% { translate: 0 0; }
  8% { translate: 8px 0; }
  16% { translate: -7px 0; }
  25% { translate: 6px 0; }
  34% { translate: -5px 0; }
  43% { translate: 4px 0; }
  51% { translate: -3px 0; }
  59% { translate: 2.5px 0; }
  67% { translate: -2px 0; }
  74% { translate: 1.5px 0; }
  81% { translate: -1px 0; }
  87% { translate: 0.7px 0; }
  92% { translate: -0.4px 0; }
  96% { translate: 0.2px 0; }
  100% { translate: 0 0; }
}

.sokoku-guard-shake {
  animation: sokokuGuardShake 0.5s linear;
}

.tobasi-damage-shake {
  animation: sokokuGuardShake 0.5s linear;
}
.kyokuin_ims {
    z-index: 101;
    position: absolute;
    margin-top: 20%;
    /* [disabled]background-color: #72AD90; */
}


.hole_yokohaba {
    width: 48%;
    position: absolute;
    transform: translate(-50%, -50%);
    /*background-color: rgba(241,137,10,0.60);*/
    top: 50%;
    left: 50%;
}
.item_box {
    position: fixed;
    bottom: 10px;
    right: 10px;
    /* [disabled]background-color: rgba(204,204,204,0.28); */
    padding: 10px;
    /* [disabled]border: 1px solid #000; */
}

.item {
    width: 50px;
    height: 50px;
    /* [disabled]background-color: rgba(255,0,0,0.52); */
    margin-right: 5px;
    display: inline-block;
    position: relative;
}

.choice-punyon {
    animation: choicePunyon 0.5s ease-out;
    transform-origin: 50% 50%;
}

.choice-battle-punyon {
    animation: choiceBattlePunyon 0.3s ease-out;
    transform-origin: 50% 50%;
}

.back-choice-punyon {
    animation: backChoicePunyon 0.5s ease-out;
    transform-origin: 50% 50%;
}

.back-choice-battle-punyon {
    animation: backChoiceBattlePunyon 0.3s ease-out;
    transform-origin: 50% 50%;
}

.choice-hover-grow {
    transform: translate(-50%, -50%) scale(1.05);
}

.field-choice-disabled {
    pointer-events: none;
}

.field-blocked-text {
    display: inline-block;
    font-size: 0.7em;
    line-height: 1;
    transform: translateY(-0.18em);
}

.hole-small-objective-notice {
    position: fixed;
    top: 7%;
    left: 50%;
    z-index: 12000;
    max-width: min(460px, 86vw);
    padding: 10px 18px;
    transform: translateX(-50%);
    border: 3px solid #fff;
    box-shadow: 0 0 0 1px #222, 0 5px 16px rgba(0,0,0,0.25);
    background: rgba(255,255,255,0.96);
    color: #222;
    font-family: sans-serif;
    font-size: 16px;
    line-height: 1.45;
    text-align: center;
    pointer-events: none;
    opacity: 1;
    transition: opacity 1s ease;
}

.hole-small-objective-notice-hide {
    opacity: 0;
}

.hole-small-mission-log-button {
    border: 0;
    padding: 0 2px;
    background: transparent;
    color: #555;
    font: inherit;
    font-size: 0.66em;
    cursor: pointer;
}

.hole-small-mission-description,
.hole-small-mission-log {
    position: fixed;
    z-index: 10120;
    width: min(330px, 82vw);
    max-height: 78vh;
    overflow-y: auto;
    padding: 10px 12px;
    border: 3px solid #fff;
    box-shadow: 0 0 0 1px #222, 0 5px 16px rgba(0,0,0,0.25);
    background: rgba(255,255,255,0.97);
    color: #222;
    font-family: sans-serif;
    font-size: 14px;
    line-height: 1.45;
}

.hole-small-mission-log {
    padding-top: 30px;
}

.hole-small-mission-log-close {
    position: absolute;
    top: 3px;
    right: 7px;
    border: 0;
    padding: 0;
    background: transparent;
    color: #222;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.hole-small-mission-log-item {
    padding: 7px 0;
    border-top: 1px solid rgba(0,0,0,0.16);
}

.hole-small-mission-explanation {
    font-size: 0.8em;
}

.hole-small-mission-meta {
    font-size: 0.6em;
}

.status-hp-info-description {
    font-size: 0.9em;
}

.status-hp-info-healthy-ratio {
    font-size: 0.7em;
}

.status-hp-gauge {
    position: relative;
    min-height: 1em;
    margin: 2px 0;
    overflow: visible;
    isolation: isolate;
}

.status-hp-gauge-target,
.status-hp-gauge-current,
.status-hp-gauge-missing,
.status-hp-gauge-excess {
    position: absolute;
    left: 0;
    top: 50%;
    height: 0.8em;
    transform: translateY(-50%);
    display: block;
    box-sizing: border-box;
    pointer-events: none;
}

.status-hp-gauge-target {
    z-index: 2;
    border: 1px solid var(--status-gauge-border, #555);
    background: transparent;
}

.status-hp-gauge-current,
.status-hp-gauge-missing,
.status-hp-gauge-excess {
    z-index: 1;
}

.status-hp-gauge-excess {
    border-top: 1px solid rgba(255,255,255,0.1);
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.status-hp-gauge-moving.status-hp-gauge-punyon-range .status-hp-gauge-current,
.status-hp-gauge-moving.status-hp-gauge-punyon-range .status-hp-gauge-target {
    transform-origin: left center;
    animation: status-hp-gauge-punyon-small var(--status-punyon-duration, 0.492s) ease-in-out infinite;
}

.status-hp-gauge-moving.status-hp-gauge-yusayusa-range .status-hp-gauge-current,
.status-hp-gauge-moving.status-hp-gauge-yusayusa-range .status-hp-gauge-target {
    transform-origin: left center;
    animation: status-hp-gauge-yusayusa var(--status-punyon-duration, 0.492s) ease-in-out infinite;
}

.status-hp-gauge-low-moving .status-hp-gauge-current,
.status-hp-gauge-low-moving .status-hp-gauge-missing,
.status-hp-gauge-low-moving .status-hp-gauge-target {
    animation: status-hp-gauge-low-shake 1s ease-out 1;
}

@keyframes status-hp-gauge-punyon-small {
    0% {
        transform: translateY(-50%) scale(1, 1);
    }
    25% {
        transform: translateY(-50%) scale(var(--status-punyon-x0, 1), var(--status-punyon-y0, 1));
    }
    50% {
        transform: translateY(-50%) scale(var(--status-punyon-x1, 1), var(--status-punyon-y1, 1));
    }
    75% {
        transform: translateY(-50%) scale(var(--status-punyon-x2, 1), var(--status-punyon-y2, 1));
    }
    100% {
        transform: translateY(-50%) scale(1, 1);
    }
}

@keyframes status-hp-gauge-low-shake {
    0% {
        transform: translateY(-50%) translate(0, 0);
    }
    12% {
        transform: translateY(-50%) translate(calc(var(--status-low-shake, 0px) * -0.42), calc(var(--status-low-shake-y, 0px) * 0.35));
    }
    25% {
        transform: translateY(-50%) translate(calc(var(--status-low-shake, 0px) * 0.66), calc(var(--status-low-shake-y, 0px) * -0.55));
    }
    40% {
        transform: translateY(-50%) translate(calc(var(--status-low-shake, 0px) * -0.38), calc(var(--status-low-shake-y, 0px) * -0.18));
    }
    58% {
        transform: translateY(-50%) translate(calc(var(--status-low-shake, 0px) * 0.23), calc(var(--status-low-shake-y, 0px) * 0.28));
    }
    78% {
        transform: translateY(-50%) translate(calc(var(--status-low-shake, 0px) * -0.1), calc(var(--status-low-shake-y, 0px) * -0.08));
    }
    100% {
        transform: translateY(-50%) translate(0, 0);
    }
}

@keyframes status-hp-gauge-yusayusa {
    0% {
        transform: translateY(-50%) scale(1, 1);
    }
    25% {
        transform: translateY(-50%) scale(var(--status-punyon-x0, 1), var(--status-punyon-y0, 1));
    }
    50% {
        transform: translateY(-50%) scale(1, 1);
    }
    75% {
        transform: translateY(-50%) scale(var(--status-punyon-x1, 1), var(--status-punyon-y1, 1));
    }
    100% {
        transform: translateY(-50%) scale(1, 1);
    }
}

.status-hp-gauge-label {
    position: relative;
    z-index: 3;
    display: inline;
    padding: 0 3px;
    color: #171717;
    background: transparent;
    font-weight: 600;
    text-shadow: none;
    overflow-wrap: anywhere;
}

.status-micro-hp-value .status-hp-gauge-label {
    display: block;
    padding: 0 2px;
    font-size: clamp(7px, 1.8vw, 13px);
    line-height: 0.93em;
    white-space: nowrap;
    overflow-wrap: normal;
}

#hole-effect-input-lock {
    position: fixed;
    inset: 0;
    z-index: 20000;
    background: transparent;
    cursor: wait;
    touch-action: none;
}

@media screen and (max-width: 1000px) {
    .field-blocked-text {
        font-size: 0.56em;
    }

    .hole-small-objective-notice {
        font-size: 20px;
    }

    .hole-small-mission-description,
    .hole-small-mission-log {
        width: min(440px, 88vw);
        font-size: 18px;
    }
}

.field-step-north {
    animation: fieldStepNorth 0.22s ease-out both;
}

.field-step-east {
    animation: fieldStepEast 0.22s ease-out both;
}

.field-step-south {
    animation: fieldStepSouth 0.22s ease-out both;
}

.field-step-west {
    animation: fieldStepWest 0.22s ease-out both;
}

@keyframes fieldStepNorth {
    0% { transform: translate(0, 0); }
    45% { transform: translate(0, -9px); }
    100% { transform: translate(0, -5px); }
}

@keyframes fieldStepEast {
    0% { transform: translate(0, 0); }
    45% { transform: translate(9px, 0); }
    100% { transform: translate(5px, 0); }
}

@keyframes fieldStepSouth {
    0% { transform: translate(0, 0); }
    45% { transform: translate(0, 9px); }
    100% { transform: translate(0, 5px); }
}

@keyframes fieldStepWest {
    0% { transform: translate(0, 0); }
    45% { transform: translate(-9px, 0); }
    100% { transform: translate(-5px, 0); }
}

@keyframes choicePunyon {
    0% { transform: translate(-50%, -50%) scale(1, 1); }
    18% { transform: translate(-50%, -50%) scale(0.82, 1.18); }
    42% { transform: translate(-50%, -50%) scale(1.14, 0.9); }
    72% { transform: translate(-50%, -50%) scale(0.96, 1.04); }
    100% { transform: translate(-50%, -50%) scale(1, 1); }
}

@keyframes choiceBattlePunyon {
    0% { transform: translate(-50%, -50%) translateX(0) scale(1, 1); }
    16% { transform: translate(-50%, -50%) translateX(-7px) scale(0.84, 1.18); }
    34% { transform: translate(-50%, -50%) translateX(7px) scale(1.15, 0.88); }
    52% { transform: translate(-50%, -50%) translateX(-5px) scale(0.95, 1.07); }
    74% { transform: translate(-50%, -50%) translateX(4px) scale(1.04, 0.96); }
    100% { transform: translate(-50%, -50%) translateX(0) scale(1, 1); }
}

@keyframes backChoicePunyon {
    0% { transform: scale(1, 1); }
    18% { transform: scale(0.82, 1.18); }
    42% { transform: scale(1.14, 0.9); }
    72% { transform: scale(0.96, 1.04); }
    100% { transform: scale(1, 1); }
}

@keyframes backChoiceBattlePunyon {
    0% { transform: translateX(0) scale(1, 1); }
    16% { transform: translateX(-7px) scale(0.84, 1.18); }
    34% { transform: translateX(7px) scale(1.15, 0.88); }
    52% { transform: translateX(-5px) scale(0.95, 1.07); }
    74% { transform: translateX(4px) scale(1.04, 0.96); }
    100% { transform: translateX(0) scale(1, 1); }
}

.uwa-map-preview {
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 11000;
    overflow: hidden;
    box-sizing: border-box;
    transform: translate(-50%, -50%);
    border: 2px solid rgba(255, 255, 255, 0.94);
    background: #fff;
    pointer-events: none;
    animation: uwaMapPreviewIn 0.28s ease-out both;
}

.uwa-map-preview-interactive {
    pointer-events: auto;
    cursor: pointer;
    touch-action: manipulation;
}

.uwa-map-preview-image {
    display: block;
    width: 100%;
    height: 100%;
}

.uwa-map-preview-current {
    position: absolute;
    z-index: 1;
    object-fit: fill;
}

@keyframes uwaMapPreviewIn {
    from {
        opacity: 0;
        transform: translate(-50%, -44%);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

.hover-text .waza-detail-small {
    font-size: 0.8em;
}

@media (orientation: portrait) {
    .hole {
        width: 75%;
        padding-bottom: 82%;
    }

    .mtxt2 {
        top: 3%;
    }
}