@charset "utf-8";

.rockday-wrapper {
    font-size:16px;
    line-height:1.7;
    background: #3d145a;
    position: relative;
}

.rockday-wrapper img {
    height:auto;
    max-width:100%;
    object-fit: contain;
    vertical-align: bottom;
}

.rockday-top {
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
}

.rockday-top h2 {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
}

#rockday-level {
    max-width: 770px;
    margin: 45px auto 0;
}

#rockday-level ul {
    display:flex;
    gap: 3%;
    padding: 0;
}

#rockday-level li {
    flex: 1;
}

#rockday-level li:nth-child(2) {
    margin-top:2em;
}

#rockday-level li > div:last-child a {
    display: flex;
    border-radius:9px;
    font-weight:bold;
    justify-content:center;
    align-items:center;
    height: 56px;
}

#rockday-level li > div:first-child a {
    font-size: 22px;
    transition:.3s;
}

#rockday-level li > div:first-child a:hover {
    filter:brightness(.8);
}

#rockday-level li > div:last-child:last-child a {
    background: #000000;
    margin-top:.5em;
    color: #ffffff;
    transition:.1s;
}

#rockday-level li > div:last-child a:hover {
    cursor:pointer;
    text-decoration:none;
    background: #160033;
}

div#rock-popup {
    position:relative;
}

div#rock-popup div {
    position: absolute;
    z-index: 3;
    top: 0px;
    padding: 30px 40px 30px 20px;
    left: 0;
    right:  0;
    background:  white;
    width: 760px;
    box-sizing: border-box;
    margin:  auto;
    display: none;
}

div#rock-popup div li {
    overflow:hidden;
    text-align:left;
    font-size:16px;
    margin-bottom:20px;
    border-bottom: 2px dashed #cacaca;
    padding-bottom: 20px;
    padding-left: 25px;
}

div#rock-popup div li:last-child {
    border:none;
    padding-bottom:0;
}

div#rock-popup div li:last-child:before {
    content:"+";
    font-weight:bold;
    text-align:center;
    display:block;
    font-size: 30px;
    margin: -4px auto 13px;
    color: #ff6a00;
}

div#rock-popup div li img {
    width: 137px;
    float:left;
    max-height: 100px;
}

div#rock-popup div li p {
    margin-left: 174px;
    word-break: auto-phrase;
}

div#rock-popup div li p.rock-name {
    font-weight:bold;
    margin-bottom:10px;
}

#rock-popup p.rock-close {
    width:60%;
    background: #0e0e0e;
    color: white;
    padding: 5px;
    border-radius: 10px;
    margin: 40px auto 12px;
    clear: both;
    text-align:  center;
    font-size: 20px;
}

#rock-popup p.rock-close:hover {
    cursor:pointer;
    opacity:.8;
}

#rock-shade {
    position: absolute;
    top:0;
    left:0;
    background: black;
    width: 100%;
    height: 100%;
    z-index: 2;
    opacity: .4;
    display: none;
}

div.rockday-main {
    position: relative;
    padding-top: 62%;
}

.rockday-lead-wrapper {
    padding-bottom: 70px;
}

div#rock-lead {
    color: white;
    font-size: 20px;
    text-align: center;
    line-height: 1.8;
    font-family: "Kaisei Opti", serif;
    font-style: normal;
    padding-bottom: 30px;
    text-shadow: 0 0 4px black;
}

div#rock-lead p:first-child {
    margin-top: 20px;
}

div#rock-lead p + p {
    margin-top:1em;
}

div#rock-lead p.rock-term {
    color:#ffed00;
}

div#rock-ganen {
    text-align: center;
    margin-top: 25px;
    padding: 0 20px;
}

.quiz-num {
    text-align:center;
    font-weight:bold;
    font-size: 23px;
    padding: 3px 0px;
    right: 12px;
    left: 35px;
    margin: auto;
    height: 32px;
    letter-spacing: 3px;
}

.dungeon {
    height: 820px;
    position:relative;
    overflow: hidden;
    box-sizing: border-box;
    transition: all .5s;
}

