/* ----------------------------------------------------------------------------------------

OpenCommunity / Top
Mv

------------------------------------------------------------------------------------------- */
/* #oc .p-bg-top {
  background: #f8f8f8 url('/image/jp/feature/community/bg_p_top-pc.png') no-repeat top center / cover;
}

@media screen and (max-width: 767px) {
  #oc .p-bg-top {
    background-image: url('/image/jp/feature/community/bg_p_top-sp.png');
  }
} */

/* Section / top
  =========================================================================================== */
@media screen and (min-width: 768px) {
  #oc .p-topMv {
    position: relative;
    z-index: 1;
    padding: min(calc(50 / 1300 * 100%), 50px) 0 min(calc(50 / 1300 * 100%), 50px) 0;
  }

  #oc .p-topMv_inner {
    width: min(100%, 1300px);
    aspect-ratio: 1300/944;
    margin: 0 auto;
    position: relative;
  }

  #oc .p-topMv_container-text {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 0;
    translate: 0 -50%;
  }

  #oc .p-topMv_title {
    width: calc(440 / 1300 * 100%);
    margin: 0 auto;
  }

  #oc .p-topMv_text-1 {
    font-weight: bold;
    font-size: min(calc(16 / 1300 * 100vw), 16px);
    line-height: 1.625;
    text-align: center;
    margin: calc(30 / 1300 * 100%) 0 0 0;
  }

  #oc .p-topMvItem_orbit {
    --radius: min(calc(370 / 1300 * 100vw), 370px);
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    width: min(calc(740 / 1300 * 100vw), 740px);
    aspect-ratio: 1/1;
  }

  #oc .p-topMvItem_wrapper {
    position: relative;
    width: 100%;
    height: 100%;
  }

  #oc .p-topMvItem_wrapper > li {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    rotate: 0deg;
  }

  #oc .p-topMvItem_wrapper > li:has([data-mvitem='pickup']) {
    width: min(calc(275 / 1300 * 100vw), 275px);
  }

  #oc .p-topMvItem_wrapper > li:has([data-mvitem='event']) {
    width: min(calc(220 / 1300 * 100vw), 220px);
  }

  #oc .p-topMvItem_wrapper > li:has([data-mvitem='theme']) {
    width: min(calc(258 / 1300 * 100vw), 258px);
  }

  #oc .p-topMvItem_wrapper > li:has([data-mvitem='activityreport']) {
    width: min(calc(220 / 1300 * 100vw), 220px);
  }

  #oc .p-topMvItem_wrapper > li:has([data-mvitem='features']) {
    width: min(calc(275 / 1300 * 100vw), 275px);
  }

  #oc .p-topMvItem_wrapper > li:has([data-mvitem='joinus']) {
    width: min(calc(275 / 1300 * 100vw), 275px);
  }

  #oc .p-topMvItem_wrapper > li:has([data-mvitem='ourstory']) {
    width: min(calc(220 / 1300 * 100vw), 220px);
  }

  #oc .p-topMvItem {
    display: block;
    aspect-ratio: 1/1;
    position: relative;
  }

  #oc .p-topMvItem_arrow {
    content: '';
    display: block;
    width: min(calc(5 / 1300 * 100vw), 5px);
    aspect-ratio: 5/48;
    position: absolute;
    bottom: max(-32px, calc(-32 / 1300 * 100vw));
    left: 50%;
    transform: translate(-50%, 0);
  }

  #oc .p-topMvItem_arrow > span {
    display: block;
    width: 100%;
    height: 100%;
    background: url('/image/jp/feature/community/arrow_anchoritem_01.png') no-repeat bottom center / 100% 100%;
    position: relative;
    animation: arrowmove 1s ease-in-out infinite;
  }

  #oc .p-topMvItem_link {
    display: block;
    width: 100%;
    background: rgba(255, 255, 255, 0.25);
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.08);
    border-radius: 50%;
    aspect-ratio: 1/1;
    overflow: hidden;
  }

  #oc .p-topMvItem_img {
    position: absolute;
    pointer-events: none;
    width: calc(332 / 375 * 100%);
    top: calc(20 / 375 * 100%);
    left: calc(15 / 375 * 100%);
  }

  #oc [data-mvitem='pickup'] .p-topMvItem_img {
    width: calc(244 / 275 * 100%);
    top: calc(13 / 275 * 100%);
    left: calc(13 / 275 * 100%);
  }

  #oc [data-mvitem='event'] .p-topMvItem_img {
    width: calc(168 / 220 * 100%);
    top: calc(10 / 220 * 100%);
    left: calc(28 / 220 * 100%);
  }

  #oc [data-mvitem='theme'] .p-topMvItem_img {
    width: calc(212 / 258 * 100%);
    top: calc(20 / 258 * 100%);
    left: calc(37 / 258 * 100%);
  }

  #oc [data-mvitem='activityreport'] .p-topMvItem_img {
    width: calc(163 / 220 * 100%);
    top: calc(10 / 220 * 100%);
    left: calc(25 / 220 * 100%);
  }

  #oc [data-mvitem='features'] .p-topMvItem_img {
    width: calc(223 / 275 * 100%);
    top: calc(8 / 275 * 100%);
    left: calc(28 / 275 * 100%);
  }

  #oc [data-mvitem='joinus'] .p-topMvItem_img {
    width: calc(264 / 275 * 100%);
    top: calc(23 / 275 * 100%);
    left: calc(7 / 275 * 100%);
  }

  #oc [data-mvitem='ourstory'] .p-topMvItem_img {
    width: calc(173 / 220 * 100%);
    top: calc(15 / 220 * 100%);
    left: calc(24 / 220 * 100%);
  }

  #oc .p-topMvItem_text {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: min(calc(36 / 1300 * 100vw), 36px);
    position: absolute;
    left: 0;
    bottom: min(calc(28 / 1300 * 100vw), 28px);
  }

  #oc .p-topMvItem_text img {
    height: 100%;
    width: auto;
  }
}

