@charset "utf-8";
/* CSS Document */
@media screen and (max-width: 1280px) {

  header .header_inner_block {
    width: min(1024px, 100%);
  }

  header.fixed {
    margin-left: 128px;
  }

  .header_inner_block .logo {
    margin-left: 0;
  }
  .menu-open header.fixed {
    width: 100%;
    margin-left: 0;
  }

  .hamburger {
    display: block;
  }

  .menu-open header .header_inner_block,
  .menu-open header.fixed .header_inner_block {
    width: 100%;
    padding: 0 var(--size-16);
  }

  .contents_wrapper {
    width: min(1024px, 100%);
    margin: 0 auto;
  }

  .global_nav_block {
    width: 0;
    height: 0;
    border: none;
    overflow: hidden;
    padding: 0;
    margin: 0;
    background: none;
  }

  .global_nav_block::before {
    display: none;
  }

  .global_nav_block ul {
    display: none;
  }

  .page-top {
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    margin: 0;
    position: fixed;
    right: var(--size-16);
    bottom: 148px;
  }

  .page-top-btn {
    width: var(--size-48);
    height: var(--size-48);
    background: rgba(255, 255, 255, .9);
    margin-top: 0;
    border-radius: 50%;
  }

  .global_nav_block .pc_nav_toggle_wrapper,
  .global_nav_block .shop_nav_list,
  .global_nav_block .route_nav_list {
    display: none;
  }

}

@media screen and (max-width: 1024px) {
  header.fixed {
    margin-left: 0;
  }

  header .header_inner_block {
    width: min(768px, 100%);
    padding: 0 var(--size-16);
    transform: none;
  }

  .header_inner_block .logo {
    display: none;
  }

  .main_contents {
    margin: 0 auto;
  }

  .contents_wrapper {
    display: block;
  }

  .left_side_contents {
    width: min(768px, 100%);
    transform: none;
    order: 3;
    margin: var(--size-24) auto 0;
    position: unset;
  }

  .left_side_contents .banner_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 var(--size-24);
  }

  .left_side_contents .banner_list li {
    width: 48%;
  }

  .left_side_contents .banner_list li:nth-last-child(1),
  .left_side_contents .banner_list li:nth-last-child(2) {
    margin-bottom: 0;
  }

  .left_side_contents .banner_list li a span {
    height: 164px;
    font-size: 27px;
  }

  .common_wrapper .left_side_contents {
    display: none;
  }

  .left_side_contents .shop_data_info {
    display: none;
  }

  .side_banner_block ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: var(--size-24) var(--size-16) 0;
  }

  .shop_data_content {
    display: block;
  }

  .search_therapist_container.fixed {
    top: var(--size-56);
  }

  .guidelines_header {
    height: var(--size-56);
  }

  .sticky-header {
    top: var(--size-56);
  }

  /* 口コミモーダル */
  .review_post_header {
    height: var(--size-56);
  }
}