#dungeon-wrapper1 .dungeon {
    background: url(../img/bg_easy.jpg) center top / 1120px  no-repeat;
}

#dungeon-wrapper2 .dungeon {
    background: url(../img/bg_normal.jpg) center top / 1120px  no-repeat;
}

#dungeon-wrapper3 .dungeon {
    background: url(../img/bg_hard.jpg) center top / 1120px  no-repeat;
}

.dungeon:has( .q-dog.dog-show):before {
    content:"";
    display:block;
    background: #00000063;
    width:100%;
    height:100%;
    position: absolute;
}

.q-dog > div > div {
    background: url(../img/deco_left_top.png) left top / 10% no-repeat, url(../img/deco_right_top.png) right top / 10% no-repeat, url(../img/deco_left_bottom.png) left bottom / 10% no-repeat, url(../img/deco_right_bottom.png) right bottom / 10% no-repeat white;
    padding: 30px;
    border:1px solid #453907;
    box-sizing:border-box;
    width: 100%;
}

.q-dog > div > div p {
    font-family: "Kaisei Opti", serif;
    font-size: 16px;
    display: flex;
    justify-content: center;
}

@media (min-width: 601px){
    .q-dog > div > div p {
      text-align: center;
        font-size: 18px;
    }
}

.smm-quiz {
    max-width: 819px;
    margin: auto;
    width: 100%;
    height: 280px;
    /* bottom: -3px; */
    left: 0;
    right: 0;
    box-sizing: border-box;
    padding: 25px 40px 25px 40px;
    position: absolute;
    font-family: "Kaisei Opti", serif;
    font-size: 20px;
    flex-direction: column;
    color: white;
    position: relative;
    z-index: 1;
}

#dungeon-wrapper1 .smm-quiz {
    background: url(../img/deco_left_top.png) left top / 10% no-repeat, url(../img/deco_right_top.png) right top / 10% no-repeat, url(../img/deco_left_bottom.png) left bottom / 10% no-repeat, url(../img/deco_right_bottom.png) right bottom / 10% no-repeat, url(../img/bg_question1.png?260527) center / 100% 100% no-repeat;
}

#dungeon-wrapper2 .smm-quiz {
    background: url(../img/deco_left_top.png) left top / 10% no-repeat, url(../img/deco_right_top.png) right top / 10% no-repeat, url(../img/deco_left_bottom.png) left bottom / 10% no-repeat, url(../img/deco_right_bottom.png) right bottom / 10% no-repeat, url(../img/bg_question2.png?260527) center / 100% 100% no-repeat;
}

#dungeon-wrapper3 .smm-quiz {
    background: url(../img/deco_left_top.png) left top / 10% no-repeat, url(../img/deco_right_top.png) right top / 10% no-repeat, url(../img/deco_left_bottom.png) left bottom / 10% no-repeat, url(../img/deco_right_bottom.png) right bottom / 10% no-repeat, url(../img/bg_question3.png?260527) center / 100% 100% no-repeat;
}

.smm-quiz > div {
    display:flex;
    flex-direction:column;
    justify-content: space-evenly;
    align-items:center;
    height: calc(100% - 45px );
}

p.rock-q-content {
    font-size: 20px;
    line-height: 1.6;
}

ul.rock-choice.rock-chice-text {
    margin: 0px auto 0;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    padding-left: 80px;
}

ul.rock-choice.rock-chice-text.rock-adjust1 {
    padding-left:0;
}

ul.rock-choice.rock-chice-text.rock-adjust2 {
    padding-left:120px;
}

ul.rock-choice.rock-chice-text li {
    width: calc(50% - 42px );
    font-size: 20px;
    margin-left: 34px;
    line-height: 1.2;
}

ul.rock-choice.rock-chice-text li:before {
    margin-right: 8px;
    font-weight:bold;
    height:20px;
    color:#e30b29;
    margin-left: -33px;
}

ul.rock-choice.rock-chice-text li:nth-child(1):before {
    content:"♠";

}
ul.rock-choice.rock-chice-text li:nth-child(2):before {
    content:"♥";
}