@media screen and (max-width: 767px) {
  #oc .p-topMv {
    position: relative;
    z-index: 1;
    padding: calc(75 / 750 * 100%) 0 calc(92 / 750 * 100%) 0;
  }

  #oc .p-topMv_inner {
    position: relative;
  }

  #oc .p-topMv_title {
    width: calc(474 / 750 * 100%);
    margin: 0 auto;
  }

  #oc .p-topMv_text-1 {
    font-size: calc(28 / 750 * 100vw);
    line-height: 1.78;
    text-align: center;
    font-weight: bold;
    margin: calc(72 / 750 * 100%) 0 calc(72 / 750 * 100%) 0;
  }

  #oc .p-topMvItem_wrapper {
    width: 100%;
    position: relative;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    gap: calc(100 / 750 * 100vw) 0;
  }

  #oc .p-topMvItem_wrapper > li {
    width: calc(375 / 750 * 100%);
    position: relative !important;
    transform: none !important;
    left: auto;
    right: auto;
  }

  #oc .p-topMvItem_wrapper > li:nth-child(2) {
    margin-top: calc(190 / 750 * 100vw);
  }

  #oc .p-topMvItem_wrapper > li:nth-child(odd):not(:first-child) {
    margin-top: calc(-190 / 750 * 100vw);
  }

  #oc .p-topMvItem_wrapper > li:nth-child(odd) {
    margin-left: calc(-20 / 750 * 100vw);
  }

  #oc .p-topMvItem_wrapper > li:nth-child(even) {
    margin-right: calc(-20 / 750 * 100vw);
  }

  #oc .p-topMvItem {
    display: block;
    aspect-ratio: 1/1;
    position: relative;
  }

  #oc .p-topMvItem_arrow {
    content: '';
    display: block;
    width: calc(6 / 750 * 100vw);
    height: calc(62 / 750 * 100vw);
    position: absolute;
    bottom: calc(-25 / 750 * 100vw);
    left: 50%;
    transform: translate(-50%, 0);
  }

  #oc .p-topMvItem_arrow > span {
    display: block;
    width: 100%;
    height: 100%;
    background: url('/image/jp/feature/community/arrow_anchoritem_01.png') no-repeat bottom center / contain;
    position: relative;
    animation: arrowmove 1s ease-in-out infinite;
  }

  #oc .p-topMvItem_link {
    display: block;
    width: 100%;
    background: rgba(255, 255, 255, 0.25);
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.08);
    border-radius: 50%;
    aspect-ratio: 1/1;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
  }

  #oc .p-topMvItem_img {
    position: absolute;
    pointer-events: none;
  }

  #oc [data-mvitem='pickup'] .p-topMvItem_img {
    width: calc(308 / 375 * 100%);
    top: calc(23 / 375 * 100%);
    left: calc(22 / 375 * 100%);
  }

  #oc [data-mvitem='event'] .p-topMvItem_img {
    width: calc(287 / 375 * 100%);
    top: calc(33 / 375 * 100%);
    left: calc(44 / 375 * 100%);
  }

  #oc [data-mvitem='theme'] .p-topMvItem_img {
    width: calc(287 / 375 * 100%);
    top: calc(33 / 375 * 100%);
    left: calc(44 / 375 * 100%);
  }

  #oc [data-mvitem='activityreport'] .p-topMvItem_img {
    width: calc(274 / 375 * 100%);
    top: calc(30 / 375 * 100%);
    left: calc(44 / 375 * 100%);
  }

  #oc [data-mvitem='features'] .p-topMvItem_img {
    width: calc(303 / 375 * 100%);
    top: calc(-11 / 375 * 100%);
    left: calc(36 / 375 * 100%);
  }

  #oc [data-mvitem='joinus'] .p-topMvItem_img {
    width: calc(348 / 375 * 100%);
    top: calc(23 / 375 * 100%);
    left: calc(14 / 375 * 100%);
  }

  #oc [data-mvitem='ourstory'] .p-topMvItem_img {
    width: calc(295 / 375 * 100%);
    top: calc(38 / 375 * 100%);
    left: calc(40 / 375 * 100%);
  }

  #oc .p-topMvItem_text {
    display: flex;
    justify-content: center;
    height: calc(54 / 750 * 100vw);
    width: 100%;
    position: absolute;
    left: 0;
    bottom: calc(40 / 750 * 100vw);
  }

  #oc .p-topMvItem_text img {
    height: 100%;
    width: auto;
  }
}

@keyframes arrowmove {
  0% {
    top: 1%;
  }
  50% {
    top: 30%;
  }
  100% {
    top: 1%;
  }
}

@media (any-hover: hover) {
  #oc .p-topMvItem {
    transition: all 500ms;
  }

  #oc .p-topMvItem:hover {
    scale: 1.2;
  }
}