/* =====================================================
 BASE
===================================================== */

.hhq-menu,
.hhq-menu *{
  box-sizing:border-box;
}

.hhq-menu{
  width:100%;
  max-width:760px;

  margin:16px auto;
  padding:0 10px;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Noto Sans JP",
    sans-serif;
}


/* =====================================================
 QUICK BUTTONS
===================================================== */

.hhq-grid{
  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:8px;
}


.hhq-btn{
  appearance:none;
  -webkit-appearance:none;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  min-height:52px;

  padding:7px 5px;

  border:
    1px solid rgba(212,175,55,.48);

  border-radius:9px;

  background:
    linear-gradient(
      180deg,
      #171717 0%,
      #080808 100%
    );

  color:#f3d978;

  cursor:pointer;

  text-decoration:none !important;
  text-align:center;

  box-shadow:
    0 5px 14px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.04);

  transition:
    transform .15s ease,
    border-color .15s ease,
    box-shadow .15s ease;

  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none;
  user-select:none;
  -webkit-user-select:none;
}


.hhq-btn:hover{
  transform:
    translateY(-1px);

  border-color:
    #e6c85e;

  box-shadow:
    0 7px 17px rgba(0,0,0,.34),
    0 0 10px rgba(212,175,55,.10);
}


.hhq-btn span{
  color:#e8c65c;

  font-size:11px;
  font-weight:900;

  letter-spacing:.12em;
}


.hhq-btn small{
  margin-top:2px;

  color:#f3eee2;

  font-size:10px;
  font-weight:700;
}


.hhq-btn-gold{
  background:
    linear-gradient(
      135deg,
      #f1d575,
      #c89b31 58%,
      #a97616
    );

  border-color:
    #efd16d;
}


.hhq-btn-gold span,
.hhq-btn-gold small{
  color:#111;
}


/* =====================================================
 MODAL
===================================================== */

.hhq-modal{
  position:fixed;
  inset:0;

  z-index:999999;

  display:none;

  align-items:center;
  justify-content:center;

  padding:16px;
}


.hhq-toggle{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  margin:0 !important;
  padding:0 !important;
  opacity:0 !important;
  pointer-events:none !important;
}

.hhq-toggle:checked + .hhq-modal{
  display:flex;
}


.hhq-overlay{
  position:absolute;
  inset:0;

  background:
    rgba(0,0,0,.84);

  backdrop-filter:
    blur(3px);

  -webkit-backdrop-filter:
    blur(3px);
}


.hhq-window{
  position:relative;

  z-index:2;

  width:
    min(580px,100%);

  max-height:
    86vh;

  overflow-y:auto;

  -webkit-overflow-scrolling:
    touch;

  border:
    1px solid rgba(218,175,55,.62);

  border-radius:
    18px;

  background:
    radial-gradient(
      circle at top right,
      rgba(255,215,110,.10),
      transparent 32%
    ),
    linear-gradient(
      180deg,
      #171717,
      #080808
    );

  box-shadow:
    0 24px 70px rgba(0,0,0,.75),
    inset 0 1px 0 rgba(255,255,255,.05);
}


/* =====================================================
 CLOSE
===================================================== */

.hhq-close{
  position:absolute;

  top:10px;
  right:10px;

  z-index:5;

  width:36px;
  height:36px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:
    1px solid rgba(212,175,55,.45);

  border-radius:
    50%;

  background:
    #0b0b0b;

  color:
    #f1d36e;

  font-size:
    23px;

  cursor:pointer;

  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}


/* =====================================================
 MODAL HEAD
===================================================== */

.hhq-modal-head{
  padding:
    21px 55px 15px 19px;

  border-bottom:
    1px solid rgba(212,175,55,.20);
}


.hhq-modal-head span{
  display:block;

  margin-bottom:3px;

  color:#bd962d;

  font-size:9px;
  font-weight:900;

  letter-spacing:.20em;
}


.hhq-modal-head h2{
  margin:0 !important;

  color:
    #f4dc83 !important;

  font-size:
    21px !important;

  font-weight:
    900 !important;

  line-height:
    1.4 !important;
}


.hhq-body{
  padding:
    18px 19px 21px;

  color:
    #eee8dc;
}