ul.rock-choice.rock-chice-text li:nth-child(3):before {
    content:"♣";
}

ul.rock-choice.rock-chice-text li:nth-child(4):before {
    content:"◆";
}

@media (min-width: 601px){
    ul.rock-choice.rock-chice-text li span:hover {
        opacity:.7;
        cursor:pointer;
    }
}

ul.rock-choice.rock-choice-door {
    display:flex;
    margin: 189px auto 5px;
    width: 100%;
    max-width: 940px;
    justify-content: space-between;
    align-items: center;
    padding-right: 2%;
    height: 312px;
    box-sizing: border-box;
}

ul.rock-choice.rock-choice-door li {
    display:flex;
    justify-content:center;
    align-content:center;
}

ul.rock-choice.rock-choice-door li:nth-child(1) {
        transform: translate(14.5%, .4%) scale(1.025);
}

ul.rock-choice.rock-choice-door li:nth-child(2) {
        transform: translate(7.6%,  0.41%) scale(1.03);
}

ul.rock-choice.rock-choice-door li:nth-child(3) {
        transform: translate(-1.1%, 1.26%) scale(1.032);
}

ul.rock-choice.rock-choice-door li:nth-child(4) {
        transform: translate(-5%,  0.63%) scale(1.029);
}

ul.rock-choice.rock-choice-door li span {transition: all .2s;}

ul.rock-choice.rock-choice-door li span:hover {
     cursor:pointer;
    transform:scale(1.1);
}

.smm-quiz div.dungeon-start {
    width:100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: auto;
    height: 100%;
    position: relative;
}

.smm-quiz div.dungeon-start p:first-child {
    font-size:24px;
}

.smm-quiz div.dungeon-start p.dungeon-start-btn {
    text-align: center;
    margin: 20px auto 0px;
    width: 310px;
    font-size: 32px;
    font-weight: bold;
    border-radius: 20px;
}

.smm-quiz div.dungeon-start p.dungeon-start-btn:hover {
    cursor:pointer;
    filter: brightness(1.4);
}

.q-out {
    text-align:center;
    background: url(../img/quiz_fuseikai.jpg) center top / 100%  no-repeat;
    position: absolute;
    width: 640px;
    height: 460px;
    top: 298px;
    margin: -810px auto 0;
    left: 0;
    right: 0;
    transition: .2s;
    z-index: 2;
}

.poyon {
  animation: poyon 1.1s linear 0s 1;
}

@keyframes poyon {
  0%   { transform: scale(0.8, 1.4) translate(0%, -100%); }
  10%  { transform: scale(0.8, 1.4) translate(0%, -15%); }
  20%  { transform: scale(1.4, 0.6) translate(0%, 30%); }
  30%  { transform: scale(0.9, 1.1) translate(0%, -10%); }
  40%  { transform: scale(0.95, 1.2) translate(0%, -30%); }
  50%  { transform: scale(0.95, 1.2) translate(0%, -10%); }
  60%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
  70%  { transform: scale(1.0, 1.0) translate(0%, 0%); }
  100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}

.q-out a {
    display: flex;
    width: 358px;
    margin: 322px auto 0;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    border-radius: 10px;
    aspect-ratio: 358/90;
}

.q-out a:hover {
    filter:brightness(1.2);
}

.q-out.q-out-down {
    margin: 0 auto;
    display: block;
  animation: poyon 1.1s linear 0s 1;
}

.q-dog {
    max-width: 880px;
    height: 650px;
    position: absolute;
    z-index: 1;
    bottom: 80px;
    left: 0;
    right: 0;
    display: none;
    margin: auto;
    box-sizing: border-box;
    filter: drop-shadow(0px 0px 6px black);
}

.q-dog.dog-show {
    display:block;
}

#dungeon-wrapper1 .q-dog {
       background: #4c7570 url(../img/quiz_seikai_easy.jpg?zz) center /cover no-repeat;
}

