@charset "utf-8";
/* salon.css — サロントップ（サロン情報タブ）専用 */

/* 空白の無い長い英数字（店名・クーポン名・URL など）でも枠からはみ出さず折り返す（中の共通部品にも継承される） */
.p-salon { overflow-wrap: anywhere; }

.p-salon-sec > .c-heading { margin-top: 0; }

/* 「すべて見る」: PC は見出し右のリンクを使うので、下のリンクは --always だけ出す */
.p-salon-more { display: none; margin-top: 10px; font-size: 12px; text-align: right; }
.p-salon-more__count { white-space: nowrap; }
.p-salon-more--always { display: block; margin-top: 16px; text-align: center; }
.p-salon-more--always .c-btn { min-width: 360px; font-weight: normal; }
.p-salon-more--always .c-btn::after { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 0 0 8px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); }
.p-salon-more--always .c-btn { flex-direction: row; }

/* ---------- キャッチコピー ---------- */
.p-salon-catch { margin: 0 0 16px; padding: 10px 14px; border-left: 4px solid var(--c-primary); background: var(--c-primary-pale); color: var(--c-heading); font-size: 16px; font-weight: bold; line-height: 1.55; }

/* ---------- 写真スライド + リード文 ---------- */
.p-salon-intro { display: flex; align-items: flex-start; gap: 24px; }
.p-salon-slide { flex: 0 0 460px; min-width: 0; }
.p-salon-slide__stage { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border: 1px solid var(--c-border-light); background: var(--c-bg-soft); }
.p-salon-slide__list li { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
.p-salon-slide__list li.is-current { opacity: 1; visibility: visible; }
.p-salon-slide__list img { width: 100%; height: 100%; object-fit: cover; }
.p-salon-slide__arrow { position: absolute; top: 50%; width: 34px; height: 56px; margin-top: -28px; padding: 0; border: 0; background: rgba(61, 52, 46, .5); color: #fff; transition: background-color .12s; }
.p-salon-slide__arrow:hover { background: rgba(61, 52, 46, .78); }
.p-salon-slide__arrow::before { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; }
.p-salon-slide__arrow--prev { left: 0; border-radius: 0 3px 3px 0; }
.p-salon-slide__arrow--prev::before { transform: translate(-30%, -50%) rotate(-135deg); }
.p-salon-slide__arrow--next { right: 0; border-radius: 3px 0 0 3px; }
.p-salon-slide__arrow--next::before { transform: translate(-70%, -50%) rotate(45deg); }
.p-salon-slide__count { position: absolute; right: 8px; bottom: 8px; padding: 1px 9px; border-radius: 10px; background: rgba(61, 52, 46, .72); color: #fff; font-family: var(--font-latin); font-size: 11px; line-height: 18px; letter-spacing: .04em; }
.p-salon-slide__caption { min-height: 19px; margin-top: 6px; color: #555; font-size: 12px; line-height: 1.6; }
.p-salon-slide__thumbs { display: flex; gap: 6px; margin-top: 6px; }
.p-salon-slide__thumbs li { flex: 0 0 84px; }
.p-salon-slide__thumbs button { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0; overflow: hidden; border: 2px solid transparent; background: var(--c-bg-soft); opacity: .62; transition: opacity .12s, border-color .12s; }
.p-salon-slide__thumbs button:hover { opacity: 1; }
.p-salon-slide__thumbs button.is-current { border-color: var(--c-primary); opacity: 1; }
.p-salon-slide__thumbs img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.p-salon-intro__text { flex: 1; min-width: 0; }
.p-salon-lead { line-height: 1.9; }
.p-salon-lead--empty { padding: 14px 16px; border: 1px dashed var(--c-border); border-radius: var(--radius); background: var(--c-bg-soft); color: var(--c-sub); font-size: 12px; line-height: 1.8; }
.p-salon-quick { margin-top: 14px; padding-top: 10px; border-top: 1px dotted var(--c-border); font-size: 12px; }
.p-salon-quick > div { display: flex; gap: 10px; padding: 2px 0; }
.p-salon-quick dt { flex: 0 0 5.5em; color: var(--c-sub); }
.p-salon-quick dd { min-width: 0; }
.p-salon-chips { margin-top: 12px; }

/* ---------- 特集別アピール ---------- */
.p-salon-appeals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.p-salon-appeals--single { grid-template-columns: minmax(0, 1fr); }
.p-salon-appeal { display: flex; flex-direction: column; border: 1px solid var(--c-border); background: #fff; }
.p-salon-appeal__title { padding: 7px 12px; border-left: 4px solid var(--c-primary); background: var(--c-primary-pale); color: var(--c-heading); font-size: 14px; font-weight: bold; line-height: 1.5; }
.p-salon-appeal__title a { color: inherit; }
.p-salon-appeal__body { flex: 1; display: flex; gap: 12px; padding: 12px; }
.p-salon-appeal__photo { flex: 0 0 90px; align-self: flex-start; border: 1px solid var(--c-border-light); }
.p-salon-appeal__text { flex: 1; min-width: 0; }
.p-salon-appeal__comment { font-size: 12px; line-height: 1.75; }
.p-salon-appeal__feature { margin-top: 6px; font-size: 11px; }
.p-salon-appeal__feature .c-link-arrow { white-space: normal; }
.p-salon-appeal__coupon { margin: 0 12px; padding: 9px 0 12px; border-top: 1px dashed var(--c-border); }
.p-salon-appeal__coupon-name { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; font-weight: bold; line-height: 1.5; }
.p-salon-appeal__coupon-name .c-label { margin-top: 0; }
.p-salon-appeal__coupon-name a { min-width: 0; }
.p-salon-appeal__coupon-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 7px; }
.p-salon-appeal__price { color: var(--c-price); font-size: 16px; font-weight: bold; white-space: nowrap; }
.p-salon-appeal__coupon-foot .c-btn { min-height: 30px; padding: 4px 14px; font-size: 12px; }
.p-salon-appeal__reason { min-width: 0; color: var(--c-sub); font-size: 11px; line-height: 1.5; text-align: right; }

/* ---------- こだわり（抜粋） ---------- */
.p-salon-points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.p-salon-point { display: flex; gap: 12px; min-width: 0; padding: 12px; border: 1px solid var(--c-border); background: #fff; }
.p-salon-point__photo { flex: 0 0 150px; align-self: flex-start; }
.p-salon-point__body { flex: 1; min-width: 0; }
.p-salon-point__title { color: var(--c-heading); font-size: 14px; font-weight: bold; line-height: 1.5; }
.p-salon-point__text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; margin-top: 4px; color: #555; font-size: 12px; line-height: 1.7; }

/* ---------- サロンからの一言 ---------- */
.p-salon-message { display: flex; align-items: flex-start; gap: 22px; padding: 14px 16px; border: 1px solid var(--c-border); background: var(--c-bg-soft); }
.p-salon-message__who { flex: 0 0 132px; text-align: center; }
.p-salon-message__who .c-thumb { width: 92px; margin: 0 auto; }
.p-salon-message__who .c-thumb { border: 1px solid var(--c-border-light); }
.p-salon-message__role { margin-top: 6px; color: var(--c-sub); font-size: 10px; line-height: 1.4; }
.p-salon-message__name { font-size: 13px; font-weight: bold; line-height: 1.5; }
.p-salon-message__body { position: relative; flex: 1; min-width: 0; padding: 14px 16px; border: 1px solid var(--c-border); border-radius: 6px; background: #fff; line-height: 1.9; }
.p-salon-message__body::before { content: ""; position: absolute; left: -7px; top: 26px; width: 12px; height: 12px; border-left: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); background: #fff; transform: rotate(45deg); }
.p-salon-message--nowho .p-salon-message__body::before { content: none; }

/* ---------- サロンの雰囲気 ---------- */
.p-salon-mood { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.p-salon-mood--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.p-salon-mood .c-thumb { border: 1px solid var(--c-border-light); }
.p-salon-mood p { margin-top: 5px; color: #555; font-size: 11px; line-height: 1.55; }

/* ---------- サロンの利用傾向 ---------- */
.p-salon-trends { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--c-border); background: #fff; }
.p-salon-trends--single { grid-template-columns: minmax(0, 1fr); }
.p-salon-trends__col { min-width: 0; padding: 14px 18px 16px; }
.p-salon-trends__col + .p-salon-trends__col { border-left: 1px solid var(--c-border-light); }
.p-salon-trends__label { margin: 18px 0 7px; color: var(--c-heading); font-size: 12px; font-weight: bold; }
.p-salon-trends__label:first-child { margin-top: 0; }
.p-salon-trends__price { display: flex; gap: 10px; }
.p-salon-trends__price > div { flex: 1; min-width: 0; padding: 8px 12px 9px; border-radius: 4px; background: var(--c-bg-soft); }
.p-salon-trends__price dt { color: var(--c-sub); font-size: 11px; }
.p-salon-trends__price dd { color: var(--c-heading); font-family: var(--font-latin); font-size: 21px; font-weight: bold; line-height: 1.3; }
.p-salon-trends__rank li { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; border-top: 1px dotted var(--c-border); font-size: 12px; line-height: 1.5; }
.p-salon-trends__rank li:first-child { border-top: 0; padding-top: 0; }
.p-salon-trends__no { flex: 0 0 18px; height: 18px; border-radius: 50%; background: var(--c-heading); color: #fff; font-family: var(--font-latin); font-size: 11px; font-weight: bold; line-height: 18px; text-align: center; }

/* 帯グラフ（100%積み上げ）。区切りは 2px の白い隙間、値は凡例に必ず出す */
.p-ratio { display: flex; gap: 2px; height: 22px; }
.p-ratio__seg { display: flex; align-items: center; justify-content: center; min-width: 3px; color: #fff; font-family: var(--font-latin); font-size: 11px; font-weight: bold; line-height: 1; }
.p-ratio__seg:first-child { border-radius: 4px 0 0 4px; }
.p-ratio__seg:last-child { border-radius: 0 4px 4px 0; }
.p-ratio__seg:only-child { border-radius: 4px; }
.p-ratio-legend { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 7px; color: #555; font-size: 11px; }
.p-ratio-legend li { display: inline-flex; align-items: center; white-space: nowrap; }
.p-ratio-legend b { margin-left: 4px; color: var(--c-text); font-family: var(--font-latin); font-size: 12px; }
.p-ratio__key { flex: none; width: 10px; height: 10px; margin-right: 5px; border-radius: 2px; }
/* 性別 = 分類色（ブランドのローズ / ブルー / グレー）、年代 = アクセント色相の濃淡（淡→濃。順序が色で読める） */
.p-salon-trends { --viz-other: #a8a099; --viz-age1: #eda55a; --viz-age2: #dd8a2c; --viz-age3: #bf6d12; --viz-age4: #955008; --viz-age5: #6b3602; }
.p-ratio__seg--female { background: var(--c-primary); }
.p-ratio__seg--male { background: var(--c-sat); }
.p-ratio__seg--other { background: var(--viz-other); }
.p-ratio__seg--age1 { background: var(--viz-age1); color: var(--c-heading); }
.p-ratio__seg--age2 { background: var(--viz-age2); color: var(--c-heading); }
.p-ratio__seg--age3 { background: var(--viz-age3); }
.p-ratio__seg--age4 { background: var(--viz-age4); }
.p-ratio__seg--age5 { background: var(--viz-age5); }

/* ---------- CHECK スタイル / フォトギャラリー ---------- */
.p-salon-check { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.p-salon-check__item { display: flex; gap: 12px; min-width: 0; padding: 10px; border: 1px solid var(--c-border); background: #fff; }
.p-salon-check__photo { position: relative; flex: 0 0 102px; align-self: flex-start; }
.p-salon-check__photo .c-thumb { border: 1px solid var(--c-border-light); }
.p-salon-check__photo .c-bookmark--icon { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; }
.p-salon-check__body { flex: 1; min-width: 0; }
.p-salon-check__meta { color: var(--c-sub); font-size: 11px; }
.p-salon-check__name { font-size: 13px; font-weight: bold; line-height: 1.45; }
.p-salon-check__comment { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin-top: 4px; color: #555; font-size: 11px; line-height: 1.6; }
.p-salon-check__stylist { margin-top: 5px; color: var(--c-sub); font-size: 11px; }

/* ---------- サロンデータ ---------- */
.p-salon-maplink { margin-left: 14px; font-size: 12px; }

/* ---------- 近隣サロン ---------- */
.p-salon-nearby { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.p-salon-nearby__item { display: flex; gap: 10px; min-width: 0; padding: 10px; border: 1px solid var(--c-border); background: #fff; }
.p-salon-nearby__photo { flex: 0 0 92px; align-self: flex-start; }
.p-salon-nearby__body { flex: 1; min-width: 0; }
.p-salon-nearby__genre { display: inline-block; padding: 0 6px; border: 1px solid var(--c-border); border-radius: 2px; background: var(--c-bg-soft); color: #6b5f56; font-size: 10px; line-height: 16px; }
.p-salon-nearby__name { margin-top: 3px; font-size: 13px; font-weight: bold; line-height: 1.45; }
.p-salon-nearby__area { margin-top: 2px; color: var(--c-sub); font-size: 11px; }

/* ==========================================================================
   スマホ（< 768px）
   ========================================================================== */
@media (max-width: 767px) {
  /* 見出し右の「すべて見る」は隠し、ブロックの下にリンクを出す */
  .p-salon-sec > .c-heading .c-heading__more { display: none; }
  .p-salon-more { display: block; margin-top: 12px; font-size: 13px; }
  .p-salon-more--always .c-btn { width: 100%; min-width: 0; font-size: 13px; }
  /* 件数は改行して小さく（「クーポン・メニューをすべて見る（クーポン10件／メ|ニュー18件）」のような途中改行を防ぐ） */
  .p-salon-more--always .c-btn { flex-wrap: wrap; justify-content: center; line-height: 1.4; padding-top: 7px; padding-bottom: 7px; }
  .p-salon-more--always .p-salon-more__count { order: 2; flex: 1 1 100%; margin-top: 1px; color: var(--c-sub); font-size: 11px; font-weight: normal; }
  .p-salon-lead--empty { font-size: 13px; }
  .p-salon-appeal__reason { flex: 1 1 100%; font-size: 12px; }

  .p-salon-catch { margin-bottom: 12px; padding: 9px 12px; font-size: 15px; }
  .p-salon-intro { display: block; }
  .p-salon-slide__thumbs li { flex: 1 1 0; }
  .p-salon-slide__arrow { width: 32px; height: 52px; margin-top: -26px; }
  .p-salon-intro__text { margin-top: 12px; }
  .p-salon-lead { line-height: 1.8; }
  .p-salon-quick { font-size: 13px; }

  .p-salon-appeals { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .p-salon-appeal { border-radius: 6px; overflow: hidden; }
  .p-salon-appeal__comment { font-size: 13px; }
  .p-salon-appeal__feature { font-size: 12px; }
  .p-salon-appeal__coupon-name { font-size: 13px; }
  .p-salon-appeal__coupon-foot { flex-wrap: wrap; justify-content: flex-end; }
  .p-salon-appeal__coupon-foot .c-btn { flex: 1 1 100%; min-height: 40px; font-size: 13px; }

  .p-salon-points { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .p-salon-point { border-radius: 6px; }
  .p-salon-point__photo { flex-basis: 110px; }
  .p-salon-point__text { -webkit-line-clamp: 3; font-size: 12px; }

  .p-salon-message { gap: 16px; padding: 12px; border-radius: 6px; }
  .p-salon-message__who { flex-basis: 84px; }
  .p-salon-message__who .c-thumb { width: 72px; }
  .p-salon-message__body { padding: 11px 12px; line-height: 1.8; }
  .p-salon-message__body::before { top: 20px; }

  .p-salon-mood, .p-salon-mood--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 8px; }
  .p-salon-mood p { font-size: 12px; }

  .p-salon-trends { grid-template-columns: minmax(0, 1fr); border-radius: 6px; }
  .p-salon-trends__col { padding: 12px 12px 14px; }
  .p-salon-trends__col + .p-salon-trends__col { border-left: 0; border-top: 1px solid var(--c-border-light); }
  .p-salon-trends__label { font-size: 13px; }
  .p-salon-trends__rank li { font-size: 13px; }
  .p-ratio { height: 24px; }
  .p-ratio-legend { font-size: 12px; }

  .p-salon-check { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .p-salon-check__item { border-radius: 6px; }
  .p-salon-check__photo { flex-basis: 84px; }
  .p-salon-check__name { font-size: 14px; }
  .p-salon-check__comment { -webkit-line-clamp: 2; font-size: 12px; }
  .p-salon-check__stylist { font-size: 12px; }

  .p-salon-maplink { display: inline-block; margin-left: 10px; }

  .p-salon-nearby { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .p-salon-nearby__item { border-radius: 6px; }
  .p-salon-nearby__name { font-size: 14px; }
}