.hhq-body p{
  color:
    #eee8dc;

  font-size:
    14px;

  line-height:
    1.8;
}


.hhq-center{
  text-align:center;
}


.hhq-intro{
  margin-top:0;
}


/* =====================================================
 CAST
===================================================== */

.hhq-cast-grid{
  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:9px;

  margin-top:14px;
}


.hhq-cast{
  position:relative;

  overflow:hidden;

  text-align:center;

  border:
    1px solid rgba(212,175,55,.25);

  border-radius:
    11px;

  background:
    rgba(255,255,255,.025);
}


.hhq-cast-photo-wrap{
  position:relative;
}


.hhq-cast img{
  display:block;

  width:100%;

  aspect-ratio:
    3 / 4;

  object-fit:
    cover;

  object-position:
    center top;

  background:
    #111;
}


.hhq-cast strong{
  display:block;

  margin-top:7px;

  color:
    #f5dc7c;

  font-size:
    13px;

  font-weight:
    900;
}


.hhq-cast small{
  display:block;

  min-height:
    31px;

  padding:
    3px 4px 7px;

  color:
    #c9c0ad;

  font-size:
    9px;

  line-height:
    1.45;
}


/* =====================================================
 MEIRO BADGE
===================================================== */

.hhq-cast-meiro{
  border-color:
    rgba(242,207,99,.55);

  box-shadow:
    0 0 16px rgba(212,175,55,.10);
}


.hhq-cast-badge{
  position:absolute;

  top:6px;
  left:6px;

  z-index:3;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:23px;

  padding:
    4px 8px;

  border-radius:
    999px;

  background:
    linear-gradient(
      135deg,
      #f5da79,
      #c69228
    );

  color:
    #111;

  font-size:
    9px;

  font-weight:
    900;

  line-height:
    1;

  box-shadow:
    0 5px 12px rgba(0,0,0,.35);
}


/* =====================================================
 CAST WEB
===================================================== */

.hhq-full-web{
  display:flex;

  align-items:center;
  justify-content:center;

  min-height:
    50px;

  margin-top:
    15px;

  padding:
    11px 14px;

  border-radius:
    999px;

  background:
    linear-gradient(
      135deg,
      #f4d979,
      #c7962a
    );

  color:
    #111 !important;

  font-size:
    13px;

  font-weight:
    900;

  text-decoration:
    none !important;
}


/* =====================================================
 PRICE
===================================================== */

.hhq-price-row{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:14px;

  padding:
    13px 4px;

  border-bottom:
    1px solid rgba(212,175,55,.16);
}


.hhq-price-row strong{
  color:
    #e6c55f;

  font-size:
    14px;
}


.hhq-price-row b{
  flex:
    0 0 auto;

  color:
    #fff7dc;

  font-size:
    16px;

  font-weight:
    900;
}


.hhq-price-separator{
  height:8px;

  border-bottom:
    1px solid rgba(212,175,55,.32);
}


.hhq-caption{
  margin:
    14px 0 0 !important;

  color:
    #bfb7a7 !important;

  font-size:
    11px !important;
}


/* =====================================================
 SYSTEM
===================================================== */

.hhq-section-title{
  margin:
    0 0 11px;

  padding-bottom:
    8px;

  border-bottom:
    1px solid rgba(212,175,55,.20);
}


.hhq-section-title span{
  display:block;

  color:
    #b9912d;

  font-size:
    9px;

  font-weight:
    900;

  letter-spacing:
    .18em;
}


.hhq-section-title h3{
  margin:
    2px 0 0 !important;

  color:
    #f3d978 !important;

  font-size:
    17px !important;

  font-weight:
    900 !important;
}


.hhq-play-grid{
  display:grid;

  grid-template-columns:
    repeat(2,1fr);

  gap:
    7px;
}


.hhq-play-item{
  display:flex;

  flex-direction:column;

  align-items:center;
  justify-content:center;

  min-height:
    48px;

  padding:
    8px 5px;

  color:
    #eee7d8;

  font-size:
    12px;

  font-weight:
    800;

  line-height:
    1.45;

  text-align:
    center;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.035),
      rgba(212,175,55,.055)
    );

  border:
    1px solid rgba(212,175,55,.18);

  border-radius:
    10px;
}


