@charset "UTF-8";
/* =========================================================================
   沖縄銀行 来店予約サービス（リニューアル案）
   style.css
   - 既存サイト（/_themes/assets/css/common.css）のブランドカラーに準拠
     primary #B90018 / accent #00CC99 / text #171717 / line #D8D8D8
   ========================================================================= */

/* -------------------------------------------------- 1. Design tokens */
:root {
  /* brand */
  --c-primary:        #b90018;
  --c-primary-dark:   #8e0013;
  --c-primary-tint:   #fdf1f2;
  --c-accent:         #00cc99;   /* 装飾用 */
  --c-online:         #00755f;   /* 文字用（コントラスト確保） */
  --c-online-tint:    #eefaf6;
  --c-warn:           #9a5b00;
  --c-warn-tint:      #fff8ec;
  --c-info:           #335ba5;
  --c-info-tint:      #f1f5fc;

  /* neutral */
  --c-ink:            #171717;
  --c-ink-2:          #555555;
  --c-ink-3:          #767676;
  --c-line:           #d8d8d8;
  --c-line-2:         #ebebeb;
  --c-bg:             #f2f2f2;
  --c-bg-soft:        #f9f9f9;
  --c-white:          #ffffff;

  /* type */
  --ff-base: 'NotosansCjkjp-Regular', 'Hiragino Kaku Gothic ProN',
             'Hiragino Sans', Meiryo, system-ui, sans-serif;
  --fz-body: 1.6rem;
  --lh-body: 1.85;

  /* metrics */
  --w-content: 1080px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --sd-1: 0 1px 3px rgba(23, 23, 23, .08);
  --sd-2: 0 4px 16px rgba(23, 23, 23, .1);
  --sd-3: 0 10px 30px rgba(23, 23, 23, .12);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* -------------------------------------------------- 2. Reset / base */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* 本文の書体・文字サイズ・行送りは沖縄銀行サイト共通（common.css）に従う。
   ここでは本ページで必要な指定だけを足す。 */
body {
  background: var(--c-white);   /* 共通CSSは背景色を指定していないため明示する */
  font-feature-settings: "palt" 1;
  overflow-wrap: anywhere;
  line-break: strict;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, table { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg { max-width: 100%; height: auto; vertical-align: middle; }
a { color: var(--c-primary); text-underline-offset: .2em; }
/* 本文中のリンク（クラスを持たない <a>）は、ホバー・フォーカスで下線を出す。
   ボタンやカードとして組んだリンクは class を持つため対象外。 */
a:not([class]):hover,
a:not([class]):focus-visible { text-decoration: underline; }
button { font: inherit; color: inherit; }

:where(a, button, summary, input, [tabindex]):focus-visible {
  outline: 3px solid #0b6bcb;
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* skip link */
.u-skip {
  position: absolute; left: 8px; top: -100px; z-index: 100;
  padding: .7em 1.4em; background: var(--c-ink); color: #fff;
  text-decoration: none; border-radius: 0 0 var(--r-md) var(--r-md);
  transition: top .2s var(--ease);
}
.u-skip:focus { top: 0; }

.u-vh {
  position: absolute !important; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.u-nowrap { white-space: nowrap; }
.u-note { font-size: 1.3rem; line-height: 1.8; color: var(--c-ink-2); }

/* -------------------------------------------------- 3. Layout
   .l-container は沖縄銀行サイト共通のコンテナ（common.css / max-width 1300px）を
   そのまま使うため、ここでは定義しない。 */
.l-section { padding-block: clamp(4.8rem, 7vw, 8.8rem); }
.l-section--tint { background: var(--c-bg-soft); }
.l-section--band { background: var(--c-bg); }

/* -------------------------------------------------- 5. Hero */
.p-hero {
  position: relative; overflow: hidden;
  padding-block: clamp(4rem, 6vw, 7.2rem);
  background:
    radial-gradient(120% 130% at 100% 0%, #fff5f6 0%, rgba(255,255,255,0) 55%),
    linear-gradient(180deg, #fbfbfb 0%, var(--c-white) 100%);
  border-bottom: 1px solid var(--c-line-2);
}
.p-hero::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 4px;
  background: linear-gradient(90deg, var(--c-primary) 0 55%, var(--c-accent) 55% 100%);
}
.p-hero__grid {
  display: grid; gap: clamp(2.8rem, 4vw, 4.8rem);
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: start;
}
@media (max-width: 899px) { .p-hero__grid { grid-template-columns: 1fr; } }

.p-hero__eyebrow {
  display: inline-block;
  padding: .3em 1em;
  margin-bottom: 1.6rem;
  font-size: 1.2rem; font-weight: 700; letter-spacing: .08em;
  color: var(--c-primary); background: var(--c-primary-tint);
  border: 1px solid #f1d3d6; border-radius: 100px;
}
.p-hero__title {
  /* 上限を rem だけで決めると、文字サイズ「大」で見出しがカラム幅を超えて
     語の途中で改行されるため、px の上限も併せて指定する。 */
  font-size: clamp(2.8rem, 4.6vw, min(4.4rem, 48px));
  line-height: 1.35; font-weight: 700; letter-spacing: -.01em;
  text-align: left;
}
/* 見出しは <br> で改行位置を固定せず、意味のまとまりごとに折り返す。
   文字サイズ「中」「大」でも、語の途中で改行されない。 */
.p-hero__phrase { display: inline-block; }
.p-hero__title .is-mark {
  background: linear-gradient(transparent 62%, #ffe1a8 62%);
  padding-inline: .05em;
}
.p-hero__lead {
  margin-top: 2rem; max-width: 34em;
  font-size: clamp(1.5rem, 2vw, 1.7rem); color: var(--c-ink-2);
}
.p-hero__cta {
  display: flex; flex-wrap: wrap; gap: 1.4rem; margin-top: 3.2rem;
}
@media (max-width: 599px) {
  .p-hero__cta { gap: 1.2rem; }
  .p-hero__cta .c-btn { flex: 1 1 100%; }
}
/* 予約の基本情報。CTAのすぐ下に置くため、白い箱を3つ並べるのをやめ、
   薄い地色の帯1枚にまとめて「押せる要素ではない」ことを見た目で示す。 */
.p-hero__facts {
  display: flex; gap: 0;
  margin-top: 2.8rem; padding: 1.4rem .4rem;
  background: var(--c-bg-soft); border-radius: var(--r-md);
}
.p-hero__fact {
  flex: 1 1 0; min-width: 0;
  padding: .2rem 1.6rem;
  border-left: 1px solid var(--c-line);
  text-align: left;
}
.p-hero__fact:first-child { border-left: 0; }
@media (max-width: 599px) {
  .p-hero__facts { display: grid; grid-template-columns: 1fr; padding: 1.2rem 1.6rem; }
  .p-hero__fact {
    padding: 1rem 0; border-left: 0; border-top: 1px solid var(--c-line);
  }
  .p-hero__fact:first-child { padding-top: 0; border-top: 0; }
}
.p-hero__fact dt {
  font-size: 1.1rem; font-weight: 700; letter-spacing: .06em;
  color: var(--c-ink-3);
}
.p-hero__fact dd { font-size: 1.5rem; font-weight: 700; line-height: 1.5; }

/* hero visual : 来店 vs オンライン の対比 */
.p-hero__figure {
  padding: 2.4rem;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sd-2);
}
.p-hero__figure h2 {
  font-size: 1.4rem; font-weight: 700; text-align: center;
  padding-bottom: 1.4rem; margin-bottom: 1.6rem;
  border-bottom: 1px dashed var(--c-line);
}
.p-hero__compare { display: grid; gap: 0.8rem; }
.p-hero__compare li {
  display: block; padding: 0.88rem 0.4rem;
  font-size: 1.4rem; border-bottom: 1px solid var(--c-line-2);
}
.p-hero__compare li:last-child { border-bottom: 0; }
.p-hero__tag {
  display: inline-block; padding: .15em .7em; border-radius: 100px;
  font-size: 1.1rem; font-weight: 700; white-space: nowrap;
}
.p-hero__tag--online { color: var(--c-online); background: var(--c-online-tint); border: 1px solid #b8e5d8; }
.p-hero__tag--visit  { color: var(--c-primary); background: var(--c-primary-tint); border: 1px solid #f1d3d6; }

/* -------------------------------------------------- 6. Buttons */
.c-btn {
  --btn-bg: var(--c-primary);
  --btn-fg: #fff;
  --btn-bd: var(--c-primary);
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 56px; padding: .75em 1.75em;
  font-size: 1.6rem; font-weight: 700; line-height: 1.4; text-align: center;
  text-decoration: none; cursor: pointer;
  color: var(--btn-fg); background: var(--btn-bg);
  border: 2px solid var(--btn-bd); border-radius: 100px;
  transition: background-color .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease), transform .2s var(--ease),
              box-shadow .2s var(--ease);
}
.c-btn:hover { transform: translateY(-2px); box-shadow: var(--sd-2); }
.c-btn:active { transform: translateY(0); }
.c-btn__ico { flex: none; width: 1.15em; height: 1.15em; fill: currentColor; }

.c-btn--primary { --btn-bg: var(--c-primary); --btn-bd: var(--c-primary); }
.c-btn--primary:hover { --btn-bg: var(--c-primary-dark); --btn-bd: var(--c-primary-dark); }

.c-btn--online { --btn-bg: var(--c-online); --btn-bd: var(--c-online); }
.c-btn--online:hover { --btn-bg: #005f4d; --btn-bd: #005f4d; }

.c-btn--ghost { --btn-bg: #fff; --btn-fg: var(--c-ink); --btn-bd: var(--c-line); }
.c-btn--ghost:hover { --btn-bd: var(--c-ink); }

.c-btn--sm { min-height: 44px; padding: .5em 1.25em; font-size: 1.4rem; }
.c-btn--block { width: 100%; }
.c-btn[aria-disabled="true"] {
  --btn-bg: #e4e4e4; --btn-fg: #8a8a8a; --btn-bd: #e4e4e4;
  cursor: not-allowed; pointer-events: none; transform: none; box-shadow: none;
}

/* -------------------------------------------------- 7. Headings */
.c-hd { margin-bottom: clamp(2.4rem, 3.5vw, 4rem); text-align: left; }
.c-hd__num {
  display: block; margin-bottom: 0.8rem;
  font-size: 1.2rem; font-weight: 700; letter-spacing: .12em;
  color: var(--c-primary);
}
.c-hd__title {
  font-size: clamp(2.2rem, 3.4vw, 3rem); font-weight: 700; line-height: 1.45;
}
.c-hd__lead { margin-top: 1.4rem; max-width: 60em; color: var(--c-ink-2); font-size: 1.5rem; }
.c-hd--center { text-align: center; }
.c-hd--center .c-hd__lead { margin-inline: auto; }

.c-subhd {
  display: flex; align-items: center; gap: 0.96rem;
  margin-bottom: 1.6rem; font-size: 1.7rem; font-weight: 700;
}
.c-subhd::before {
  content: ""; flex: none; width: 4px; height: 1.15em;
  background: var(--c-primary); border-radius: 2px;
}

/* -------------------------------------------------- 8. Notice / alert */
.c-notice {
  display: grid; grid-template-columns: auto 1fr; gap: 1.6rem;
  padding: 1.8rem 2rem;
  background: var(--c-warn-tint);
  border: 1px solid #f0dcb8; border-left: 5px solid #e0a63f;
  border-radius: var(--r-md);
  font-size: 1.5rem;
}
.c-notice--alert { background: var(--c-primary-tint); border-color: #f1d3d6; border-left-color: var(--c-primary); }
.c-notice--info  { background: var(--c-info-tint);  border-color: #d5e0f3; border-left-color: var(--c-info); }
.c-notice__ico { flex: none; width: 2.4rem; height: 2.4rem; margin-top: 0.32rem; }
.c-notice__title { font-weight: 700; margin-bottom: 0.4rem; }
.c-notice p + p { margin-top: 0.8rem; }
.c-notice ul { margin-top: 0.8rem; }
.c-notice li { padding-left: 1.1em; position: relative; }
.c-notice li::before { content: "・"; position: absolute; left: 0; }

/* -------------------------------------------------- 9. 用件ナビ（診断ウィジェット） */
.p-navi {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sd-2);
  overflow: hidden;
}
.p-navi__head {
  padding: 2rem clamp(1.6rem, 3vw, 3.2rem) 2.2rem;
  background: var(--c-primary);        /* おきぎんの赤 */
  color: #fff;
}

/* search */
.p-navi__search { padding: 2rem clamp(1.6rem, 3vw, 3.2rem) 0; }
.c-search { position: relative; }
.c-search__label {
  display: block; margin-bottom: 0.8rem;
  font-size: 1.3rem; font-weight: 700; color: var(--c-ink-2);
}
.c-search__field {
  width: 100%; min-height: 52px;
  padding: 1.2rem 4.4rem 1.2rem 4.4rem;
  font-size: 1.6rem; font-family: inherit; color: var(--c-ink);
  background: var(--c-bg-soft);
  border: 1px solid var(--c-line); border-radius: 100px;
}
.c-search__field::placeholder { color: var(--c-ink-3); }
.c-search__field:focus {
  background: #fff; border-color: var(--c-ink);
  outline: 3px solid #0b6bcb; outline-offset: 1px;
}
.c-search__ico {
  position: absolute; left: 1.6rem; bottom: 14px;
  width: 22px; height: 22px; fill: var(--c-ink-3); pointer-events: none;
}
/* input[type="search"] はブラウザが独自の✕を出すため、自作の✕と二重になる。
   標準の方を隠して、自作のものだけを使う。 */
.c-search__field::-webkit-search-cancel-button,
.c-search__field::-webkit-search-decoration {
  -webkit-appearance: none;
          appearance: none;
}
.c-search__field::-ms-clear { display: none; width: 0; height: 0; }

.c-search__clear {
  position: absolute; right: 0.8rem; bottom: 8px;
  display: grid; place-content: center;
  width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: transparent; cursor: pointer; color: var(--c-ink-2);
}
.c-search__clear:hover { background: var(--c-bg); }
.c-search__clear[hidden] { display: none; }

.c-suggest {
  margin-top: 1.2rem; display: grid; gap: 0.6rem;
}
.c-suggest:empty { display: none; }
.c-suggest__item {
  display: grid; grid-template-columns: 1fr auto; gap: 1.2rem; align-items: center;
  width: 100%; padding: 1.12rem 1.6rem; text-align: left;
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-md);
  cursor: pointer; font-size: 1.5rem;
  transition: border-color .15s var(--ease), background-color .15s var(--ease);
}
.c-suggest__item:hover { border-color: var(--c-ink); background: var(--c-bg-soft); }
.c-suggest__empty {
  padding: 1.4rem 1.6rem; font-size: 1.4rem; color: var(--c-ink-2);
  background: var(--c-bg-soft); border-radius: var(--r-md);
}

/* steps */
.p-navi__body { padding: clamp(2rem, 3vw, 3.2rem); }

.c-fieldset { border: 0; padding: 0; margin: 0 0 2.4rem; }
.c-fieldset:last-of-type { margin-bottom: 0; }
/* STEP1・STEP2 とも、おきぎんの赤の帯で示す */
.c-fieldset__legend {
  display: block; width: 100%; margin-bottom: 1.4rem;
  padding: 1rem 1.6rem; border-radius: var(--r-sm);
  font-size: 1.6rem; font-weight: 700;
  color: var(--c-primary); background: var(--c-primary-tint);
}
@media (max-width: 599px) {
  .c-fieldset__legend { padding: .9rem 1.2rem; font-size: 1.4rem; }
}

.c-choices { display: grid; gap: 1rem; }
.c-choices--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.c-choices--auto { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
@media (max-width: 679px) {
  .c-choices--2,
  .c-choices--auto { grid-template-columns: 1fr; }
}

.c-choice {
  position: relative;
  display: grid; grid-template-columns: auto 1fr auto; gap: 1.2rem;
  align-items: center;
  width: 100%; padding: 1.6rem 1.8rem; text-align: left;
  font-size: 1.5rem; font-weight: 700; line-height: 1.5;
  background: #fff; color: var(--c-ink);
  border: 2px solid var(--c-line); border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color .15s var(--ease), background-color .15s var(--ease),
              box-shadow .15s var(--ease);
}
.c-choice:hover { border-color: var(--c-primary); background: var(--c-primary-tint); }
.c-choice[aria-pressed="true"] {
  border-color: var(--c-primary); background: var(--c-primary-tint);
  box-shadow: 0 0 0 1px var(--c-primary) inset;
}
.c-choice__radio {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--c-line-2); background: #fff;
  box-shadow: inset 0 0 0 4px #fff;
}
.c-choice[aria-pressed="true"] .c-choice__radio {
  border-color: var(--c-primary); background: var(--c-primary);
}
.c-choice__sub {
  display: block; margin-top: 0.32rem;
  font-size: 1.2rem; font-weight: 400; color: var(--c-ink-2);
}
.c-choice__badge {
  flex: none; padding: .2em .65em; border-radius: 100px;
  font-size: 1.1rem; font-weight: 700; white-space: nowrap;
}
.c-choice__badge--online   { color: var(--c-online);  background: var(--c-online-tint); }
.c-choice__badge--partial  { color: var(--c-warn);    background: var(--c-warn-tint); }
.c-choice__badge--visit    { color: var(--c-primary); background: var(--c-primary-tint); }
.c-choice__badge--contact  { color: var(--c-info);    background: var(--c-info-tint); }
.c-choice__badge--noreserve{ color: var(--c-ink-2);   background: var(--c-bg); }

@media (max-width: 599px) {
  .c-choice { padding: 1.4rem 1.6rem; gap: 1rem; font-size: 1.5rem; }
  .c-choice__badge { font-size: 1rem; padding: .2em .5em; }
}
/* 極小画面ではバッジを本文の下に回り込ませる */
@media (max-width: 479px) {
  .c-choice { grid-template-columns: auto 1fr; }
  .c-choice__badge { grid-column: 2; justify-self: start; margin-top: 0.64rem; }
  .c-suggest__item { grid-template-columns: 1fr; }
  .c-suggest__item .c-choice__badge { margin-top: 0.48rem; }
}

.p-navi__actions {
  display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: center;
  margin-top: 2.4rem; padding-top: 2rem; border-top: 1px dashed var(--c-line);
}
.c-textbtn {
  display: inline-flex; align-items: center; gap: .4em;
  padding: .4em .2em; background: none; border: 0;
  font-size: 1.4rem; font-weight: 700; color: var(--c-ink-2);
  cursor: pointer; text-decoration: underline; text-underline-offset: .2em;
}
.c-textbtn:hover { color: var(--c-primary); }

/* result */
.c-result {
  margin-top: 2.8rem;
  border: 1px solid var(--c-line); border-radius: var(--r-lg);
  overflow: hidden; background: #fff;
  animation: fadeUp .35s var(--ease) both;
}
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.c-result[hidden] { display: none; }

.c-result__head { padding: 2rem 2.4rem; color: #fff; }
.c-result--online   .c-result__head { background: var(--c-online); }
.c-result--partial  .c-result__head { background: #a86400; }
.c-result--visit    .c-result__head { background: var(--c-primary); }
.c-result--contact  .c-result__head { background: var(--c-info); }
.c-result--noreserve .c-result__head { background: #4a4a4a; }

.c-result__label {
  display: inline-block; padding: .2em .8em; margin-bottom: 0.8rem;
  font-size: 1.1rem; font-weight: 700; letter-spacing: .06em;
  background: rgba(255,255,255,.22); border-radius: 100px;
}
.c-result__title { font-size: clamp(1.7rem, 2.6vw, 2.2rem); font-weight: 700; line-height: 1.5; }
.c-result__for { margin-top: 0.8rem; font-size: 1.3rem; opacity: .9; }
.c-result__body { padding: clamp(2rem, 3vw, 2.8rem); }
.c-result__summary { font-size: 1.5rem; }

.c-panel {
  margin-top: 2rem; padding: 2rem;
  background: var(--c-bg-soft); border: 1px solid var(--c-line-2);
  border-radius: var(--r-md);
}
.c-panel--online { background: var(--c-online-tint); border-color: #c6e8dd; }
.c-panel--visit  { background: var(--c-primary-tint); border-color: #f3dade; }
.c-panel--tel    { background: var(--c-info-tint); border-color: #d5e0f3; }

/* パネル内の遷移ボタンは、枠の幅いっぱいに広げる */
.c-panel > .c-btn { display: flex; width: 100%; justify-content: center; }
.c-panel__title {
  display: flex; align-items: center; gap: 0.8rem;
  margin-bottom: 1.4rem; font-size: 1.6rem; font-weight: 700;
}
.c-panel__ico { flex: none; width: 2rem; height: 2rem; }

.c-deflist { display: grid; gap: 1.2rem; margin-bottom: 1.8rem; }
.c-deflist > div {
  /* 「ご用意いただくもの」「目安の所要時間」が折り返さない幅にする */
  display: grid; grid-template-columns: 9.5em 1fr; gap: 0.8rem 1.6rem;
}
@media (max-width: 599px) { .c-deflist > div { grid-template-columns: 1fr; gap: 0.16rem; } }
.c-deflist dt {
  font-size: 1.3rem; font-weight: 700; color: var(--c-ink-2);
  padding-top: .1em;
}
.c-deflist dd { font-size: 1.5rem; }
.c-deflist ul { display: grid; gap: 0.48rem; }
.c-deflist li { padding-left: 1.4em; position: relative; }
.c-deflist li::before {
  content: ""; position: absolute; left: .35em; top: .65em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--c-ink-3);
}

.c-condition {
  margin-top: 2rem; padding: 1.6rem 1.8rem;
  background: var(--c-warn-tint);
  border: 1px solid #f0dcb8; border-radius: var(--r-md);
  font-size: 1.4rem;
}
.c-condition__title { font-weight: 700; margin-bottom: 0.8rem; }
.c-condition ul { display: grid; gap: 0.4rem; }
.c-condition li { padding-left: 1.3em; position: relative; }
.c-condition li::before {
  content: "✓"; position: absolute; left: 0; color: var(--c-warn); font-weight: 700;
}

/* オンラインでお手続きいただける条件（肯定的な案内なので緑系にする） */
.c-condition--online {
  margin-top: 0; margin-bottom: 1.6rem;
  background: #fff; border-color: #b8e5d8;
}
.c-condition--online .c-condition__title { color: var(--c-online); }

.c-tel {
  display: grid; gap: 1.4rem;
}
.c-tel__item { display: grid; gap: 0.16rem; }
.c-tel__name { font-size: 1.3rem; font-weight: 700; color: var(--c-ink-2); }
.c-tel__num {
  font-size: 2.2rem; font-weight: 700; letter-spacing: .01em;
  color: var(--c-info); text-decoration: none;
}
.c-tel__num:hover { text-decoration: underline; }
.c-tel__hours { font-size: 1.2rem; color: var(--c-ink-2); }

.c-result__cta { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: 2.4rem; }
.c-result__links { margin-top: 2rem; display: grid; gap: 0.64rem; }
.c-result__links a { font-size: 1.4rem; }

/* -------------------------------------------------- 10. Cards（オンライン完結一覧） */
.c-cards {
  display: grid; gap: 1.6rem;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}
.c-card {
  display: flex; flex-direction: column; gap: 1rem;
  padding: 2.2rem;
  background: #fff; border: 1px solid var(--c-line);
  border-radius: var(--r-md); box-shadow: var(--sd-1);
  text-decoration: none; color: inherit;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.c-card:hover {
  transform: translateY(-3px); box-shadow: var(--sd-3);
  border-color: var(--c-online);
}
.c-card__tag {
  align-self: flex-start; padding: .2em .7em; border-radius: 100px;
  font-size: 1.1rem; font-weight: 700;
  color: var(--c-online); background: var(--c-online-tint);
}
.c-card__title {
  font-size: 1.7rem; font-weight: 700; line-height: 1.5;
  display: flex; align-items: baseline; gap: .4em;
}
.c-card__title::after {
  content: "›"; margin-left: auto; color: var(--c-online);
  font-size: 1.25em; line-height: 1; transition: transform .2s var(--ease);
}
.c-card:hover .c-card__title::after { transform: translateX(3px); }
.c-card__desc { font-size: 1.4rem; color: var(--c-ink-2); }
.c-card__meta {
  margin-top: auto; padding-top: 1.2rem; border-top: 1px dashed var(--c-line);
  font-size: 1.2rem; color: var(--c-ink-3);
}

/* -------------------------------------------------- 11. Tabs */
.c-tabs__list {
  display: flex; gap: 0.4rem; margin-bottom: 2.4rem;
  border-bottom: 2px solid var(--c-line);
}
.c-tabs__tab {
  padding: .8em 1.5em; border: 0; background: none; cursor: pointer;
  font-size: 1.5rem; font-weight: 700; color: var(--c-ink-2);
  border-bottom: 3px solid transparent; margin-bottom: -2px;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.c-tabs__tab:hover { color: var(--c-primary); }
.c-tabs__tab[aria-selected="true"] { color: var(--c-primary); border-bottom-color: var(--c-primary); }
.c-tabs__panel[hidden] { display: none; }

/* -------------------------------------------------- 12. Accordion (details) */
.c-acc { display: grid; gap: 1rem; }
.c-acc__item {
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-md);
  overflow: hidden;
}
.c-acc__item[open] { border-color: var(--c-ink-3); box-shadow: var(--sd-1); }
.c-acc__sum {
  display: grid; grid-template-columns: 1fr auto auto; gap: 1.4rem;
  align-items: center;
  padding: 1.7rem 2rem; cursor: pointer;
  font-size: 1.6rem; font-weight: 700; line-height: 1.5;
  list-style: none;
}
.c-acc__sum::-webkit-details-marker { display: none; }
.c-acc__sum:hover { background: var(--c-bg-soft); }
.c-acc__sign {
  flex: none; position: relative; width: 22px; height: 22px;
}
.c-acc__sign::before, .c-acc__sign::after {
  content: ""; position: absolute; inset: 50% 0 auto 0;
  height: 2px; background: var(--c-primary); border-radius: 2px;
  transition: transform .32s var(--ease);
}
.c-acc__sign::after { transform: rotate(90deg); }
.c-acc__item[open] .c-acc__sign::after { transform: rotate(0); }
/* 閉じるアニメーション中は [open] がまだ残っているため、専用クラスでアイコンだけ先に「＋」へ戻す */
.c-acc__item.is-closing .c-acc__sign::after { transform: rotate(90deg); }
.c-acc__body {
  padding: 0 2rem 2.2rem;
  border-top: 1px dashed var(--c-line); padding-top: 2rem;
  font-size: 1.5rem;
}
.c-acc__badge {
  flex: none; padding: .2em .7em; border-radius: 100px;
  font-size: 1.1rem; font-weight: 700; white-space: nowrap;
}
.c-acc__badge--visit   { color: var(--c-primary); background: var(--c-primary-tint); }
.c-acc__badge--partial { color: var(--c-warn); background: var(--c-warn-tint); }
.c-acc__badge--online  { color: var(--c-online); background: var(--c-online-tint); }

/* -------------------------------------------------- 13. Flow (予約の流れ) */
.c-flow {
  display: grid; gap: 1.6rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  counter-reset: flow;
}
@media (max-width: 767px) { .c-flow { grid-template-columns: 1fr; } }
.c-flow__item {
  position: relative; counter-increment: flow;
  padding: 2.8rem 2.2rem 2.4rem;
  background: #fff; border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}
.c-flow__item::before {
  content: "STEP " counter(flow);
  position: absolute; top: -1.2rem; left: 2rem;
  padding: .25em 1em; border-radius: 100px;
  font-size: 1.1rem; font-weight: 700; letter-spacing: .08em;
  color: #fff; background: var(--c-primary);
}
.c-flow__item:not(:last-child)::after {
  content: ""; position: absolute; right: -1.2rem; top: 50%;
  width: 12px; height: 12px; z-index: 1;
  border-top: 2px solid var(--c-primary); border-right: 2px solid var(--c-primary);
  transform: translateY(-50%) rotate(45deg);
}
@media (max-width: 767px) {
  .c-flow__item:not(:last-child)::after {
    right: 50%; top: auto; bottom: -1.2rem;
    transform: translateX(50%) rotate(135deg);
  }
}
.c-flow__title { font-size: 1.7rem; font-weight: 700; margin-bottom: 0.8rem; }
.c-flow__desc { font-size: 1.4rem; color: var(--c-ink-2); }

/* -------------------------------------------------- 14. 予約前チェック */
.p-reserve {
  padding: clamp(2.4rem, 4vw, 4rem);
  background: #fff; border: 2px solid var(--c-primary);
  border-radius: var(--r-lg); box-shadow: var(--sd-2);
}
.p-reserve__selected {
  display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; align-items: center;
  padding: 1.4rem 1.8rem; margin-bottom: 2.4rem;
  background: var(--c-primary-tint); border: 1px dashed var(--c-primary);
  border-radius: var(--r-md); font-size: 1.5rem;
}
.p-reserve__selected[hidden] { display: none; }
.p-reserve__selected b { font-weight: 700; }

.c-checklist { display: grid; gap: 1rem; margin-bottom: 2.8rem; }
.c-check {
  display: grid; grid-template-columns: auto 1fr; gap: 1.4rem;
  align-items: start; padding: 1.6rem 1.8rem;
  background: var(--c-bg-soft); border: 1px solid var(--c-line);
  border-radius: var(--r-md); cursor: pointer;
  transition: border-color .15s var(--ease), background-color .15s var(--ease);
}
.c-check:hover { border-color: var(--c-ink-3); }
.c-check:has(input:checked) { background: var(--c-online-tint); border-color: var(--c-online); }
.c-check input {
  flex: none; width: 24px; height: 24px; margin: 0;
  accent-color: var(--c-online); cursor: pointer;
}
.c-check__text { font-size: 1.5rem; font-weight: 700; line-height: 1.6; }
.c-check__note { display: block; margin-top: 0.4rem; font-size: 1.3rem; font-weight: 400; color: var(--c-ink-2); }

.p-reserve__status {
  margin-bottom: 1.6rem; font-size: 1.4rem; font-weight: 700; color: var(--c-ink-2);
}
.p-reserve__cta { display: grid; gap: 1.4rem; }
.p-reserve__alt {
  display: grid; gap: 1.6rem; margin-top: 2.8rem; padding-top: 2.4rem;
  border-top: 1px solid var(--c-line);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.p-reserve__altitem { font-size: 1.4rem; }
.p-reserve__altitem dt { font-weight: 700; margin-bottom: 0.4rem; }

/* -------------------------------------------------- 15. 注意事項 */
.c-cautions { display: grid; gap: 1.4rem; }
.c-cautions li {
  display: grid; grid-template-columns: auto 1fr; gap: 1.2rem;
  padding-bottom: 1.4rem; border-bottom: 1px dashed var(--c-line);
  font-size: 1.5rem;
}
.c-cautions li:last-child { border-bottom: 0; padding-bottom: 0; }
.c-cautions__mark {
  flex: none; display: grid; place-content: center;
  width: 22px; height: 22px; margin-top: .35em; border-radius: 50%;
  background: var(--c-primary); color: #fff;
  font-size: 1.2rem; font-weight: 700;
}

/* -------------------------------------------------- 16. お問い合わせ */
.c-contact { display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.c-contact__item {
  padding: 2rem; background: #fff;
  border: 1px solid var(--c-line); border-radius: var(--r-md);
}
.c-contact__name {
  font-size: 1.5rem; font-weight: 700; line-height: 1.5;
  margin-bottom: 0.8rem;
}
/* 2列以上に並ぶときは、見出しが1行でも2行分の高さを確保して
   電話番号（赤字）の位置を横方向で揃える。3em = 2行分。 */
@media (min-width: 600px) {
  .c-contact__name { min-height: 3em; }
}
.c-contact__num {
  display: inline-block; font-size: 2.4rem; font-weight: 700;
  color: var(--c-primary); text-decoration: none; letter-spacing: .01em;
}
.c-contact__num:hover { text-decoration: underline; }
.c-contact__hours { font-size: 1.2rem; color: var(--c-ink-2); margin-top: 0.4rem; }
.c-contact__memo { font-size: 1.3rem; color: var(--c-ink-2); margin-top: 0.8rem; }

/* -------------------------------------------------- 17. Sticky CTA (mobile) */
.p-stickycta {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 50;
  display: none; gap: 0.8rem; padding: 1rem 1.2rem;
  background: rgba(255, 255, 255, .96);
  border-top: 1px solid var(--c-line);
  box-shadow: 0 -4px 16px rgba(0,0,0,.08);
  backdrop-filter: blur(6px);
}
.p-stickycta .c-btn { flex: 1 1 0; min-height: 50px; font-size: 1.4rem; padding-inline: .5em; }
@media (max-width: 767px) {
  .p-stickycta { display: flex; }
  body { padding-bottom: 76px; }
}

/* -------------------------------------------------- 19. Print */
@media print {
  .p-stickycta, .g-header__nav, .p-navi__search, .u-skip { display: none !important; }
  body { padding-bottom: 0; }
  .c-acc__body { display: block !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .7em; word-break: break-all; }
}

/* =========================================================================
   20. 店舗・ATM一覧ページ（shops.html）
   ========================================================================= */

/* --- 区分タブ（件数つき） --- */
.p-loc__tabs { margin-bottom: 2.4rem; }
.p-loc__tablist {
  display: flex; flex-wrap: wrap; gap: 0.6rem;
  border-bottom: 2px solid var(--c-line);
}
.p-loc__tab {
  display: flex; align-items: baseline; gap: .4em;
  padding: .75em 1.25em; border: 0; background: none; cursor: pointer;
  font-size: 1.5rem; font-weight: 700; color: var(--c-ink-2);
  border-bottom: 3px solid transparent; margin-bottom: -2px;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  transition: color .2s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease);
}
.p-loc__tab:hover { color: var(--c-primary); background: var(--c-primary-tint); }
.p-loc__tab[aria-selected="true"] { color: var(--c-primary); border-bottom-color: var(--c-primary); }
.p-loc__tabnum { font-size: 1.2rem; font-weight: 400; color: var(--c-ink-3); }
.p-loc__tab[aria-selected="true"] .p-loc__tabnum { color: var(--c-primary); }
@media (max-width: 599px) {
  .p-loc__tab { padding: .65em .9em; font-size: 1.3rem; }
}

/* --- 絞り込みパネル --- */
.p-filter {
  padding: 2rem clamp(1.6rem, 3vw, 2.4rem);
  background: var(--c-bg-soft);
  border: 1px solid var(--c-line); border-radius: var(--r-md);
  margin-bottom: 2.8rem;
}
.p-filter__row + .p-filter__row {
  margin-top: 1.8rem; padding-top: 1.8rem; border-top: 1px dashed var(--c-line);
}
.p-filter__label {
  display: block; margin-bottom: 1rem;
  font-size: 1.3rem; font-weight: 700; color: var(--c-ink-2);
}

/* エリア目次 */
.c-areanav { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.c-areanav__item {
  display: inline-flex; align-items: baseline; gap: .3em;
  padding: .45em 1em; text-decoration: none;
  font-size: 1.4rem; font-weight: 700; color: var(--c-ink);
  background: #fff; border: 1px solid var(--c-line); border-radius: 100px;
  transition: border-color .15s var(--ease), background-color .15s var(--ease), color .15s var(--ease);
}
.c-areanav__item { cursor: pointer; }   /* 絞り込みのボタン（<button>）として使う */
.c-areanav__item:hover { border-color: var(--c-primary); color: var(--c-primary); background: var(--c-primary-tint); }
.c-areanav__item[hidden] { display: none; }
.c-areanav__num { font-size: 1.2rem; font-weight: 400; color: var(--c-ink-3); }
.c-areanav__item:hover .c-areanav__num { color: var(--c-primary); }
/* 絞り込みで選んだエリアは赤の塗りにする（カテゴリのチップと同じ見た目）。
   以前は店舗一覧の <head> にだけ書いてあり、配布物（<main> の中だけを使う）で抜けて、
   押しても色が変わらなかった（2026-10-13 ご指摘）。ここ1か所にまとめている。 */
.c-areanav__item[aria-pressed="true"],
.c-areanav__item[aria-pressed="true"]:hover {
  background: var(--c-primary); border-color: var(--c-primary); color: #fff;
}
.c-areanav__item[aria-pressed="true"] .c-areanav__num,
.c-areanav__item[aria-pressed="true"]:hover .c-areanav__num { color: rgba(255,255,255,.8); }

/* 条件チェック */
.c-conds { display: flex; flex-wrap: wrap; gap: 0.8rem 1.2rem; }
.c-cond {
  display: inline-flex; align-items: center; gap: .45em;
  padding: .45em .95em; cursor: pointer;
  font-size: 1.4rem; font-weight: 500;
  background: #fff; border: 1px solid var(--c-line); border-radius: 100px;
  transition: border-color .15s var(--ease), background-color .15s var(--ease);
}
.c-cond:hover { border-color: var(--c-ink-3); }
.c-cond:has(input:checked) {
  border-color: var(--c-primary); background: var(--c-primary-tint);
  color: var(--c-primary); font-weight: 700;
}
.c-cond input { width: 17px; height: 17px; margin: 0; accent-color: var(--c-primary); cursor: pointer; }

.p-filter__foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 1.6rem;
  margin-top: 1.8rem; padding-top: 1.8rem; border-top: 1px dashed var(--c-line);
}
.p-filter__count { font-size: 1.5rem; font-weight: 700; }
.p-filter__count b { color: var(--c-primary); font-size: 2rem; }

/* --- エリア別セクション --- */
.p-area { margin-bottom: 4rem; scroll-margin-top: 2.4rem; }
.p-area[hidden] { display: none; }
.p-area__head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 1.2rem;
  padding: 1rem 0 1.2rem;
  border-bottom: 2px solid var(--c-primary); margin-bottom: 1.6rem;
}
.p-area__title { font-size: 2rem; font-weight: 700; }
.p-area__num { font-size: 1.3rem; color: var(--c-ink-2); }
.p-area__top {
  margin-left: auto; font-size: 1.3rem; text-decoration: none;
  color: var(--c-ink-2);
}
.p-area__top:hover { color: var(--c-primary); text-decoration: underline; }

/* --- 一覧テーブル --- */
.c-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.c-table {
  width: 100%; border-collapse: collapse; font-size: 1.4rem;
  background: #fff;
  /* エリアごとに列幅がばらつかないよう、内容ではなく指定値で列幅を決める。
     幅を指定していない「住所」列が残りを受け取る。 */
  table-layout: fixed;
  /* セルの中は折り返してよい。銀行の共通CSSは画面幅1000px以下で表の外側
     （jquery.tagcontrol.js が付ける .table_wrap）を折り返し禁止にするため、
     それを受け継いで住所が切れたり電話番号に重なったりしないよう明示する
     （2026-10-13 ご指摘）。店番・ボタンなどの折り返し禁止は各列で指定している。 */
  white-space: normal;
}
.c-table caption { text-align: left; }
.c-table th, .c-table td {
  padding: 1.2rem 1.4rem; border: 1px solid var(--c-line-2);
  vertical-align: top; text-align: left;
}
.c-table thead th {
  background: var(--c-bg); font-size: 1.2rem; font-weight: 700;
  color: var(--c-ink-2); white-space: nowrap;
}
.c-table tbody tr:nth-child(even) { background: #fcfcfc; }
.c-table tbody tr:hover { background: var(--c-primary-tint); }
/* hidden 属性を付けた要素は、display を指定した部品でも必ず隠す。
   .c-notice は display:grid のため hidden だけでは消えず、店舗一覧を直接開いたときに
   空の「ご用件：」の枠が出ていた（2026-10-09 修正）。本案のページの中だけに効かせる。 */
.r-page [hidden] { display: none !important; }

/* 表の中の太字は、共通CSS（b・見出し）と同じく Medium の書体ファイルで表す。
   Regular に font-weight:700 を当てると擬似太字になり、Windows では1文字ごとに
   幅が広がって、列から数字がはみ出す（2026-10-09 ご指摘）。 */
.c-table__tenban, .c-table__name a, .c-table__tel a, .c-mark {
  font-family: 'NotosansCjkjp-Medium', sans-serif; font-weight: 400;
}
.c-table__tenban {
  font-variant-numeric: tabular-nums; color: var(--c-ink-2);
  white-space: nowrap; width: 4.5em;
}
.c-table__name { width: 11em; }
.c-table__name a { text-decoration: none; }
.c-table__name a:hover { text-decoration: underline; }
.c-table__yomi { display: block; font-size: 1.2rem; font-weight: 400; color: var(--c-ink-3); }
.c-table__addr { /* 幅指定なし＝残り幅を受け取る */ }
.c-table__tel { width: 9.5em; }
.c-table__tel a {
  color: var(--c-ink);
  text-decoration: underline; text-decoration-style: dotted; text-underline-offset: .2em;
}
.c-table__tel a:hover { color: var(--c-primary); text-decoration-style: solid; }
.c-table__hours {
  width: 9em;
  font-variant-numeric: tabular-nums; line-height: 1.6;
}
/* 「9:00〜12:00」「昼休み」などの1区切り。列が狭いときは区切りの間でだけ改行する */
.c-t { white-space: nowrap; }
.c-table__lunch { display: block; margin-top: 0.32rem; font-size: 1.1rem; color: var(--c-warn); }
.c-table__sub { display: block; margin-top: 0.32rem; font-size: 1.1rem; color: var(--c-ink-3); }
.c-cell { display: block; }
.c-marks { display: flex; flex-wrap: wrap; gap: 0.32rem; }
.c-table__svc { width: 8em; }
.c-table__act { white-space: nowrap; width: 7.5em; }

.c-mark {
  display: inline-block; margin: 0 .15em .2em 0;
  padding: .12em .5em; border-radius: var(--r-sm);
  font-size: 1.1rem; white-space: nowrap;
}
.c-mark--kashikinko { color: #4a3a12; background: #f6efdc; }
.c-mark--gaitame    { color: var(--c-info); background: var(--c-info-tint); }
.c-mark--bf         { color: var(--c-online); background: var(--c-online-tint); }
.c-mark--inshop     { color: var(--c-primary); background: var(--c-primary-tint); }
.c-mark--outshop    { color: var(--c-ink-2); background: var(--c-bg); }
.c-mark--none       { color: var(--c-ink-3); }

.c-actbtns { display: grid; gap: 0.48rem; }
.c-actbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: .3em;
  padding: .4em .85em; text-decoration: none; white-space: nowrap;
  font-size: 1.2rem; font-weight: 700;
  border-radius: 100px; border: 1px solid var(--c-primary); color: var(--c-primary);
  background: #fff;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.c-actbtn:hover { background: var(--c-primary); color: #fff; }
.c-actbtn--sub { border-color: var(--c-line); color: var(--c-ink-2); }
.c-actbtn--sub:hover { background: var(--c-ink-2); border-color: var(--c-ink-2); color: #fff; }

/* モバイル：テーブルをカードに */
@media (max-width: 767px) {
  .c-tablewrap { overflow-x: visible; }
  .c-table__name, .c-table__addr, .c-table__tel,
  .c-table__hours, .c-table__svc { width: auto; min-width: 0; }
  .c-table__hours { white-space: normal; }
  .c-table, .c-table tbody, .c-table td { display: block; width: 100%; }
  /* カード表示では、横スクロール用の最小幅（JSで行内に指定）を外す */
  .c-table { min-width: 0 !important; }
  .c-table thead, .c-table colgroup { display: none; }

  /* 1行を1枚のカードに。並び順は 店舗名 → 店番 → 各項目 → ボタン */
  .c-table tbody tr {
    display: flex; flex-direction: column; width: 100%;
    margin-bottom: 1.2rem; padding: 1.4rem 1.6rem;
    border: 1px solid var(--c-line); border-radius: var(--r-md);
    background: #fff !important;
  }
  .c-table td {
    border: 0; padding: 0.4rem 0;
    display: grid; grid-template-columns: 5.5em 1fr; gap: 0.16rem 1.2rem;
    align-items: start;
  }
  .c-table td::before {
    content: attr(data-label); font-size: 1.1rem; font-weight: 700;
    color: var(--c-ink-3); padding-top: .35em;
  }
  .c-table td:empty { display: none; }

  .c-table__name {
    order: -2; grid-template-columns: 1fr; font-size: 1.7rem;
    padding-bottom: 0.8rem !important;
  }
  .c-table__name::before { display: none; }
  .c-table__yomi { display: inline; margin-left: .5em; }
  .c-table__tenban { order: -1; width: auto; font-weight: 400; }
  .c-table__tenban::before { padding-top: .15em; }

  .c-table__act {
    width: auto; order: 9; grid-template-columns: 1fr;
    padding-top: 1.2rem !important; margin-top: 0.6rem;
    border-top: 1px dashed var(--c-line-2);
  }
  .c-table__act::before { display: none; }
  .c-actbtns { grid-auto-flow: column; grid-auto-columns: 1fr; }
  .c-actbtn { padding: .55em .85em; font-size: 1.3rem; }
}

/* --- 凡例 --- */
.c-legend {
  display: grid; gap: 0.8rem 2.4rem; padding: 2rem;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  background: var(--c-bg-soft); border: 1px solid var(--c-line);
  border-radius: var(--r-md); font-size: 1.3rem;
}
.c-legend dt { display: inline; font-weight: 700; }
.c-legend > div { display: flex; gap: 0.8rem; align-items: baseline; }
.c-legend dd { color: var(--c-ink-2); }

/* --- 該当なし --- */
.p-loc__empty {
  padding: 4.8rem 2.4rem; text-align: center;
  background: var(--c-bg-soft); border: 1px dashed var(--c-line);
  border-radius: var(--r-md);
}
.p-loc__empty[hidden] { display: none; }
.p-loc__empty p { font-size: 1.6rem; font-weight: 700; margin-bottom: 0.8rem; }

/* =========================================================================
   21. 実サイト共通パーツとの調整
   ========================================================================= */

/* 共通の .main は上下40pxの余白を持つが、本ページは独自のヒーローから始めるため打ち消す */
.main.r-page { padding-top: 0; padding-bottom: 0; }

/* ヒーローを画面幅いっぱいに広げる（.l-container の内側に置かないため） */
.r-page > .p-hero:first-child { margin-top: 0; }

/* 本ページでは共通CSSの本文用クラス main_page を付けていません。
   main_page は CMS の自由入力本文向けに h2〜h5・p・ul・ol を装飾するため、
   独自に組んだ部品（.c-hd__title など）と競合します。
   構造上必要な .main のみを付け、余白は上記で打ち消しています。 */

/* 固定フッターCTAの分だけ、実サイトのフッター下に余白を足す（スマホのみ） */
@media (max-width: 767px) {
  .footer { padding-bottom: 76px; }
}

/* =========================================================================
   22. 一覧版（index2.html）
   ========================================================================= */

/* --- 入口の2択（ナビの代わり） --- */
.p-entry {
  display: grid; gap: 1.6rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  margin-top: 2.4rem;
}
.p-entry__item {
  display: grid; gap: .6rem; align-content: start;
  padding: 2.4rem clamp(1.6rem, 3vw, 2.8rem);
  text-decoration: none; color: inherit;
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg);
  box-shadow: var(--sd-1);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.p-entry__item:hover {
  transform: translateY(-3px); box-shadow: var(--sd-2); border-color: var(--c-primary);
}
.p-entry__badge {
  justify-self: start; padding: .3em 1em; border-radius: 100px;
  font-size: 1.2rem; font-weight: 700;
}
.p-entry__item--online .p-entry__badge { color: var(--c-online); background: var(--c-online-tint); }
.p-entry__item--visit  .p-entry__badge { color: var(--c-primary); background: var(--c-primary-tint); }
.p-entry__num { font-size: 3.6rem; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
.p-entry__num small { font-size: 1.6rem; font-weight: 700; margin-left: .2em; }
.p-entry__item--online .p-entry__num { color: var(--c-online); }
.p-entry__item--visit  .p-entry__num { color: var(--c-primary); }
.p-entry__title { font-size: 1.9rem; font-weight: 700; line-height: 1.5; }
.p-entry__desc { font-size: 1.4rem; color: var(--c-ink-2); line-height: 1.8; }
.p-entry__go {
  margin-top: .4rem; font-size: 1.4rem; font-weight: 700; color: var(--c-primary);
}
.p-entry__go::after { content: " →"; }

/* --- 絞り込みバー --- */
.p-listfilter {
  padding: 2rem clamp(1.6rem, 3vw, 2.4rem);
  background: var(--c-bg-soft);
  border: 1px solid var(--c-line); border-radius: var(--r-md);
}
.p-listfilter__row + .p-listfilter__row {
  margin-top: 1.8rem; padding-top: 1.8rem; border-top: 1px dashed var(--c-line);
}
.p-listfilter__label {
  display: block; margin-bottom: 1rem;
  font-size: 1.3rem; font-weight: 700; color: var(--c-ink-2);
}
.p-listfilter__foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 1.6rem;
  margin-top: 1.8rem; padding-top: 1.8rem; border-top: 1px dashed var(--c-line);
}
.p-listfilter__count { font-size: 1.5rem; font-weight: 700; }
.p-listfilter__count b { color: var(--c-primary); font-size: 2rem; }

/* お客さま区分の切り替え */
.c-seg {
  display: inline-flex; padding: .4rem; background: #fff;
  border: 1px solid var(--c-line); border-radius: 100px;
}
.c-seg__btn {
  padding: .7em 1.6em; border: 0; background: none; cursor: pointer;
  font-size: 1.4rem; font-weight: 700; color: var(--c-ink-2); border-radius: 100px;
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.c-seg__btn:hover { color: var(--c-primary); }
/* 選択中は赤の塗りにする（aria-pressed / aria-selected のどちらでも同じ見た目） */
.c-seg__btn[aria-pressed="true"],
.c-seg__btn[aria-selected="true"] { background: var(--c-primary); color: #fff; }
@media (max-width: 599px) {
  .c-seg { display: grid; grid-template-columns: 1fr 1fr; width: 100%; border-radius: var(--r-md); }
  .c-seg__btn { padding: .8em .6em; font-size: 1.3rem; border-radius: var(--r-sm); }
}

/* カテゴリのチップ */
.c-chips { display: flex; flex-wrap: wrap; gap: .6rem; }
.c-chip {
  display: inline-flex; align-items: baseline; gap: .4em;
  padding: .5em 1.2em; cursor: pointer;
  font-size: 1.4rem; font-weight: 700; color: var(--c-ink);
  background: #fff; border: 1px solid var(--c-line); border-radius: 100px;
  transition: border-color .15s var(--ease), background-color .15s var(--ease), color .15s var(--ease);
}
.c-chip:hover { border-color: var(--c-primary); color: var(--c-primary); }
.c-chip[aria-pressed="true"] {
  background: var(--c-primary); border-color: var(--c-primary); color: #fff;
}
.c-chip__num { font-size: 1.2rem; font-weight: 400; color: var(--c-ink-3); }
.c-chip[aria-pressed="true"] .c-chip__num { color: rgba(255,255,255,.8); }

/* --- カテゴリ見出しつきの一覧 --- */
.p-list__cat + .p-list__cat { margin-top: 2.8rem; }
.p-list__catname {
  display: flex; align-items: baseline; gap: .8rem;
  padding-bottom: .8rem; margin-bottom: 1.2rem;
  font-size: 1.6rem; font-weight: 700;
  border-bottom: 1px solid var(--c-line);
}
.p-list__catnum { font-size: 1.2rem; font-weight: 400; color: var(--c-ink-3); }
.p-list__empty {
  padding: 4rem 2.4rem; text-align: center; color: var(--c-ink-2);
  background: var(--c-bg-soft); border: 1px dashed var(--c-line); border-radius: var(--r-md);
}
.l-section[data-empty="true"] .p-list__count { opacity: .5; }

/* 既存の .c-acc__badge に、一覧版で使う2種類を追加 */
.c-acc__badge--contact   { color: #7a4a00; background: #fdf1de; }
.c-acc__badge--noreserve { color: var(--c-ink-2); background: var(--c-bg); }

/* アコーディオンを開いたときの1行目（概要） */
.c-acc__desc { margin-bottom: 1.6rem; font-size: 1.5rem; line-height: 1.9; }

/* セクション見出しの件数 */
.p-list__count {
  display: inline-flex; align-items: baseline; gap: .3em;
  margin-left: .8rem; font-size: 1.4rem; font-weight: 400; color: var(--c-ink-2);
}
.p-list__count b { font-size: 2.2rem; font-weight: 700; color: var(--c-primary); }
.l-section--online .p-list__count b { color: var(--c-online); }

/* =========================================================================
   23. お客さま区分の切り替え（A案・C案）
   ========================================================================= */

/* --- ヒーローのカード上部のタブ --- */
.p-hero__figtabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: .4rem;
  padding: .4rem; margin-bottom: 1.6rem;
  background: var(--c-bg); border-radius: 100px;
}
.p-hero__figtab {
  padding: .8em .6em; cursor: pointer; border: 0; background: none;
  font-size: 1.3rem; font-weight: 700; color: var(--c-ink-2);
  border-radius: 100px; white-space: nowrap;
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.p-hero__figtab:hover { color: var(--c-primary); }
.p-hero__figtab[aria-selected="true"] {
  background: var(--c-primary); color: #fff; box-shadow: var(--sd-1);
}

/* --- ご用件ナビの見出し：お客さま区分の選択を主役にする --- */
.p-navi__seglabel {
  margin-bottom: .8rem;
  font-size: 1.3rem; font-weight: 700; color: rgba(255, 255, 255, .9);
}
/* 区分の切り替えは一覧版（B案）と同じ .c-seg を使う。
   選択中だけが赤く塗られるため、どちらが選ばれているかが一目で分かる。 */
.p-navi__head .c-seg { border-color: transparent; box-shadow: var(--sd-1); }
@media (max-width: 599px) {
  .p-navi__head .c-seg { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .p-navi__head .c-seg__btn { padding: .8em .4em; font-size: 1.3rem; }
}

/* --- ヒーローの「よくあるご用件」をリンクにする --- */
.p-hero__figurenote {
  margin: -.4rem 0 1.2rem; font-size: 1.2rem; color: var(--c-ink-3);
}
.p-hero__pick {
  /* ラベルが伸び、タグと矢印は常に右端で揃う */
  display: flex; align-items: center; gap: 1.2rem;
  width: 100%; padding: .2rem 0;
  text-decoration: none; color: inherit;
  transition: color .15s var(--ease);
}
.p-hero__pick > span:first-child {
  flex: 1 1 auto; min-width: 0;
  text-decoration: underline; text-decoration-color: transparent;
  text-underline-offset: .25em; transition: text-decoration-color .15s var(--ease);
}
.p-hero__pick .p-hero__tag { flex: 0 0 auto; }
.p-hero__pick:hover { color: var(--c-primary); }
.p-hero__pick:hover > span:first-child { text-decoration-color: currentColor; }
.p-hero__pick::after {
  content: ""; flex: none; width: 7px; height: 7px; margin-left: -.2rem;
  border-top: 2px solid var(--c-ink-3); border-right: 2px solid var(--c-ink-3);
  transform: rotate(45deg); transition: border-color .15s var(--ease);
}
.p-hero__pick:hover::after { border-color: var(--c-primary); }
.p-hero__tag--partial { color: var(--c-info); background: var(--c-info-tint); border: 1px solid #cfe0f5; }

/* =========================================================================
   24. 来店予約の流れ（イラストつき・D案）
   ========================================================================= */
.c-steps3 {
  display: grid; gap: 2.4rem 1.6rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 767px) { .c-steps3 { grid-template-columns: 1fr; gap: 3.2rem; } }

.c-steps3__item { position: relative; }
/* ステップ間の矢印 */
.c-steps3__item:not(:last-child)::after {
  content: ""; position: absolute; top: 9.6rem; right: -1.2rem;
  width: 13px; height: 13px;
  border-top: 2px solid var(--c-primary); border-right: 2px solid var(--c-primary);
  transform: rotate(45deg);
}
@media (max-width: 767px) {
  .c-steps3__item:not(:last-child)::after {
    top: auto; bottom: -2.4rem; right: 50%;
    transform: translateX(50%) rotate(135deg);
  }
}

/* ステップ全体をその手順へのリンクにする */
.c-steps3__link {
  display: grid; gap: .8rem; justify-items: center;
  padding: 1.6rem 1.2rem 1.8rem;
  text-decoration: none; color: inherit; text-align: center;
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-md);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.c-steps3__link:hover {
  transform: translateY(-2px); box-shadow: var(--sd-2); border-color: var(--c-primary);
}
.c-steps3__no {
  font-size: 1.3rem; font-weight: 700; letter-spacing: .08em; color: var(--c-primary);
}
.c-steps3__fig { display: block; width: 100%; }
.c-steps3__fig svg { display: block; width: 100%; max-width: 18rem; height: auto; margin-inline: auto; }
.c-steps3__title { font-size: 1.7rem; font-weight: 700; }
.c-steps3__link:hover .c-steps3__title { color: var(--c-primary); text-decoration: underline; }

.c-steps3__desc {
  margin-top: 1rem; padding-inline: .4rem;
  font-size: 1.3rem; color: var(--c-ink-2); line-height: 1.9;
}

/* 図の配色（おきぎんの赤を基調に、面はグレーで） */
.c-steps3__fig .is-card   { fill: #fff; stroke: #8d94a5; stroke-width: 2; }
.c-steps3__fig .is-tab    { fill: #8d94a5; }
.c-steps3__fig .is-line   { fill: #d7dae2; }
.c-steps3__fig .is-dot    { fill: #d7dae2; }
.c-steps3__fig .is-accent { fill: var(--c-primary); }
.c-steps3__fig .is-accent2{ fill: var(--c-primary); }
.c-steps3__fig .is-check  { fill: none; stroke: #fff; stroke-width: 2.4;
                            stroke-linecap: round; stroke-linejoin: round; }

/* 結果パネルのボタン群。複数あるときは縦に並べ、幅を揃える */
.c-panel__btns { display: flex; flex-direction: column; align-items: flex-start; gap: .8rem; }
.c-panel__btns .c-btn { min-width: min(100%, 32rem); justify-content: center; }

/* 来店予約の注記（ご用件ナビから引き継いだご用件を、その店舗で取り扱っていない場合） */
.c-actnote {
  display: block; margin-top: .4rem;
  font-size: 1.1rem; line-height: 1.5; color: var(--c-ink-2);
}

/* --- 画面パターンの切り替え（検証用） ---
   来店予約ページのパターン比較用。tools/sync_switch.py が各ページへ配ります。
   CMSへ書き出すときは tools/build_cms.py が OFG:SWITCH ごと取り除きます。 */
.p-switch {
  display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.6rem;
  padding: 1rem 0; font-size: 1.3rem;
}
.p-switch__label {
  display: inline-flex; align-items: center; gap: .8rem;
  font-weight: 700; color: var(--c-ink-2);
}
.p-switch__tag {
  padding: .2em .7em; border-radius: 100px;
  font-size: 1.1rem; font-weight: 700;
  color: var(--c-ink-2); background: var(--c-bg-2, #f2f2f2);
  border: 1px solid var(--c-line);
}
.p-switch__links { display: flex; flex-wrap: wrap; gap: .6rem; }
.p-switch__link {
  padding: .4em 1.2em; text-decoration: none; border-radius: 100px;
  font-weight: 700; color: var(--c-ink-2);
  background: #fff; border: 1px solid var(--c-line);
}
.p-switch__link:hover { border-color: var(--c-primary); color: var(--c-primary); }
.p-switch__link[aria-current="page"] {
  background: var(--c-ink); border-color: var(--c-ink); color: #fff;
}
.p-switch__note { font-size: 1.2rem; color: var(--c-ink-2); }
@media (max-width: 599px) {
  .p-switch { gap: .6rem 1rem; }
  .p-switch__note { flex: 1 1 100%; }
}

/* 採用外の案であることの注記（検証用。公開時は削除してください）。
   別案のページ（index2/3/4.html・shops.html）だけで使います。 */
.p-archived {
  padding: 1rem 0;
  font-size: 1.2rem; color: var(--c-ink-2);
}