@charset "utf-8";
/* CSS Document */

/* PC用: 電話番号リンクをクリック不可にする（.phone_alert_btnはJS側でモーダル表示するため除外） */
@media screen and (min-width: 1025px) {
  a[href^="tel:"]:not(.phone_alert_btn) {
    pointer-events: none;
    cursor: default;
  }
}

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

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

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

  .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;
  }

  .global_nav_block .logo {
    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: var(--size-64);
  }

  .page-top.top_page, .page-top.detail_page {
    bottom: var(--size-128);
  }

  .page-top.shop_page {
    bottom: var(--size-88);
  }

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

  .page-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .global_nav_block {
    order: 2;
  }
}

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

  header {
    width: 100%;
    position: fixed;
  }

  header.fixed {
    margin-left: 0;
  }

  header.common_header {
    position: unset;
  }

  header.common_header.fixed {
    position: fixed;
  }

  header .header_inner_block {
    padding: 0 var(--size-16);
  }

  header .header_inner_block {
    width: min(768px, 100%);
    transform: none;
  }

  header .header_inner_block h1 .catch_text {
    display: none;
  }

  header .header_inner_block h1 .logo {
    width: 95px;
  }

  header.fixed h1 {
    display: block;
  }

  .contents_wrapper {
    display: block;
  }

  .main_contents  {
    margin: 0 auto;
  }

  .left_side_contents {
    width: min(768px, 100%);
    transform: none;
    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: 100%;
  }

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

  .mv_nav_block {
    width: min(375px, 100%);
    display: block;
    padding: var(--size-24) var(--size-16);
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    will-change: transform;
    backface-visibility: hidden;
  }

  .mv_nav_block ul {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
  }

  .mv_nav_block ul li a {
    width: 105px;
    aspect-ratio: 1;
    font-size: var(--size-16);
    position: relative;
    overflow: hidden;
    border-radius: 50%;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    font-optical-sizing: auto;
    letter-spacing: -0.075em;
  }

  .mv_nav_block ul li a::before {
    content: "";
    width: 100%;
    height: 100%;
    background-image: linear-gradient(0deg, rgb(42 54 166 / 90%) 0%, rgb(21 30 90 / 90%) 33%, rgb(16 24 48 / 90%) 90%);
    opacity: 0.8;
    position: absolute;
    z-index: -1;
  }

  .mv_nav_block ul li a span.icon {
    width: 100%;
    display: block;
    margin-bottom: var(--size-8);
  }

  .mv_nav_block ul li a.station {
    color: var(--colorImportantPink);
    font-size: var(--size-12);
  }

  .mv_nav_block ul li a.shop {
    color: var(--colorBlue);
    font-size: var(--size-12);
  }
  .mv_nav_block ul li a.ranking {
    color: var(--colorYellow);
    font-size: var(--size-12);
  }

  .mv_nav_block ul li a.contact {
    width: 225px;
    height: var(--size-64);
    border-radius: var(--size-4);
    letter-spacing: 0;
  }

  .mv_nav_block ul li a span.icon img {
    margin: 0 auto;
  }

  .mv_nav_block ul li a.station span.icon img {
    width: 30px;
  }

  .mv_nav_block ul li a.shop span.icon img {
    width: 30px;
  }

  .mv_nav_block ul li a.ranking span.icon img {
    width: 42px;
  }

  .mv_nav_clone {
    position: fixed;
    transform: translateX(-50%) translateY(100%);
    z-index: 1000;
    transition: opacity 0.25s ease, transform 0.3s ease-out; /* イージング調整 */
    opacity: 0;
    padding: var(--size-24) var(--size-16);
  }

  .mv_nav_block.mv_nav_clone ul li a {
    border: none;
  }

  .mv_nav_block.mv_nav_clone ul li a::before {
    opacity: 1;
  }

  .mv_block .advertisement_banner {
    display: none;
  }

}

@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);
  }

  .global_nav_block .page_top {
    width: clamp(44px, 1.438rem + 5.6vw, 66px);
  }

  .left_side_contents .banner_list {
    justify-content: space-between;
  }

  footer {
    padding: var(--size-16) clamp(var(--size-16), 0.167rem + 2.78vw, var(--size-24));
  }

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

  /* top */
  .mv_block {
    height: 100vh;
    position: relative;
    overflow: hidden;
  }

  .mv_block figure {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
  }

  .mv_block figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }
  /* iOS Safari対応 */
  @supports (-webkit-touch-callout: none) {
    .mv_block {
      height: -webkit-fill-available;
      max-height: 825px;
    }
  }

  .mv_block .logo_block {
    width: clamp(263px, 6.24rem + 43.51vw, 434px);
    /* height: clamp(116px, 2.896rem + 18.58vw, 189px); */
    height: auto;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
  }

  .mv_block .logo_block .catch {
    font-size: clamp(18px, 0.409rem + 3.05vw, 30px);
  }

  .mv_block .logo_block .logo {
    width: 100%;
  }

  .mv_block .logo_block .area-version {
    width: clamp(124px, 2.74rem + 21.37vw, 208px);
    font-size: clamp(16px, 0.344rem + 2.8vw, 27px);
    padding-inline: clamp(32px, 1.046rem + 4.07vw, 48px);
  }

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

  .shop_detail .shop_banner_block {
    padding-bottom: 0;
  }

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

  .button_container {
    gap: clamp(8px, -0.333rem + 2.78vw, 16px);
  }

  /* 絞り込みポップアップオーバーレイ */
  .filter_popup {
      height: 100vh;
      height: 100dvh;
      min-height: -webkit-fill-available; /* iOS Safari用 */
  }

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

}

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

  .left_side_contents {
    margin: var(--size-16) auto 0;
  }

  .left_side_contents .banner_list {
    padding: 0 var(--size-16);
  }

  .shop_detail .shop_banner_block ul {
    padding: 0 var(--size-32);
  }

  .shop_detail .shop_banner_block ul li {
    width: 100%;
    margin-bottom: var(--size-16);
  }

  .shop_detail .shop_banner_block ul li:nth-child(n+3) {
    margin-top: 0;
  }

  .top_news_block .top_news_list {
    background: var(--colorPink);
  }

  .shop_detail_box .link_block {
    width: 100%;
  }

  .shop_detail_box .station_name {
    padding: 0 var(--size-16);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
    line-height: var(--size-32);
    text-align: center;
    box-sizing: border-box;
  }

  .shop_detail_box .shop_data_box .shop_data02 {
    padding: 0 var(--size-16);
  }

  .station-item {
    height: auto;
    padding: var(--size-12) var(--size-8);
    align-items: center;
  }

  .station-item .material-icons {
    width: 18px;
    margin-right: var(--size-8);
    flex-shrink: 0;
  }

  .station-item span.name {
    width: 0;
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: var(--size-14);
    line-height: 1.2;
  }

  .station-item span.name .kind {
    font-size: 10px;
  }

  .station-item span.number {
    flex-shrink: 0;
    white-space: nowrap;
    margin-left: var(--size-8);
  }

  .form_input.phone_part {
    width: clamp(64px, 1rem + 15vw, 88px);
  }

}