#dungeon-wrapper2 .q-dog {
    background: #b57380 url(../img/quiz_seikai_normal.jpg?zz) center /100% 100% no-repeat;
}

#dungeon-wrapper3 .q-dog {
    background: #7391ad url(../img/quiz_seikai_hard.jpg??zz) center /100% 100% no-repeat;
}

.q-dog.q-dog-after {
    background: url(../img/bg_correct_after.jpg??zz) center /100% no-repeat;
}

.q-dog > div {
    padding: 290px 65px 40px;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 750px;
    margin: auto;
}

.cmm-form {
    margin-top: 15px;
}

.cmm-form form {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* height: 100%; */
    flex-direction: column;
    gap: 21px;
}

.cmm-form p:first-child {
    text-align: center;
    font-size: 23px;
    margin: 15px 0 0px;
}

.cmm-present-choice {
    overflow: hidden;
}

.cmm-present-choice label {
    display:block;
    position: relative;
    line-height: 1.5;
    padding: 8px 0 8px 81px;
    font-size: 16px;
    text-shadow: 2px 2px 1px white, 2px -2px 1px white, -2px 2px 1px white, -2px -2px 1px white;
    /* font-weight: bold; */
    margin-left: -4px;
}

#dungeon-wrapper1 .cmm-present-choice label:nth-child(1) {
    background: url(../img/lady_stand.jpg) center left 47px / 10px no-repeat;
}

#dungeon-wrapper1 .cmm-present-choice label:nth-child(2) {
    background: url(../img/playtech_lady_pickset.jpg) center left 33px / 37px no-repeat;
}

#dungeon-wrapper1 .cmm-present-choice label:nth-child(3) {
    background: url(../img/cp_cph3000red.jpg) center left 39px / 30px no-repeat;
}

#dungeon-wrapper2 .cmm-present-choice label:nth-child(1) {
    background: url(../img/cp_cph7000bt.jpg) center left 31px / 34px no-repeat;
}

#dungeon-wrapper2 .cmm-present-choice label:nth-child(2) {
    background: url(../img/playtech_lsbk31.jpg) top 6px left 26px / 42px no-repeat;
}

#dungeon-wrapper2 .cmm-present-choice label:nth-child(3) {
    background: url(../img/pt_psp18ch6.jpg) center left 29px / 42px no-repeat;
}

#dungeon-wrapper3 .cmm-present-choice label:nth-child(1) {
    background: url(../img/playtech_st500msgxxa.jpg) center left 28px / 45px no-repeat;
}

#dungeon-wrapper3 .cmm-present-choice label:nth-child(2) {
    background: url(../img/eh_bigmuffpi2.jpg) center left 40px / 22px no-repeat;
}

#dungeon-wrapper3 .cmm-present-choice label:nth-child(3) {
    background: url(../img/jbl_305pmkii.jpg) center left 32px / 38px no-repeat;
}

.cmm-present-choice label input {
    position:absolute;
    top:0;
    bottom: 0;
    left: 8px;
    margin:auto;
}

.cmm-form input[type="image"] {
    display:block;
    width: 320px;
    margin: 0 auto;
}

.dungeon-prev-wall {
    width: 100%;
    height: 530px;
    position: absolute;
    top: 0;
    z-index: 1;
    /* background:red; */
}