.hhq-play-item small{
  display:block;

  margin-top:
    3px;

  color:
    #cbbd9b;

  font-size:
    9px;

  font-weight:
    600;
}


.hhq-option-title{
  margin-top:
    23px;
}


.hhq-option-note{
  margin:
    0 0 12px !important;

  color:
    #c8c0b0 !important;

  font-size:
    11px !important;

  line-height:
    1.7 !important;
}


.hhq-option-list{
  display:flex;

  flex-direction:column;

  gap:
    7px;
}


.hhq-option-item{
  padding:
    11px 12px;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.035),
      rgba(212,175,55,.045)
    );

  border:
    1px solid rgba(212,175,55,.18);

  border-radius:
    10px;
}


.hhq-option-head{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:
    12px;
}


.hhq-option-head strong{
  color:
    #f1d574;

  font-size:
    12px;

  font-weight:
    900;
}


.hhq-option-head b{
  flex:
    0 0 auto;

  color:
    #fff5d6;

  font-size:
    13px;
}


.hhq-option-item p{
  margin:
    4px 0 0 !important;

  color:
    #bfb7a7 !important;

  font-size:
    10px !important;

  line-height:
    1.6 !important;
}


.hhq-free{
  border-color:
    rgba(242,207,99,.34);
}


.hhq-free
.hhq-option-head b{
  color:
    #f3d978;
}


/* =====================================================
 CONTACT
===================================================== */

.hhq-contact{
  display:grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    10px;

  margin-top:
    16px;
}


.hhq-contact a{
  display:flex;

  align-items:center;
  justify-content:center;

  min-height:
    52px;

  border-radius:
    999px;

  font-size:
    13px;

  font-weight:
    900;

  text-decoration:
    none !important;
}


.hhq-web{
  color:
    #111 !important;

  background:
    linear-gradient(
      135deg,
      #f5dd7c,
      #c7952a
    );
}


.hhq-tel{
  color:
    #f3d776 !important;

  background:
    #111;

  border:
    1px solid rgba(212,175,55,.55);
}


.hhq-legacy-line{
  margin:
    12px 0 0 !important;

  color:
    #afa58f !important;

  font-size:
    10px !important;

  line-height:
    1.7 !important;

  text-align:
    center;
}

.hhq-legacy-line a{
  color:
    #d9bd63 !important;

  text-decoration:
    underline !important;

  text-underline-offset:
    2px;
}


/* =====================================================
 MOBILE
===================================================== */

@media(max-width:600px){

  .hhq-menu{
    margin:
      13px auto;

    padding:
      0 7px;
  }


  .hhq-grid{
    grid-template-columns:
      repeat(2,1fr);

    gap:
      7px;
  }


  .hhq-btn{
    min-height:
      49px;
  }


  .hhq-modal{
    padding:
      10px;
  }


  .hhq-window{
    max-height:
      89vh;

    border-radius:
      15px;
  }


  .hhq-modal-head{
    padding:
      18px 50px 13px 15px;
  }


  .hhq-modal-head h2{
    font-size:
      19px !important;
  }


  .hhq-body{
    padding:
      15px 14px 18px;
  }


  .hhq-cast-grid{
    grid-template-columns:
      repeat(3,1fr);

    gap:
      6px;
  }


  .hhq-cast strong{
    font-size:
      11px;
  }


  .hhq-cast small{
    font-size:
      8px;
  }


  .hhq-cast-badge{
    top:
      4px;

    left:
      4px;

    padding:
      4px 6px;

    font-size:
      8px;
  }


  .hhq-play-item{
    font-size:
      11px;
  }


  .hhq-contact{
    grid-template-columns:
      1fr;
  }

}

/* v1.0.4: modal body lock */
body.hhq-modal-open{overflow:hidden!important;}



/* =====================================================
   v1.0.5 iPhone / Safari CSS-only modal safety
===================================================== */
.hhq-btn,
.hhq-close,
.hhq-overlay{
  -webkit-tap-highlight-color:transparent;
}

.hhq-btn,
.hhq-close{
  cursor:pointer;
}

.hhq-close{
  text-decoration:none !important;
  user-select:none;
  -webkit-user-select:none;
}

.hhq-overlay{
  display:block;
  cursor:pointer;
}