/* CSS Document */
:root {
  --bs-heading-color: #2c3e50;
  --color-pink: #FB4C88;
  --color-blue: #2BA9D2;
  --color-ygreen: #A9B63F;
  --color-green: #8AB93E;
  --color-dkgreen: #3C913F;
  --color-yellow: #F7D606;
  --color-orange: #FF5B16;
  --color-white: #FFFFFF;
  --color-gray: #707070;
  --line: #e8e8e8;
  --border-color: #9c9c9c;
  --trmotion-02: 0.2s ease-in-out;
  --trmotion-03: 0.3s ease-in-out;
  --bg-gradient: linear-gradient(to right, #69bcf4, #30cc8b);
  --bs-shadow-color: rgba(0, 0, 0, 0.16);
  --bs-shadow: 0 10px 20px var(--bs-shadow-color);
  --bs-gradient-color: linear-gradient(to right, #149bde, #4ec9e7);
  --rb-gradient-color: linear-gradient(126deg, rgba(255, 0, 96, 0.6) 0%, rgba(186, 6, 251, 0.6) 25%, rgba(51, 0, 255, 0.6) 50%, rgba(146, 0, 255, 0.6) 75%, rgba(191, 0, 255, 0.6) 100%);
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline
}
html {
  line-height: 1
}
ol, ul {
  list-style: none
}
table {
  border-collapse: collapse;
  border-spacing: 0
}
caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle
}
q, blockquote {
  quotes: none
}
q::before, q::after, blockquote::before, blockquote::after {
  content: "";
  content: none
}
a {
  color: inherit
}
a img {
  border: none
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block
}
img {
  vertical-align: bottom
}
textarea, input, select, button {
  font-family: inherit;
  font-size: 100%;
  color: inherit;
  margin: 0
}
button {
  background: none;
  border: none;
  cursor: pointer;
  appearance: none;
  padding: 0
}
hr {
  height: 0;
  margin: 0;
  border: 0
}
a {
  text-decoration: none
}
img, svg {
  max-width: 100%;
  height: auto
}
b, strong {
  font-weight: bold
}
sup {
  font-size: 75%;
  vertical-align: top
}
sub {
  font-size: 75%;
  vertical-align: bottom
}
i {
  font-style: italic
}
h1 {
  font-size: 2.0rem;
  font-weight: bolder;
}
h2 {
  font-size: 1.8rem;
  font-weight: bolder;
}
h3 {
  font-size: 1.6rem;
  font-weight: bolder;
}
h4 {
  font-size: 1.4rem;
}
h5 {
  font-size: 1.2rem;
}
body {
  color: #000;
  line-height: 1.75;
  font-family: "Noto Sans JP", sans-serif;
  font-feature-settings: "palt";
  letter-spacing: .04em;
  -webkit-text-size-adjust: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
  line-break: strict;
  --size: 16;
  font-size: 1rem;
}

.header-conts {
  padding-top: 50px;
}

.container {
  max-width: 1120px;
  padding: 0 16px;
  margin: 0 auto;
}
.fl_container {
  padding: 0 1.6rem;
  margin: 0 auto;
}
.svg_icon {
  line-height: 0;
}
.mg-l05 {
  margin-left: 0.5rem;
}
.t_large_, .t_large_ span {
  font-size: clamp(42px, 6vw, 72px);
}
.t_big {
  font-size: clamp(16px, 1.4vw, 22px);
}
.t_pink {
  color: var(--color-pink) !important;
}
.t_blue {
  color: var(--color-blue) !important;
}
.t_ygreen {
  color: var(--color-ygreen) !important;
}
.t_green {
  color: var(--color-green) !important;
}
.t_white {
  color: var(--color-white) !important;
}
.t_yellow {
  color: var(--color-yellow) !important;
}
.t_orange {
  color: var(--color-orange) !important;
}
.t_dkgreen {
  color: var(--color-dkgreen) !important;
}
.t_gray {
  color: var(--color-gray) !important;
}

.page {
    max-width: 800px;
    margin: 0 auto;
    background: white;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Header */

.main-heading,.reserve-title {
	text-align: center;
}
.res-header {
	color:  var(--color-orange);
	font-weight: 800;
}
.res-header,
.res-description {
   padding: 10px;	
}
.res-description {
  background: #fff;
  border-radius: 5px;
  margin-top: 0.25rem;
  color: #000;
  font-weight: 600;
  min-height: 41px;
}
.site-title {
    font-size: 1.5rem;
    margin: 0;
    font-weight: 800;
    color: #000;
}
.sys-title {
  font-size: clamp(18px, 2.8vw, 36px);
  margin-top: 10px;
}

.system-title {
    color: var(--text-gray);
    margin: 0.25rem 0 0;
    font-weight: 600;
    letter-spacing: 0.05em;
    font-size: clamp(16px, 2.0vw, 20px);
	text-align: center;
}

/* Page Titles */
.reserve-title {
    text-align: center;
    padding: 1.25rem 1rem;
}

.reserve-title .jp {
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    display: block;
}
.no_icon_ {
  display: inline-block;
  width: 36px;
  height: 36px;
  background: #000;
  border-radius: 50%;
  color: #fff;
  text-align: center;
  margin-right: 1.2rem;
}
.ss_block {
  font-size: clamp(16px, 2.0vw, 20px);
}
.reserve-title .en {
    font-size: 0.75rem;
    text-transform: uppercase;
    opacity: 0.6;
    letter-spacing: 0.1em;
    margin-top: 4px;
	font-weight: 600;
}

/* Shop Selection */
.shop-section {
    padding: 3rem 1.5rem;
    flex: 1;
}

.shop-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

@media (min-width: 640px) {
    .shop-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.shop-select-button {
   background: var(--color-orange);
   color: #ffffff!important;
   padding: 1.2rem;
   text-align: center;
   transform: translateY(0);
   transition: var(--trmotion-02)!important;
   border-radius: 8px;
}

.shop-select-button:hover {
    transform: translateY(-2px);
}

.shop-select-button .shop-name {
    font-size: 1.1rem;
    font-weight: 800;
}


/* Info Section */
.info-section {
    background: #ffffff;
    padding: 4rem 2rem;
    border-top: 1px solid var(--border-color);
	margin-top: clamp(40px, 10vw, 80px);
}

.info-title {
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 2rem;
}

.notice {
  background: white;
  border: 1px solid var(--color-pink);
  padding: 2rem;
  border-radius: 12px;
  margin: 30px auto 0;
}
.note_s span {
  background: var(--color-pink);
  padding: 5px 20px;
  display: inline-block;
  color: #fff;
  margin-bottom: 1.0rem;
  font-size: 14px;
}
/* Calendar & Time Grid */
.calendar-grid {
    display: flex;
    overflow-x: auto;
    gap: 0.5rem;
    padding-bottom: 1rem;
    -webkit-overflow-scrolling: touch;
}

.calendar-day {
    flex: 0 0 70px;
    padding: 1rem 0.5rem;
    text-align: center;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    background: white;
}
.calendar-day span {
  display: block;
  font-size: 16px;
  font-weight: 900;
}
.calendar-day.active {
    background: var(--color-orange);
    color: white;
    border-color: var(--color-orange);
}

.time-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 0.75rem;
    margin-top: 2rem;
}

.time-slot {
    padding: 1rem;
    text-align: center;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s;
}

.time-slot:hover {
    border-color: var(--color-orange);
    color: var(--color-orange);
}

.time-slot.active {
    background: #000;
    color: white;
    border-color: #000;
}

/* Forms */
.res-form {
    padding: 2.5rem 2rem;
}

.res-btn-primary {
    display: inline-block;
    width: 100%;
    background: var(--color-orange);
    color: white;
    padding: 1.25rem;
    border: none;
    border-radius: 8px;
    font-weight: 800;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background 0.2s;
    text-align: center;
    text-decoration: none;
}

.res-btn-primary:hover {
    background: #a00000;
    color: white;
}

.res-btn-primary:disabled {
    background: #e2e8f0;
    color: #94a3b8;
    cursor: not-allowed;
}

/* Footer */
.footer {
    text-align: center;
    padding: 4rem 1.5rem;
	margin-top: clamp(40px, 20vw, 100px);
}

.footer-logo {
    _filter: brightness(0) invert(1);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.copyright {
    font-size: 0.75rem;
    opacity: 0.5;
	margin-top: 1.0rem;
}

/* Mobile Tweaks */
@media (max-width: 640px) {
    .header { padding: 1.5rem 1rem; }
    .site-title { font-size: 1.25rem; }
    .page { max-width: 100%; }
    .footer-logo {
      display: flex;
      justify-content: center;
      align-items: center;
    }
}

/* Shop Info Card */
.shop-info-card {
    display: flex;
    gap: 2rem;
    padding: 2.5rem 1.5rem 0;
    align-items: flex-start;
}
.shop-info-image-container {
    flex: 0 0 35%;
    max-width: 300px;
}
.shop-info-image {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.shop-info-content {
    flex: 1;
}
.shop-info-content h3 {
    color: var(--color-orange);
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    font-weight: 800;
}
.shop-info-list {
    list-style: none;
    padding: 0;
}
.shop-info-list li {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.25rem;
    line-height: 1.6;
}
.shop-info-list li i {
    color: var(--color-orange);
    font-size: 1.1rem;
    margin-top: 4px;
}
.shop-info-label {
    font-weight: 800;
    margin-right: 0.5rem;
    color: #334155;
    white-space: nowrap;
}
.shop-info-value {
    color: #475569;
}

/* Reception Table */
.reception-table-wrapper {
    margin: 1.5rem 0;
    overflow-x: auto;
	padding: 0 1.5rem 2rem;
}
.reception-table {
    width: 100%;
    border-collapse: collapse;
    border: 2px solid var(--color-orange);
    color: var(--color-orange);
    font-size: 0.9rem;
    min-width: 500px;
}
.reception-table th, .reception-table td {
    border: 1px solid var(--color-orange);
    text-align: center;
    padding: 10px 4px;
    vertical-align: middle;
}
.reception-table th {
    background: #fff;
    font-weight: 800;
    font-size: 1.1rem;
}
.reception-table th.header-time {
    font-size: 1.4rem;
}
.reception-table .time-range {
    font-weight: 800;
    font-size: 1.2rem;
    width: 150px;
}
.reception-table .symbol {
    font-size: 2.2rem;
    line-height: 1;
    font-weight: normal;
}
.reception-table .closed {
    /* background: linear-gradient(to top right, transparent calc(50% - 1px), var(--color-orange) 50%, transparent calc(50% + 1px)); */
}
.reception-note {
    font-size: 0.85rem;
    color: var(--color-orange);
    margin-top: 0.5rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    font-weight: 600;
}
.reception-note .closed-days {
    font-size: 1.1rem;
}

/* Reservation Steps */
.reservation-steps {
    padding: 2rem 1.5rem 1rem;
}
.res-step-item {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    font-size: clamp(1.1rem, 4vw, 1.5rem);
    font-weight: 900;
}
.res-step-no {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
  font-size: 1.0rem;
}
.res-step-item.orange { color: var(--color-orange); }
.res-step-item.orange .res-step-no { background: var(--color-orange); }
.res-step-item.black { color: #000; }
.res-step-item.black .res-step-no { background: #000; }

.res-step-arrow {
  padding: 0 0 0 5px;
  color: var(--color-orange);
}
.res-step-arrow,
.res-step-name {
  font-size: 1.2rem;
}
.info-sub_title {
  margin-bottom: 0.6rem;
  font-weight: 600;
  font-size: 18px;
}
.btn_area_ {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.sub_btn_ {
  width: 100%;
  max-width: calc(70% - 10px);
  min-width: 272px;
  flex: 0 0 calc(70% - 10px);
}
.link_prev_ {
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  flex: 0 0 calc(30% - 10px);
  min-width: 150px;
  max-width: calc(30% - 10px);
}
.link_prev_ a {
  padding: 10px 0;
  color: #686868;
  font-weight: 500;
  background: #ececec;
  border-radius: 8px;
  width: 100%;
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  border: 1px solid #cdcdcd;
}
.link_prev_ a:hover {
  opacity: 0.8;
}
.res-btn-prev {
  margin-top: 1.5rem;
  color: #8a8a8a;
  display: inline-block;
  width: 100%;
  background: #E5E5E5;
  padding: 10px;
  border: none;
  border-radius: 8px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.2s;
  text-align: center;
  text-decoration: none;
}	
.member_link_ {
  text-align: center;
  margin-top: 10px;
  font-size: 18px;
  color: #000;
  font-weight: 500;
}
.member_link_ a{
  text-decoration: underline;
  color: #1052ba;
  font-weight: 800;
}

.members_ {
  display: flex;
  justify-content: end;
  align-items: center;
  grid: 1px;
}
.members_ a {
  position: fixed;
  right: -20px;
  top: 30%;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 15px;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  text-align: center;
  grid-gap: 10px;
  width: auto;
  padding: 20px 38px 20px 20px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  line-height: 0;
  font-weight: 600;
  letter-spacing: 0.1rem;
  color: #fff;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  transition: var(--trmotion-03) ;
  z-index: 99;
}
.members_ a:nth-child(1){
  background: var(--color-blue) !important;	
}
.members_ a:nth-child(2) {
  background: var(--color-orange) !important;
  top: calc(30% + 130px);
}
.members_ a.step_active_,
.members_ a:hover {
  right:0; 
}


.res-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6); z-index: 9999; display: flex;
    align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
.res-modal-overlay.active { opacity: 1; pointer-events: auto; }
.res-modal {
    background: #fff; width: 90%; max-width: 500px; padding: 2.5rem 2rem;
    border-radius: 8px; box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    text-align: center; position: relative;
}
.res-modal-close {
    position: absolute; top: 10px; right: 15px; font-size: 1.5rem;
    color: #94a3b8; cursor: pointer; text-decoration: none; border: none; background: transparent;
}
.res-modal-close:hover { color: #475569; }
.res-modal h3 { color: var(--primary); margin-top: 0; font-size: 1.4rem; margin-bottom: 1.5rem; }
.res-modal p { color: #475569; font-size: 1rem; line-height: 1.6; margin-bottom: 2rem; text-align: left; }
.res-modal .ui.button { margin-bottom: 1rem; width: 100%; }
html.no-scroll, body.no-scroll {
    overflow: hidden;
    height: 100%;
}



@media (max-width: 768px) {
    .shop-info-card {
        flex-direction: column;
    }
    .shop-info-image-container {
        flex: 1;
        max-width: 100%;
        width: 100%;
    }
    .shop-info-content h3 {
        font-size: 1.5rem;
    }
}

@media (max-width: 500px) {
.sub_btn_ {
  max-width: 100%;
  flex: 0 0 100%;
  order: 1;
}
.link_prev_ {
  flex: 0 0 100%;
  max-width: 100%;
  order: 2;
}
.info-section {
  padding: 2rem 0;
  margin-top: 2rem;
}
.res-step-arrow, .res-step-name {
  font-size: 16px;
}	
.info-title {
  font-size: 20px;
}	
	
}