/* =========================================================
   BLOOMEA サイト｜Bloomea with K's style 専用スタイル (ks-style.css)
   ========================================================= */

/* 1. メインビジュアル */
.ks-fv { padding: 0; position: relative; }
.ks-fv-img {
  height: 280px;
  background: linear-gradient(180deg, #f5f5f5 0%, #dcdcdc 100%);
  position: relative;
  display: flex; align-items: center; justify-content: center; text-align: center;
}
.ks-fv-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ks-fv-img::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 55%;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.6));
  z-index: 1;
}
.ks-fv-copy { position: absolute; left: 24px; right: 24px; bottom: 40px; z-index: 2; color: #fff; text-align: left; }
/* ヒーローの英字ラベルは小さめのアイキャッチに（h1を主役に） */
.ks-fv-copy .label { color: #fff; opacity: 0.9; font-size: 12px; font-weight: 500; letter-spacing: 0.2em; margin-bottom: 10px; }
.ks-fv-copy h1 { color: #fff; }

/* ミッション ステートメント（横幅100%の帯＋左右に画像） */
.mission-section { max-width: none; padding: 0; position: relative; overflow: hidden; }
.mission-band {
  background: #23968c;             /* ターコイズ系の帯（白文字が読める深め） */
  color: #fff;
  text-align: center;
  padding: 56px 24px 60px;
}
.mission-eyebrow {
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: #fff; opacity: 0.85; margin-bottom: 20px;
}
.mission-catch {
  font-size: 24px; font-weight: 400; letter-spacing: 0.08em;
  line-height: 1.7; color: #fff; margin-bottom: 26px;
}
.mission-body {
  font-size: 14px; color: rgba(255,255,255,0.9); line-height: 2.0;
  max-width: 560px; margin: 0 auto 26px;
}
.mission-sign { font-size: 17px; letter-spacing: 0.12em; color: #fff; line-height: 1.5; }
.mission-sign span { display: block; font-size: 11px; color: rgba(255,255,255,0.75); letter-spacing: 0.14em; margin-top: 4px; }

/* スマホ・タブレット：帯の下に画像2枚を横並び */
.mission-images { display: grid; grid-template-columns: 1fr 1fr; }
.mission-img { height: 260px; overflow: hidden; }
.mission-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* PC：帯は全幅、左下・右上に画像を重ねる */
@media (min-width: 1024px) {
  .mission-section { padding: 64px 0; }
  .mission-band {
    position: relative; z-index: 1;
    min-height: 480px;
    padding: 100px 40px;
    display: flex; flex-direction: column; justify-content: center;
  }
  .mission-catch, .mission-body { max-width: 520px; margin-left: auto; margin-right: auto; }
  .mission-catch { font-size: 30px; }
  .mission-images { display: contents; }
  .mission-img { position: absolute; height: auto; z-index: 2; }
  .mission-img-left { left: 0; bottom: 28px; width: 26%; }
  .mission-img-left img { height: 440px; }
  .mission-img-right { right: 0; top: 28px; width: 20%; }
  .mission-img-right img { height: 480px; }
}

/* 2. 関わり方 図解 */
.diagram-img { width: 100%; height: auto; display: block; margin-top: 6px; }
/* Our Position：見出し中央・見出しと画像の間に余白・ボーダーなし */
.ks-position { text-align: center; }
.ks-position .diagram-img { margin-top: 32px; }
.diagram-note { font-size: 11px; color: #999; margin-top: 8px; }
/* 図解の下の説明文（3〜5行）：中央寄せ・読みやすい幅で */
.position-desc {
  margin: 28px auto 0;
  max-width: 720px;
  text-align: left;
  font-size: 14px;
  line-height: 2.0;
  color: var(--c-text);
}
/* PCは図解の横幅を小さめに中央寄せ */
@media (min-width: 768px) {
  .diagram-img { max-width: 760px; margin-left: auto; margin-right: auto; }
  .diagram-note { text-align: center; }
  .position-desc { margin-top: 36px; text-align: center; font-size: 15px; }
}

/* 3. About（背景画像＋パララックス） */
.ks-about {
  position: relative;
  max-width: none;                 /* 背景は全幅で見せる */
  background-image: url("../images/mv-pc.jpg");
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.ks-about::before {                /* 暗いベールで白文字を読みやすく */
  content: ""; position: absolute; inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 0;
}
.ks-about > * { position: relative; z-index: 1; }
/* 文字は白に */
.ks-about .section-label,
.ks-about h2,
.ks-about .intro-lead,
.ks-about p { color: #fff; }
/* 背景は全幅・中身は他セクションと同じ幅に揃える */
@media (min-width: 768px) {
  .ks-about {
    padding-left: max(48px, calc((100% - 1104px) / 2));
    padding-right: max(48px, calc((100% - 1104px) / 2));
  }
}
@media (min-width: 1024px) {
  .ks-about {
    padding-left: max(64px, calc((100% - 1152px) / 2));
    padding-right: max(64px, calc((100% - 1152px) / 2));
    background-attachment: fixed;   /* パララックス（PCのみ・iOS Safari回避） */
  }
}

.intro-lead { font-size: 18px; font-weight: 500; letter-spacing: 0.04em; line-height: 1.8; margin-bottom: 20px; }
@media (min-width: 768px) { .intro-lead { font-size: 21px; } }

/* 4. What We Do（左に画像・右にSTEPカード5つ） */
.wwd-lead { font-size: 18px; font-weight: 500; letter-spacing: 0.04em; line-height: 1.8; margin-bottom: 12px; }
.wwd-desc { font-size: 14px; color: #6a6a6a; line-height: 2.0; max-width: 760px; margin-bottom: 32px; }
@media (min-width: 768px) { .wwd-lead { font-size: 21px; } }
.wwd { display: grid; gap: 24px; margin-top: 8px; }
.wwd-visual { aspect-ratio: 4 / 5; overflow: hidden; }
.wwd-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wwd-steps { list-style: none; display: grid; gap: 14px; margin: 0; padding: 0; }
.wwd-step {
  display: flex;
  align-items: stretch;
  background: var(--c-surface);        /* オフホワイトのカード */
  border-radius: 12px;
  overflow: hidden;
}
.wwd-badge {
  flex: 0 0 104px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  padding-right: 26px;                  /* 尖り部分ぶんを差し引き、テキストをシェイプ中央に */
  background: #23968c;                  /* ターコイズ */
  clip-path: polygon(0 0, 74% 0, 100% 50%, 74% 100%, 0 100%);
}
.wwd-badge small { font-size: 10px; letter-spacing: 0.14em; color: #fff; }
.wwd-badge b { font-size: 26px; font-weight: 600; line-height: 1; color: #fff; }
.wwd-txt { flex: 1; padding: 18px 20px 18px 24px; }
.wwd-txt h4 { font-size: 16px; font-weight: 600; letter-spacing: 0.02em; margin-bottom: 6px; }
.wwd-txt p { font-size: 13px; color: #6a6a6a; line-height: 1.85; }

/* 5. Support（背景を薄いグレーの全幅帯に） */
.ks-support { background: #fafafa; max-width: none; }
@media (min-width: 768px) {
  .ks-support {
    padding-left: max(48px, calc((100% - 1104px) / 2));
    padding-right: max(48px, calc((100% - 1104px) / 2));
  }
}
@media (min-width: 1024px) {
  .ks-support {
    padding-left: max(64px, calc((100% - 1152px) / 2));
    padding-right: max(64px, calc((100% - 1152px) / 2));
  }
}

/* サポート体制カード（タイトル＋本文が上・画像が下／角丸＋やわらかい影） */
.support-cards { display: grid; gap: 28px; }
.support-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.06);
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.support-card-body { order: 0; flex: 1; padding: 36px 32px 0; }
.support-card-body h4 { text-align: center; font-size: 20px; font-weight: 600; letter-spacing: 0.02em; margin-bottom: 18px; }
.support-card-body p { font-size: 14px; color: #6a6a6a; line-height: 2.0; text-align: justify; }
.support-card-img { order: 1; margin-top: 26px; aspect-ratio: 3 / 2; overflow: hidden; }
.support-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* チーム：左にリード文＋説明文／右に大きな写真＋重ねて代表者写真 */
.support-team { margin-top: 88px; margin-bottom: 64px; display: grid; gap: 40px; }
.team-lead { font-size: 20px; font-weight: 500; line-height: 1.7; letter-spacing: 0.04em; margin-bottom: 18px; }
.team-desc { font-size: 14px; color: #6a6a6a; line-height: 2.0; }
/* スマホ：Our Missionと同様、2枚を横並び（左＝代表・右＝チーム） */
.team-photos { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; }
.team-photo-main { order: 2; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; }
.team-photo-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.team-photo-sub { order: 1; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; }
.team-photo-sub img { width: 100%; height: 100%; object-fit: cover; display: block; position: relative ; }
/* placeholder（wire-box）内テキストの見え方 */
.team-photo-sub.wire-box { font-size: 11px; line-height: 1.5; }
.team-photo-caption {
  text-align: right ;
  font-size: 14px ;
}

@media (min-width: 768px) {
  .support-team { grid-template-columns: 38% 1fr; gap: 56px; align-items: center; }
  .team-lead { font-size: 23px; }
  /* PC：横並びをやめ、大きな写真を右端フルブリード＋代表写真を重ねる */
  .team-photos { display: block; margin-right: calc(-1 * max(48px, (100vw - 1104px) / 2)); }
  .team-photo-main { order: 0; width: auto; aspect-ratio: auto; height: 380px; margin-left: 24%; border-radius: 16px 0 0 16px; }
  .team-photo-sub {
    order: 0; position: absolute; left: 2%; bottom: -40px;
    width: 210px; aspect-ratio: 3 / 4; border-radius: 16px;
    box-shadow: 0 18px 36px rgba(0,0,0,0.16);
  }
  .team-photo-caption {
  text-align: left;
  position: absolute ;
  left: 2% ;
  bottom: -70px ;
}
}

/* 6. 各国連携（見出し下のリード文＋説明文／縦長4:5の横スライド） */
.global-lead { font-size: 18px; font-weight: 500; letter-spacing: 0.04em; line-height: 1.8; margin-bottom: 12px; }
.global-desc { font-size: 14px; color: #6a6a6a; line-height: 2.0; max-width: 760px; margin-bottom: 36px; }
@media (min-width: 768px) { .global-lead { font-size: 21px; } }
.global-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;
}
.global-slider::-webkit-scrollbar { display: none; }
.global-slide { flex: 0 0 78vw; aspect-ratio: 4 / 5; }
.global-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 768px) {
  .global-slide { flex-basis: 46vw; }
  .global-slide:first-child { margin-left: -14vw; }   /* 左端を見切れさせる */
}
@media (min-width: 1024px) {
  .global-slide { flex-basis: 30vw; }                  /* 3枚見えて左右が見切れる */
  .global-slide:first-child { margin-left: -16vw; }
}

/* 5.5 Event（過去のイベント出展） */
.event-lead { font-size: 18px; font-weight: 500; letter-spacing: 0.04em; line-height: 1.8; margin-bottom: 12px; }
.event-desc { font-size: 14px; color: #6a6a6a; line-height: 2.0; max-width: 760px; margin-bottom: 36px; }
/* カードを画面幅いっぱい（フルブリード）で横スライド／両端が見切れる */
.event-grid {
  display: flex; gap: 24px; overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* 上下に余白をとり、カードごとのドロップシャドウが切れないように */
  padding-top: 16px; padding-bottom: 44px; margin-bottom: 8px;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: 6vw;
}
.event-grid::-webkit-scrollbar { display: none; }
.event-card {
  flex: 0 0 78vw;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0,0,0,0.06);
}
/* 画像エリア：1枚ならそのまま、複数枚なら横スクロール（スナップ）スライダー */
.event-imgs {
  display: flex;
  align-items: flex-start;   /* 高さを伸ばさず、画像を4:3のまま表示 */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.event-imgs::-webkit-scrollbar { display: none; }
.event-img {
  flex: 0 0 100%;
  aspect-ratio: 4 / 5;
  scroll-snap-align: start;
}
.event-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.event-body { padding: 20px 22px 24px; }
.event-name { font-size: 16px; font-weight: 500; line-height: 1.6; margin-bottom: 8px; }
.event-date { font-size: 13px; color: #8a8a8a; letter-spacing: 0.02em; }
@media (min-width: 768px) {
  .event-lead { font-size: 21px; }
  .event-card { flex-basis: 46vw; }
  .event-card:first-child { margin-left: -14vw; }   /* 左端を見切れさせる */
}
@media (min-width: 1024px) {
  .event-card { flex-basis: 22vw; }                  /* カードをさらに小さく：中央に3枚＋左右が見切れる */
  .event-card:first-child { margin-left: -8vw; }
}

/* スライダー共通スタイル（.slider-nav / .slider-btn / grab カーソル）は common.css に集約 */
.event-grid.dragging a, .global-slider.dragging a { pointer-events: none; }

/* 7. CTA */
.cta-section { background: var(--c-primary); color: #fff; text-align: center; }
.cta-section h2, .cta-section p { color: #fff; }
.cta-section p { margin-bottom: 22px; }
.cta-tags { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 28px; }
.cta-tag { font-size: 12px; color: #fff; border: 1px solid #555; padding: 6px 12px; }
.cta-section .btn-primary { background: #fff; color: var(--c-text); min-width: 240px; }

/* 8. 導入店様向けサポート（バナー4つ） */
.support-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.support-banner-item {
  min-height: 120px; border: 1px solid #cfcfcf; padding: 20px;
  display: flex; flex-direction: column; justify-content: space-between;
  text-decoration: none; color: var(--c-text); background: #fff;
}
.support-banner-item span { font-size: 11px; letter-spacing: 0.12em; color: #777; text-transform: uppercase; }
.support-banner-item h4 { margin: 0; font-size: 15px; font-weight: 500; }
.support-other { margin-top: 28px; text-align: center; }
.support-other .btn { width: 100%; }

/* =========================================================
   タブレット / PC（768px〜）
   ========================================================= */
@media (min-width: 768px) {
  .ks-fv-img { height: 360px; }
  .ks-fv-copy { left: 48px; right: 48px; bottom: 48px; }

  /* What We Do：左にリード文＋画像・右にSTEPカード */
  .wwd { grid-template-columns: 40% 1fr; gap: 40px; align-items: start; }
  /* サポート体制を2カラム */
  .support-cards { grid-template-columns: 1fr 1fr; }

  /* 導入店サポートバナーを4カラム */
  .support-grid { grid-template-columns: repeat(4, 1fr); }
  .support-other .btn { width: auto; min-width: 320px; }
}

@media (min-width: 1024px) {
  .ks-fv-img { height: 440px; }
  .wwd { grid-template-columns: 38% 1fr; }
  .team-photos { margin-right: calc(-1 * max(64px, (100vw - 1152px) / 2)); }
}