/* =========================================================
   BLOOMEA サイト｜導入サロンストーリー専用スタイル (salon-story.css)
   ========================================================= */

/* 1. メインビジュアル */
.story-fv { padding: 0; position: relative; }
.story-fv-img {
  height: 400px;
  background: #eee;
  position: relative;
  overflow: hidden;
}
.story-fv-img picture { display: contents; }
.story-fv-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.story-fv-img::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60%;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.6));
}
.story-fv-copy { position: absolute; left: 24px; right: 24px; bottom: 40px; z-index: 2; color: #fff; text-align: left; }
.story-fv-copy .label { color: #fff; opacity: 0.9; font-size: 12px; font-weight: 500; letter-spacing: 0.2em; margin-bottom: 10px; }
.story-fv-copy h1 { color: #fff; margin-bottom: 14px; }
.story-fv-copy .lead {
  color: #fff; font-size: 13px; font-weight: 700;
  border-left: 2px solid #fff; padding-left: 12px; margin-bottom: 12px; line-height: 1.5;
}
.story-fv-copy p { color: #fff; font-size: 11px; letter-spacing: 0.01em; }

/* 2. サロン紹介 */
.salon-intro-head { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.owner-avatar { width: 84px; height: 84px; border-radius: 50%; flex-shrink: 0; overflow: hidden; }
.owner-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.salon-intro-head .name h3 { margin-bottom: 4px; }
.salon-intro-head .name p { font-size: 12px; color: #777; }

/* セクション内の小見出しラベル（大見出しと区別して小さく） */
.sub-label { font-size: 13px !important; letter-spacing: 0.18em; margin-top: 28px; margin-bottom: 12px; }
@media (min-width: 768px) { .sub-label { font-size: 13px !important; } }

/* 3. ハッシュタグ */
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { font-size: 12px; color: var(--c-accent); border: 1px solid var(--c-accent-border); background: var(--c-accent-tint); padding: 6px 14px; border-radius: 999px; letter-spacing: 0.03em; }

/* 4. 写真スライド（Global Networkと同じ：右→左に流れるフルブリード） */
.photo-slider {
  display: flex; gap: 16px; overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px; margin-bottom: 20px;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: 6vw;
  cursor: grab; overflow-anchor: none;
}
.photo-slider::-webkit-scrollbar { display: none; }
.photo-slide { flex: 0 0 78vw; aspect-ratio: 4 / 5; overflow: hidden; }
.photo-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* .slider-nav / .slider-btn / grab カーソルは common.css に集約 */

/* Salon Profile を白背景カード型に */
.profile-card {
  background: #fff; border-radius: 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
  padding: 28px 26px;
}
@media (min-width: 768px) { .profile-card { padding: 44px 44px; } }
/* カード内のオーナーの声（区切り線＋余白） */
.profile-voice { margin-top: 28px; border-top: 1px solid #eee; padding-top: 28px; }

.stars { color: var(--c-accent); font-size: 18px; letter-spacing: 2px; margin-top: 14px; }
.stars small { color: #777; font-size: 12px; letter-spacing: 0; margin-left: 8px; }

/* フルブリードの色付き帯は上下に余白を足し、他セクションとの間隔を広げて統一 */
.baa-section, .owner-parallax { margin-top: 40px; margin-bottom: 40px; }
@media (min-width: 1024px) {
  .baa-section, .owner-parallax { margin-top: 64px; margin-bottom: 64px; }
}

/* 5. Before > Action > After（ターコイズ帯＋白カード） */
/* スマホ：背景ターコイズは全面 */
.baa-section { max-width: none; background: #23968c; }
.baa-section .section-label { color: #fff; }
.baa-section h2 { color: #fff; }
.baa-section .section-label,
.baa-section h2,
.baa-section .baa-wrap { max-width: 1104px; margin-left: auto; margin-right: auto; }

.baa-block {
  display: grid; grid-template-columns: 96px 1fr; gap: 18px; align-items: start;
  background: #fff; border-radius: 16px; box-shadow: 0 12px 30px rgba(0,0,0,0.12);
  padding: 24px 22px;
}
.baa-ico { width: 96px; height: 96px; border-radius: 50%; overflow: hidden; }
.baa-ico img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 「取り組んだこと」のアイコンだけさらに大きく */
.baa-action { grid-template-columns: 124px 1fr; }
.baa-action .baa-ico { width: 124px; height: 124px; }
.baa-tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 3px 10px; margin-bottom: 10px; }
.baa-before .baa-tag { background: var(--c-accent-tint); color: var(--c-accent); }
.baa-action .baa-tag { background: #e6e6e6; color: #555; }
.baa-after .baa-tag { background: var(--c-primary); color: #fff; }
.check-list { list-style: none; display: grid; gap: 8px; }
.check-list li { font-size: 13px; padding-left: 22px; position: relative; color: #333; }
.check-list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--c-accent); font-weight: 700; }
.baa-arrow { display: flex; align-items: center; justify-content: center; padding: 6px 0; }
.baa-arrow::before {
  content: ""; width: 0; height: 0;
  border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 12px solid rgba(255,255,255,0.85);
}

/* 6. オーナーメッセージ（背景にパララックス画像／ks-styleのAbout同様） */
.owner-parallax {
  position: relative;
  max-width: none;                 /* 背景は全幅 */
  background-image: url("../images/salon-fv-pc.jpg");
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.owner-parallax.-story2 {
  background-image: url("../images/salon-fv-pc_2.jpg");
  background-size: cover;
  background-position: center;
}
.owner-parallax::before {          /* 暗いベールで白文字を読みやすく */
  content: ""; position: absolute; inset: 0;
  background: rgba(0,0,0,0.5); z-index: 0;
}
.owner-parallax > * { position: relative; z-index: 1; }
.owner-parallax .section-label,
.owner-parallax h2 { color: #fff; }
@media (min-width: 768px) {
  .owner-parallax {
    padding-left: max(48px, calc((100% - 1104px) / 2));
    padding-right: max(48px, calc((100% - 1104px) / 2));
  }
}
@media (min-width: 1024px) {
  .owner-parallax {
    padding-left: max(64px, calc((100% - 1152px) / 2));
    padding-right: max(64px, calc((100% - 1152px) / 2));
    background-attachment: fixed;   /* パララックス（PCのみ） */
  }
}

/* カードをやめ、暗い背景に白文字で直接（Aboutと同様） */
.owner-msg { background: transparent; border: none; box-shadow: none; padding: 0; max-width: 640px; }
.owner-parallax .owner-msg h4 { color: #fff; }
.owner-parallax .owner-msg p { color: rgba(255,255,255,0.92); }
.owner-parallax .owner-msg-head p { color: rgba(255,255,255,0.75); }
.owner-parallax .owner-sign { color: rgba(255,255,255,0.8); }
.owner-msg-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.owner-msg-head .owner-avatar { width: 64px; height: 64px; }
.owner-sign { text-align: right; font-size: 12px; color: #777; margin-top: 14px; }
/* メッセージ本文の下に置く署名（プロフィール） */
.owner-msg-sign { margin-top: 24px; margin-bottom: 0; }

/* 7. 担当者より（右側に打ち合わせ写真／右端ぴったり） */
/* スマホ：テキストの下に写真を全幅で */
.staff-photo { margin-top: 28px; border-radius: 16px; overflow: hidden; aspect-ratio: 3 / 2; }
.staff-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* メッセージ本文の下にプロフィール（アバター＋名前）を署名として配置 */
.staff-comment { display: block; }
.staff-sign { display: flex; align-items: center; gap: 14px; margin-top: 24px; }
.staff-avatar { width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0; overflow: hidden; }
.staff-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.staff-comment .staff-name { font-size: 13px; color: #555; margin-bottom: 0; }

/* 8. 打ち合わせ画像 */

/* 9. Q&A */
.qa-item { border-bottom: 1px solid #e8e8e8; padding: 20px 0; }
.qa-item:first-child { padding-top: 0; }
.qa-q, .qa-a { display: flex; gap: 12px; }
.qa-q { margin-bottom: 12px; }
.qa-mark {
  width: 26px; height: 26px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; border-radius: 50%;
}
.qa-q .qa-mark { background: var(--c-primary); color: #fff; }
.qa-a .qa-mark { background: var(--c-accent-tint); color: var(--c-accent); }
.qa-q h4 { margin-bottom: 0; padding-top: 3px; }
.qa-a p { padding-top: 3px; }

/* アコーディオン */
.qa-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; background: transparent; border: none; padding: 0; cursor: pointer;
  text-align: left; font-size: 14px; font-weight: 700; color: var(--c-text); font-family: inherit;
}
.qa-toggle b { color: var(--c-accent); margin-right: 6px; }
.qa-plus { font-style: normal; color: var(--c-accent); font-size: 16px; flex-shrink: 0; transition: transform 0.2s; }
.qa-acc.open .qa-plus { transform: rotate(45deg); }
.qa-body { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; }
.qa-acc.open .qa-body { max-height: 400px; }
.qa-body .qa-a { padding-top: 14px; }

/* 10. CTA … 角丸バナー(cta-card)は theme-accent.css の共通スタイルを使用 */

/* 関連リンク（画像付きカード） */
.other-stories { padding-top: 0; }
.story-cards { display: grid; grid-template-columns: 1fr; gap: 18px; }
.story-card {
  display: flex; align-items: stretch; gap: 0;
  background: #fff; border-radius: 16px; overflow: hidden;
  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
  text-decoration: none; color: var(--c-text);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.story-card:hover { box-shadow: 0 18px 40px rgba(0,0,0,0.14); transform: translateY(-2px); }
.story-card-img { flex: 0 0 34%; aspect-ratio: 4 / 3; overflow: hidden; }
.story-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.story-card-body { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 22px; }
.story-card-text { font-size: 14px; font-weight: 500; }
.story-card-arrow { color: var(--c-turq); flex-shrink: 0; }

/* =========================================================
   タブレット / PC（768px〜）
   ========================================================= */
@media (min-width: 768px) {
  .story-fv-img { height: 360px; }
  .story-fv-copy { left: 48px; right: 64px; bottom: 48px; max-width: 640px; }
  .story-fv-copy .lead { font-size: 15px; }
  .story-fv-copy p { font-size: 14px; }

  /* 写真スライド：3枚見えて左右が見切れる（Global Networkと同じ） */
  .photo-slide { flex-basis: 46vw; }
  .photo-slide:first-child { margin-left: -14vw; }

  /* PC：背景ターコイズは上部70%まで、残り30%は白 */
  .baa-section { background: linear-gradient(to bottom, #23968c 0 70%, #fff 70% 100%); }

  /* Before/Action/After を3カラム横並び（矢印を間に挟む） */
  .baa-wrap { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 16px; align-items: stretch; }
  .baa-arrow::before { transform: rotate(-90deg); }
  .baa-block {
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    text-align: center; border: none; border-radius: 16px; padding: 32px 24px;
    background: #fff; box-shadow: 0 12px 30px rgba(0,0,0,0.12);
  }
  /* 3枚のアイコン下端をそろえてラベル位置を合わせつつ、画像と文字を近づける
     （下marginは0にして余白を詰め、差分は上marginで吸収） */
  .baa-block .baa-ico { width: 148px; height: 148px; margin: 48px auto 0; }
  .baa-action .baa-ico { width: 196px; height: 196px; margin: 0 auto; }
  .baa-block .check-list { text-align: left; margin-top: 14px; }

  /* 関連ストーリーカードを2カラム */
  .story-cards { grid-template-columns: 1fr 1fr; gap: 24px; }

  /* 担当者より：左テキスト／右写真（写真は画面右端までフルブリード） */
  .staff-section { display: grid; grid-template-columns: 44% 1fr; gap: 48px; align-items: center; }
  .staff-photo {
    margin-top: 0; aspect-ratio: auto; height: 360px;
    border-radius: 16px 0 0 16px;
    margin-right: calc(-1 * max(48px, (100vw - 1104px) / 2));
  }
}

/* PC（1024px〜）：ks-styleと同じ高さに */
@media (min-width: 1024px) {
  .story-fv-img { height: 440px; }
  .staff-photo { height: 420px; margin-right: calc(-1 * max(64px, (100vw - 1152px) / 2)); }
  /* 写真スライド：3枚見えて左右が見切れる */
  .photo-slide { flex-basis: 30vw; }
  .photo-slide:first-child { margin-left: -16vw; }
}


/* オーナー評価（3部門・バッジUI／画像なし SVG+CSS） */
.rating { margin-top: 24px; }
.rating-title { display: flex; align-items: center; justify-content: center; gap: 14px; font-size: 15px; font-weight: 600; letter-spacing: 0.14em; color: var(--c-accent); margin-bottom: 22px; }
.rating-title::before, .rating-title::after { content: ""; height: 1px; width: 40px; background: var(--c-accent-border); }
.rating-list { list-style: none; display: grid; grid-template-columns: 1fr; gap: 26px; }
.rating-item { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.badge { position: relative; width: 84px; height: 84px; color: #d8b24a; }
.badge-burst { width: 100%; height: 100%; display: block; filter: drop-shadow(0 5px 10px rgba(0,0,0,0.14)); }
.badge-inner { fill: none; stroke: rgba(255,255,255,0.8); stroke-width: 1.3; }
.badge-score { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 22px; font-weight: 700; padding-bottom: 2px; }
.badge-ribbon { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); background: var(--c-cta); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; padding: 3px 24px; white-space: nowrap; clip-path: polygon(0 0, 100% 0, 88% 50%, 100% 100%, 0 100%, 12% 50%); }
.rating-item .rating-stars { color: #ddd; font-size: 18px; letter-spacing: 2px; line-height: 1; }
.rating-item .rating-stars .on { color: #d8b24a; }
.rating-item .rating-stars .half { position: relative; display: inline-block; width: 1em; color: #ddd; }
.rating-item .rating-stars .half::before { content: "★"; position: absolute; left: 0; top: 0; width: 50%; overflow: hidden; color: #d8b24a; }
.rating-label { font-size: 12px; font-weight: 500; color: var(--c-text); }
@media (min-width: 768px) {
  .rating-list { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .badge { width: 100px; height: 100px; }
  .badge-score { font-size: 26px; }
  .rating-item .rating-stars { font-size: 20px; }
  .rating-label { font-size: 14px; }
}