@charset "utf-8";

/* #rotateSect {margin-bottom: 0; background-color: #FFF;} */
  .rotateWrap {
    display: flex; flex-wrap: wrap;
    justify-content: center; align-items: center;
    gap: 0.75rem;
    width: calc(100% - 2rem); max-width: 64rem; margin: auto;
  }                
    .rotateWrap p {font-size: 1rem; font-weight: 400; white-space: pre-line;}

    ul.rotPrBoxes, ul.rotImgBoxes {width: 100%;}
      ul.rotPrBoxes li, ul.rotImgBoxes li {width: 100%;}
        

    ul.rotPrBoxes {z-index: 999;}
      ul.rotPrBoxes li {
        width: 100%;
        margin-bottom: 0.75rem; padding: 1.25rem;
        border-radius: 1rem 1rem 0;
        vertical-align: middle;
        background-color: #FFF; box-shadow: 0px 3px 6px #00000029;
        cursor: pointer;
      }
        ul.rotPrBoxes li.is-active {color: #FFF; background-color: #232D65;}
        ul.rotPrBoxes li.is-active > p {color: #FFF;}

        ul.rotPrBoxes li h3 {margin-bottom: 0.75rem;}
        ul.rotPrBoxes li p {padding-left: 2rem;}

    ul.rotImgBoxes {margin: 0;}
      ul.rotImgBoxes li {
        display: none;
        height: 15rem;
        padding: 1.25rem; border-radius: 0 2rem 0 0;
        background-color: var(--c-primaryBG);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 50%;
      }
      ul.rotImgBoxes li.is-active {display: block;}
        ul.rotImgBoxes li p {line-height: 1.35;}
        ul.rotImgBoxes li > img {width: 80%; margin-left: 20%;}

@media screen and (min-width: 768px) {
  .rotateWrap {flex-wrap: nowrap; gap: 0;}
    ul.rotPrBoxes {width: 24rem;}
        ul.rotPrBoxes li h3 {font-size: 1.25rem;}

    ul.rotImgBoxes {width: 80%; margin-left: -2.5rem;}
      ul.rotImgBoxes li {height: 24rem;}
        ul.rotImgBoxes li p {padding: 3.5rem; font-size: 1.125rem;}
}

@media screen and (min-width: 1024px) {
  ul.rotImgBoxes li p {padding: 5rem 3.5rem 0rem;}
}