/* ============================================== color */
/* hover
=================================================================== */
/* common
=================================================================== */
/* layout
=================================================================== */
/* imgCover
=================================================================== */
/* background
=================================================================== */
/* flex
=================================================================== */
/* animation delay
=================================================================== */
/* 3d
=================================================================== */
/* font
=================================================================== */
/* vw
=================================================================== */
/* form
=================================================================== */
/* ============================================================================================ hover */
/* ============================================== anime */
@keyframes fixedCheck-anime {
  0% {
    transform: translate3d(0, 0, 0); }
  10% {
    transform: translate3d(0, -10px, 0); }
  20% {
    transform: translate3d(0, 0, 0); }
  30% {
    transform: translate3d(0, -10px, 0); }
  40% {
    transform: translate3d(0, 0, 0); }
  100% {
    transform: translate3d(0, 0, 0); } }
/*========================================================================== 1060px */
@media only screen and (max-width: 1060px) {
  .fixedCheck--wrapper {
    width: calc(100% - 16px); } }
/*========================================================================== 1023px */
@media only screen and (max-width: 1023px) {
  .top .kv {
    margin-bottom: 130px;
    background-color: #c3e1f6; }
    .top .kv .kv__wrapper {
      top: 80px; }

  .topArticle__header .h2 .btnCircle {
    top: -7px; }

  .fixedCheck {
    width: 95px; }
    .fixedCheck .fixedCheck__frame .fixedCheck__title {
      width: 72px; }
    .fixedCheck .fixedCheck__frame .fixedCheck__message {
      font-size: 13px;
      padding: 26px 30px 20px; } }
/*========================================================================== 767px */
@media only screen and (max-width: 767px) {
  /* ========================================== vw */
  /* ============================================== common */
  /* ----------------------- topArticle */
  .topArticle {
    padding-top: 45px;
    padding-bottom: 50px; }
    .topArticle::after {
      height: 15px;
      top: -14px;
      z-index: 3; }

  .fixedCheck--wrapper {
    width: 100%; }

  .fixedCheck {
    width: 70px; }
    .fixedCheck .fixedCheck__frame .fixedCheck__title {
      width: 63px; }
    .fixedCheck .fixedCheck__frame .fixedCheck__message {
      font-size: 12px;
      padding: 19px 26px 17px;
      border-radius: 14px; }
      .fixedCheck .fixedCheck__frame .fixedCheck__message::after {
        width: calc(100% - 12px);
        height: calc(100% - 12px);
        border-width: 1px;
        border-radius: 10px; }

  /* ----------------------- kvNews */
  .kvNews {
    width: calc(100% - 110px);
    top: 16px;
    left: 12px;
    height: 28px;
    border-width: 1px;
    padding-right: 58px; }
    .kvNews .kvNews__list > li {
      height: 28px; }
      .kvNews .kvNews__list > li > p, .kvNews .kvNews__list > li > a {
        font-size: 10px;
        line-height: 26px; }
      .kvNews .kvNews__list > li > p {
        width: 75px; }
      .kvNews .kvNews__list > li > a {
        width: calc(100% - 75px); }
    .kvNews .btnAll {
      width: 45px;
      height: 20px;
      right: 4px; }
      .kvNews .btnAll > a {
        padding: 0 8px; }
        .kvNews .btnAll > a img {
          width: 17px; }

  /* ----------------------- kvTime */
  .kvTime {
    top: 9px;
    right: 15px;
    transform: scale(0.45);
    transform-origin: right center; }

  /* ----------------------- kv */
  .kv .kv__wrapper {
    width: 140%;
    left: -20%; }

  .top .kv {
    margin-bottom: 200px; }
    .top .kv::after {
      content: " ";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      height: 200px;
      top: auto;
      bottom: -195px;
      background-color: #feecd1;
      z-index: 0; }
    .top .kv .kv__wrapper {
      top: 100px;
      z-index: 1; }
    .top .kv.night::before {
      content: " ";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #407cbe;
      z-index: 0; }
    .top .kv.night:after {
      background-color: #bad2e6; }

  /* ============================================== top chara */
  .topArticle__chara {
    padding-top: 10px;
    z-index: 2; }
    .topArticle__chara::after {
      height: 63px;
      top: -60px;
      background-image: url(../img/jochum/contents/chara/bg--top--sp.png);
      background-repeat: repeat-x; }
    .topArticle__chara .topArticle__header .h2 {
      margin-bottom: 0; }
    .topArticle__chara .btnCircle__seeall {
      background-color: #85c9ae; }

  .topArticle__header .h2 .btnCircle {
    top: -5px;
    left: calc(100% + 15px); }

  /* ============================================== slider */
  /* ----------------------- slider parts */
  .sliderParts--wrapper {
    margin-top: 30px; }

  /* ----------------------- arrow */
  .sliderArrow {
    width: 35px;
    height: 35px;
    border-width: 2px; }
    .sliderArrow::after {
      width: 7px; }

  .sliderDots {
    display: flex; }
    .sliderDots > p {
      font-size: 12px; }
      .sliderDots > p:nth-child(2) {
        position: relative;
        padding-left: 1em;
        margin-left: 0.5em; }
        .sliderDots > p:nth-child(2)::before {
          content: "/";
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          -webkit-transform: translateY(-50%); }

  /* ============================================== top movie */
  .topArticle__movie .sliderParts--wrapper {
    margin-top: 12px; }

  /* ============================================== fukidashi day */
  .fukidashi > p {
    font-size: 8px;
    font-size: 2.1333333333vw;
    border-width: 2px;
    padding: 5px 8px; }
    .fukidashi > p::before {
      width: 14px;
      height: 11px;
      left: 13%;
      top: 114%; }
    .fukidashi > p::after {
      width: 8px;
      height: 8px;
      top: 95%; }

  @keyframes nanameSlideAnime-2 {
    0% {
      transform: translate3d(20px, -10px, 0); }
    100% {
      transform: translate3d(0, 0, 0); } }
  .kv .kv__wrapper .kv__wrapper--day .kv__main--house.active ul li:nth-child(1):nth-child(1) {
    -webkit-animation: nanameSlideAnime-2 1.6s ease-in-out infinite alternate;
    animation: nanameSlideAnime-2 1.6s ease-in-out infinite alternate; }

  @keyframes jumpAnime-2 {
    0% {
      transform: translate3d(0, 0, 0); }
    10% {
      transform: translate3d(0, -3px, 0); }
    20% {
      transform: translate3d(0, 0, 0); }
    30% {
      transform: translate3d(0, -3px, 0); }
    40% {
      transform: translate3d(0, 0, 0); }
    100% {
      transform: translate3d(0, 0, 0); } }
  .kv .kv__wrapper .kv__main--house .kv__main--chara li:nth-child(8) span span {
    top: 4px; }

  .kv .kv__wrapper .kv__wrapper--day .kv__main--house.active ul li:nth-child(8) span span {
    -webkit-animation: jumpAnime-2 1.8s ease-in-out infinite;
    animation: jumpAnime-2 1.8s ease-in-out infinite; }

  .kv .kv__wrapper .kv__main--house .kv__main--chara li:nth-child(9) span:nth-child(1) {
    top: 2px; }

  .kv .kv__wrapper .kv__wrapper--day .kv__main--house.active ul li:nth-child(9) span:nth-child(1) {
    -webkit-animation: jumpAnime-2 1.8s ease-in-out infinite;
    animation: jumpAnime-2 1.8s ease-in-out infinite;
    animation-delay: -1s;
    -webkit-animation-delay: -1s; }

  @-webkit-keyframes fuwafuwaAnime-2 {
    0% {
      -webkit-transform: translate3d(0, -15px, 0); }
    100% {
      -webkit-transform: translate3d(0, 0, 0); } }
  .kv .kv__wrapper .kv__wrapper--day .kv__main--house.active ul li:nth-child(5) {
    -webkit-animation: fuwafuwaAnime-2 1s ease-in-out infinite alternate;
    animation: fuwafuwaAnime-2 1s ease-in-out infinite alternate; }

  .kv .kv__wrapper .kv__wrapper--day .kv__main--house .kv__main--chara li:nth-child(1) {
    top: 86.243858%;
    left: 54.137931%;
    z-index: 4; }
  .kv .kv__wrapper .kv__wrapper--day .kv__main--house .kv__main--chara li:nth-child(2) {
    top: 74.974522%;
    left: 37.141762%;
    z-index: 2; }
  .kv .kv__wrapper .kv__wrapper--day .kv__main--house .kv__main--chara li:nth-child(3) {
    top: 81.421292%;
    left: 21.632184%;
    z-index: 3; }
  .kv .kv__wrapper .kv__wrapper--day .kv__main--house .kv__main--chara li:nth-child(4) {
    top: 0.648772%; }
  .kv .kv__wrapper .kv__wrapper--day .kv__main--house .kv__main--chara li:nth-child(5) {
    top: 50.765241%;
    left: 30.022989%; }
  .kv .kv__wrapper .kv__wrapper--day .kv__main--house .kv__main--chara li:nth-child(6) {
    top: 64.964513%;
    z-index: 2; }
  .kv .kv__wrapper .kv__wrapper--day .kv__main--house .kv__main--chara li:nth-child(7) {
    top: 40.039126%; }
  .kv .kv__wrapper .kv__wrapper--day .kv__main--house .kv__main--chara li:nth-child(8) {
    top: 25.939035%; }
  .kv .kv__wrapper .kv__wrapper--day .kv__main--house .kv__main--chara li:nth-child(9) {
    top: -3.7%; }
  .kv .kv__wrapper .kv__wrapper--day .kv__main--house .kv__main--chara li:nth-child(10) {
    top: 68.694268%;
    z-index: 1; }
  .kv .kv__wrapper .kv__wrapper--day .kv__main--house .kv__main--chara li:nth-child(11) {
    top: 30.759782%; }

  .kv .kv__wrapper .kv__wrapper--day .kv__wrapper--base ul li.bg--1 {
    transform: scale(0.5);
    transform-origin: center top;
    top: -15%; }

  .kv .kv__wrapper .kv__wrapper--day .kv__wrapper--base ul li.bg--3 div {
    width: 200px; }

  .kv .kv__wrapper .kv__wrapper--night .kv__wrapper--base ul li.bg--1 {
    width: 70%;
    top: -10%;
    left: 15%; }

  .kv .kv__wrapper .kv__wrapper--night .kv__main--house .kv__main--chara li:nth-child(1) {
    top: 34.216561%; }
  .kv .kv__wrapper .kv__wrapper--night .kv__main--house .kv__main--chara li:nth-child(2) {
    top: 31.305732%; }
  .kv .kv__wrapper .kv__wrapper--night .kv__main--house .kv__main--chara li:nth-child(3) {
    top: 31.578708%; }
  .kv .kv__wrapper .kv__wrapper--night .kv__main--house .kv__main--chara li:nth-child(4) {
    top: 33.489536%; }
  .kv .kv__wrapper .kv__wrapper--night .kv__main--house .kv__main--chara li:nth-child(6) {
    top: 45.496815%;
    left: 35.747126%; }
  .kv .kv__wrapper .kv__wrapper--night .kv__main--house .kv__main--chara li:nth-child(9) {
    top: 57.686988%; }
  .kv .kv__wrapper .kv__wrapper--night .kv__main--house .kv__main--chara li:nth-child(10) {
    top: 58.959964%; }
  .kv .kv__wrapper .kv__wrapper--night .kv__main--house .kv__main--chara li:nth-child(11) {
    top: 58.77798%;
    left: 69.923372%; }

  /* ======================================================================= hover sp */
  .top .sliderArrow:active {
    background-color: rgba(255, 255, 255, 0.2); }
    .top .sliderArrow:active.sliderArrow--prev::after {
      left: calc(50% - 4px); }
    .top .sliderArrow:active.sliderArrow--next::after {
      left: calc(50% + 4px); }

  .fixedCheck--wrapper.show .fixedCheck:active .fixedCheck--hover {
    animation: fixedCheck-anime 2.2s ease-in-out infinite;
    -webkit-animation: fixedCheck-anime 2.2s ease-in-out infinite; }

  /* ============================================================================================ 20240618 */
  .fixedCheck .fixedCheck__frame {
    width: 200px; } }