@media screen and (max-width: 768px) {
  /* clamp(16px, 0.167rem + 2.78vw, 24px) 768px-480pxの間で24px-16pxで可変 */

  a {
    -webkit-tap-highlight-color: rgba(0, 102, 204, 0.3);
  }

  footer {
    padding: var(--size-16) clamp(var(--size-16), -2.333rem + 11.11vw, var(--size-48));
  }

  .footer_nav ul li {
    margin: 0 var(--size-8) var(--size-8);
  }

  .left_side_contents .banner_list {
    flex-direction: column;
    align-items: center;
    padding: 0 clamp(var(--size-16), 0.167rem + 2.78vw, var(--size-24));
  }

  .left_side_contents .banner_list.pc_only {
    display: none;
  }

  .left_side_contents .banner_list li {
    width: 285px;
  }

  .left_side_contents .banner_list li:nth-last-child(1), .left_side_contents .banner_list li:nth-last-child(2) {
    margin-bottom: var(--size-16);
  }

  .left_side_contents .banner_list li:last-child {
    margin-bottom: 0;
  }

  .left_side_contents .banner_list li a span {
    height: 164px;
    font-size: 27px;
  }

  .sort_container .sort_inner_block {
    padding: 0 clamp(var(--size-16), 0.167rem + 2.78vw, var(--size-24));
  }

  /* トップページ */
  .mv_block .qr_code_box {
    display: none;
  }

  .recommend_block .recommend_inner_box,
  .latest_diary_block .diary_inner_box {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  .recommend_block .recommend_list,
  .latest_diary_block .diary_inner_box .diary_list,
  .latest_diary_block .diary_inner_box .more_btn  {
    scroll-snap-align: start;
  }

  .recommend_block .recommend_list li:nth-child(5n) {
    margin-right: 2px;
  }

  /* ScrollHintとscroll-snapの競合を解決 */
  .recommend_block .recommend_inner_box.scroll-hint,
  .latest_diary_block .diary_inner_box.scroll-hint {
    scroll-snap-type: none !important;
  }

  /* または、ScrollHint有効時のみスクロールスナップを無効化 */
  .js-scrollable.scroll-hint {
    scroll-snap-type: none !important;
  }

  .js-scrollable-diary.scroll-hint {
    scroll-snap-type: none !important;
  }

  /* プロフィール */
  .diary_box {
    padding: 0 clamp(var(--size-16), 0.167rem + 2.78vw, var(--size-24));
  }

  /* その他ページ */
  .review_block .review_item,
  .diary_modal_content {
    padding: var(--size-16) clamp(var(--size-16), 0.167rem + 2.78vw, var(--size-24)) var(--size-16);
  }

  .ranking_panel {
    padding-left: clamp(var(--size-8), -0.759rem + 4.71vw, var(--size-24));
    gap: clamp(8px, -0.043rem + 2.17vw, 16px);
    /* 768px～400px */
  }

  .ranking_panel .rank_number_box .rank_text_box .rank_text01,
  .ranking_panel .rank_number_box .rank_text_box .rank_text02 {
    width: fit-content;
    font-size: clamp(0.75rem, -0.083rem + 2.78vw, 1.25rem);
  }

  .ranking_panel .rank_number_box .rank_number .number_prefix {
    font-size: clamp(2.25rem, 1rem + 4.17vw, 3rem);
  }

  .therapist_recruit_detail_block .chart_row {
    flex-direction: column;
    gap: var(--size-16);
  }

  /* 求人 */
  .fixed_recruit_contact .contact_list {
    padding: 0;
  }

  /* 求人 */
  .recruit_detail_block {
    padding: 0 clamp(var(--size-16), 0.167rem + 2.78vw, var(--size-24));
  }
  .recruit_detail_block .chart_row {
    flex-direction: column;
    gap: var(--size-16);
  }

  .recruit_detail_block .chart_item {
    width: 100%;
  }

  .recruit_detail_block .environment_chart {
    padding: var(--size-16) var(--size-8);
  }

  /* 口コミモーダル */
  .review_popup {
    height: 100vh;
    height: 100dvh;
    min-height: -webkit-fill-available; /* iOS Safari用 */
  }

  .review_popup_overlay {
    height: 100vh;
    height: 100dvh;
    min-height: -webkit-fill-available;
  }

  .review_form_block {
    padding: var(--size-32) clamp(var(--size-16), -0.667rem + 5.56vw, var(--size-32));
  }

  .contact_inner_box,
  .flow_inner_box,
  .guidelines_inner_box {
    padding-inline: clamp(var(--size-16), -0.667rem + 5.56vw, var(--size-32));
  }
}

@media screen and (max-width: 640px) {
  /* 予約フォーム女性サムネイル */
  .therapist_thumbnails {
      grid-template-columns: repeat(3, 1fr);
      gap: var(--size-8);
  }
}

@media screen and (max-width: 612px) {

  .ranking_panel .rank_number_box .rank_text_box {
    position: absolute;
  }

  .ranking_panel .rank_number_box .rank_number {
    margin-left: auto;
  }
}

@media screen and (max-width: 480px) {

  .ranking_panel .rank_number_box .rank_text_box {
    flex: 1;
    background: none;
  }

  .ranking_panel .rank_number_box .rank_text_box .rank_text01,
  .ranking_panel .rank_number_box .rank_text_box .rank_text02 {
    width: fit-content;
  }

  .ranking_panel .rank_number_box .rank_text_box {
    position: absolute;
    left: 0;
    z-index: 3;
  }

  .ranking_panel .therapist_img {
    width: auto;
  }

  .coupon_detail_block .coupon_img figcaption {
    height: 47.5vw;
    bottom: 9.2%;
    font-size: 8.3334vw;
  }

  /* 予約フォーム女性サムネイル */
  .therapist_thumbnails {
    grid-template-columns: repeat(2, 1fr);
  }

  /* web予約セレクトボックス */
  .select_wrap {
    flex-direction: column;
  }

  .date_time_select {
    min-height: var(--size-56);
  }

}

@media screen and (max-width: 428px) {

  .ranking_panel .rank_number_box .rank_text_box {
    flex-direction: column;
    top: var(--size-16);
  }

  .ranking_panel .rank_number_box .rank_text_box .rank_text01,
  .ranking_panel .rank_number_box .rank_text_box .rank_text02 {
    padding: 2px var(--size-4) 1px;
  }

  .ranking_panel .rank_number_box .rank_number {
    flex: 1;
  }

  .ranking_panel .rank_number_box .rank_number .number_prefix {
    position: absolute;
    bottom: var(--size-4);
    z-index: 3;
  }

  .ranking_panel .rank_number_box .rank_number .number_value {
    position: absolute;
  }
}