@media (max-width: 600px){
    
    div.rockday-main {
        padding-top: 109%;
    }
    
    div#rock-lead {
        font-size: 4.8vw;
        padding-bottom: 10px;
    }
    
    div#rock-lead p span {
        display:block;
    }

    #rockday-level ul {
    margin: 10px;
    }
    
    #rockday-level li > div:last-child a {
    font-size: 13px;
    }
    
    .rockday-lead-wrapper {
    padding-bottom: 4%;
    }
    
    #rockday-level {
    margin-top: 5%;
    }


    #dungeon-wrapper1 .dungeon {
        background: #114531 url(../img/bg_easy_sp.jpg?z) center top / 100% no-repeat;
    }
    
    #dungeon-wrapper2 .dungeon {
        background: #570b0f url(../img/bg_normal_sp.jpg) center top / 100% no-repeat;
    }
    
    #dungeon-wrapper3 .dungeon {
        background: #2767af url(../img/bg_hard_sp.jpg) center top / 100%  no-repeat;
    }    
    
    ul.rock-choice.rock-choice-door {
        margin-top: 26%;
        height: auto;
        /* margin-bottom: 0; */
    }
    
    .smm-quiz {
        bottom: auto;
        margin-top: 4%;
    }
    
    .dungeon {
        height: auto;
        min-height: 360px;
    }
    
    .smm-quiz {
        /* position: relative; */
        margin: 15px;
        width: auto;
        height: auto;
    }
    
    .smm-quiz {
        padding: 25px 25px 40px;
        margin: 10px 15px 15px;
    }
    
    .smm-quiz div.dungeon-start {
        left: 0;
        bottom: 0;
        height: auto;
    }
    
    .smm-quiz div.dungeon-start p:first-child {
        font-size: 20px;
    }
    
    .smm-quiz div.dungeon-start p.dungeon-start-btn {
        width: 270px;
    }
    
    p.rock-q-content {
        font-size: 16px;
        margin: 1em 0px;
    }
    
    ul.rock-choice.rock-chice-text {
        padding-left: 0;
        flex-direction: column;
        gap: 15px;
        flex-direction: column;
        position: relative;
        left: -5%;
        overflow: initial;
    }
    
    ul.rock-choice.rock-chice-text li {
        width: auto;
        font-size: 16px;
        margin-left: 34px;
        line-height: 1.2;
    }
    
    .smm-quiz > div {
        height: auto;
    }
    
    .q-out {
        width: 90%;
        top: 19%;
        max-width: 360px;
    }
    
    .q-out a {
        margin-top: 47%;
        width: 87%;
    }

    div#rock-popup div {
      position: fixed;
      top: 10px;
      padding: 15px;
      width:  94%;
      overflow-y:  scroll;
      height: 94%;
    }
    
    div#rock-popup div li {
      font-size: 14px;
      margin-bottom: 14px;
      padding-bottom: 10px;
      padding-left: 0;
    }
    
    div#rock-popup div li:last-child {
      border:none;
      padding-bottom:0;
    }
    
    div#rock-popup div li:last-child:before {
        content:"+";
        font-weight:bold;
        text-align:center;
        display:block;
        font-size: 23px !important;
        margin: -4px auto 13px;
        color: #ff6a00;
    }
    
    div#rock-popup div li img {
      width: 81px;
      max-height: 73px;
    }
    
    div#rock-popup div li a {
      color:purple;
      text-decoration:underline;
      display: inline;
    }
    
    div#rock-popup div li p {
      line-height: 1.4;
      margin-left: 90px;
      word-break: break-all;
    }
    
    div#rock-popup div li p.rock-name {
      font-weight:bold;
      margin-bottom:10px;
      margin-left: 90px;
    }
    
    #rock-popup p.rock-close {
        background: #000000;
        margin: 30px auto 12px;
        font-size: 16px;
    }

    .q-dog {
        z-index: 2;
        left: 0;
        right: 0;
        display: none;
        margin: -38vw 15px 15px;
        box-sizing: border-box;
        position: relative;
    }
    
    
    .q-dog > div {
        padding: 31% 15px 20px 15px;
        box-sizing: border-box;
        display: flex;
        height: auto;
    }
    
    .q-dog > div > div {
        padding: 19px;
        font-size: 14px;
    }
    
    .cmm-form input[type="image"] {
        display:block;
        width: 230px;
        margin: 5px auto;
    }
    
    *:is(#dungeon-wrapper1, #dungeon-wrapper2, #dungeon-wrapper3) .q-dog {
        background-size: contain;
        background-position: top;
        margin: calc( -21vw + -16px) 0 calc( 5vw - 58px);
        height: auto;
    }
    
    .cmm-form form {
        height: auto;
    }
    
    .cmm-present-choice label {
        font-size: 14px;
    }
    
}