@charset "utf-8";

/* ==========================================================================
   ブランディングとは｜概念と定義
   ========================================================================== */
.branding-card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  align-items: flex-start;
}
.branding-card {
  flex: 1;
  min-width: 300px; 
  display: flex;
  flex-direction: column;
}
.branding-card-header {
  background-color: #000;
  color: #fff;
  text-align: center;
  padding: 10px;
  margin: 0;
  font-weight: bold;
  font-family: serif;
}
.branding-card-body {
  padding: 20px 0;
  line-height: 1.8;
}
.circle-image {
  max-width: 700px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .branding-card {
    min-width: 100%;
  }
  .circle-image {
    max-width: 100%;
  }
}

/* ==========================================================================
   ブランディングとは｜なぜ、中堅中小企業にこそ、必要なのか
   ========================================================================== */
.step-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
}
.step-branding-card {
  flex: 1;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.step-number {
  width: 60px;
  height: 60px;
  line-height: 55px;
  border: 1px solid #000;
  border-radius: 50%;
  font-size: 30px;
  margin-bottom: 20px;
  font-family: serif;
}
.step-title {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 30px;
  white-space: nowrap;
  font-family: serif;
}
.step-body {
  font-size: 16px;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .step-container {
    flex-direction: column;
    align-items: center;
  }
  .step-branding-card {
    width: 100%;
    margin-bottom: 40px;
  }
  .step-title {
    white-space: normal;
  }
}

/* ==========================================================================
   ブランディングのご支援概要
   ========================================================================== */
.flow-container {
  max-width: 1000px;
  margin: 0 auto;
}
.flow-item {
  display: flex;
  margin-bottom: 60px; 
  gap: 20px;
  position: relative;
}
.flow-item:last-child {
  margin-bottom: 0;
}
.flow-label {
  flex-shrink: 0;
  width: 230px;
  height: 70px;
  display: flex;
  align-items: center;
  padding: 20px;
  color: #fff;
  font-weight: bold;
  clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%);
  position: relative;
  z-index: 2;
  line-height: normal;
  font-size: 120%;
  font-family: serif;
}
.flow-item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 25px; 
  left: 50px; 
  width: 1px;
  height: calc(100% + 60px); 
  background-color: #333;
  z-index: 1;
}
.step-1 { margin-left: 0; }
.step-2 { margin-left: 30px; }
.step-3 { margin-left: 60px; }
.step-1 .flow-label { background-color: #a0a0a0; }
.step-2 .flow-label { background-color: #666666; }
.step-3 .flow-label { background-color: #222222; }

.flow-content { flex: 1; }
.flow-title { font-weight: bold; font-size: 120%; font-family: serif;}
.flow-title.color-sub { margin-top: 25px; font-weight: bold; font-size: 120%; }
.flow-text { line-height: 1.7; margin: 0; }

@media (max-width: 900px) {
  .flow-item {
    flex-direction: column;
    margin-left: 0 !important;
    gap: 10px;
    margin-bottom: 40px;
  }
  .flow-item::after { display: none; }
  .flow-label { width: 100%; clip-path: none; padding: 15px; height: auto;}
.flow-title { margin-bottom: 10px; }
.flow-title.color-sub { margin-bottom: 10px; }
  
}

/* ==========================================================================
   よくあるご相談
   ========================================================================== */
.gb-check-wrapper .gb-check-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 60px 40px;
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}
.gb-check-wrapper .gb-check-item {
  flex: 0 1 calc(50% - 20px);
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}
.gb-check-wrapper .gb-check-icon {
  width: 60px;
  height: 30px;
  border-left: 6px solid #000;
  border-bottom: 6px solid #000;
  transform: rotate(-45deg);
  margin-bottom: 30px;
  box-sizing: border-box;
}
.gb-check-wrapper .gb-check-title {
  font-weight: bold;
  margin-bottom: 15px;
  line-height: 1.4;
  font-size: 120%;
  font-family: serif;
}
.gb-check-wrapper .gb-check-text {
  margin: 0;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .gb-check-wrapper .gb-check-container { gap: 50px 0; }
  .gb-check-wrapper .gb-check-item { flex: 0 1 100%; padding: 0 20px; }
  .gb-check-wrapper .gb-check-text br { display: none; }
}

/* ==========================================================================
   中小企業のブランディングで押さえるポイント
   ========================================================================== */
.gb-list-wrapper .gb-list-container { margin: 0 auto; }
.gb-list-wrapper .gb-list-item {
  display: flex;
  align-items: stretch;
  margin-bottom: 20px;
  border: 1px solid #000;
  box-sizing: border-box;
}
.gb-list-wrapper .gb-list-label {
  background-color: #000;
  color: #fff;
  width: 35%;
  padding: 20px;
  display: flex;
  align-items: center;
  font-weight: bold;
  box-sizing: border-box;
  font-size: 120%;
  font-family: serif;
}
.gb-list-wrapper .gb-list-content {
  background-color: #fff;
  color: #000;
  flex: 1;
  padding: 20px;
  display: flex;
  align-items: center;
  line-height: 1.6;
  box-sizing: border-box;
  font-family: serif;
}

@media (max-width: 768px) {
  .gb-list-wrapper .gb-list-item { flex-direction: column; }
  .gb-list-wrapper .gb-list-label,
  .gb-list-wrapper .gb-list-content { width: 100%; padding: 15px 20px; }
}

/* ==========================================================================
   船井総研ブランディングの特長（4つの独自性）
   ========================================================================== */
.gb-step-list-wrapper .gb-step-list-container {
  max-width: 1000px;
  margin: 0 auto;
}
.gb-step-list-wrapper .gb-step-list-item {
  display: flex;
  gap: 30px;
  margin-bottom: 50px;
  align-items: flex-start;
}
.gb-step-list-wrapper .gb-step-list-icon {
  flex-shrink: 0;
  width: 70px;
  height: 70px;
  border: 1px solid #000;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  font-size: 32px;
  font-family: serif;
  align-items: center;
}
.gb-step-list-wrapper .gb-step-list-content { flex: 1; }
.gb-step-list-wrapper .gb-step-list-title {
  font-weight: bold;
  margin-bottom: 10px;
  line-height: 1.4;
  font-size: 120%;
  font-family: serif;
}
.gb-step-list-wrapper .gb-step-list-text { margin: 0; line-height: 1.7; font-family: serif;}
.gb-step-list-wrapper .gb-step-list-bullet {
  margin: 10px 0 0 0;
  padding: 0;
  list-style: none;
  font-family: serif;
}
.gb-step-list-wrapper .gb-step-list-bullet li {
  position: relative;
  padding-left: 1.5em;
  margin-bottom: 8px;
  line-height: 1.6;
}
.gb-step-list-wrapper .gb-step-list-bullet li::before {
  content: "•";
  position: absolute;
  left: 0.5em;
  font-weight: bold;
}

@media (max-width: 768px) {
  .gb-step-list-wrapper .gb-step-list-item {
    flex-direction: column;
    align-items: center;
    gap: 15px;
    text-align: center;
  }
  .gb-step-list-wrapper .gb-step-list-icon { width: 60px; height: 60px; font-size: 24px; }
  .gb-step-list-wrapper .gb-step-list-bullet li { text-align: left; }
}

/* ==========================================================================
   業種別のブランディング成果イメージ
   ========================================================================== */
.gb-industry-wrapper .gb-industry-container {
  display: flex;
  flex-wrap: nowrap;
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
  align-items: flex-start;
}
.gb-industry-wrapper .gb-industry-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.gb-industry-wrapper .gb-industry-circle {
  width: 140px;
  height: 140px;
  background-color: #000;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  line-height: 1.3;
  margin-bottom: 30px;
  font-size: 120%; 
  font-family: serif;
}
.gb-industry-wrapper .gb-industry-catch {
  font-weight: bold;
  line-height: 1.4;
  height: 3em; 
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: serif;
}
.gb-industry-wrapper .gb-industry-line {
  width: 100%;
  height: 4px;
  background-color: #000;
  margin: 20px 0;
}
.gb-industry-wrapper .gb-industry-list {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}
.gb-industry-wrapper .gb-industry-list li {
  position: relative;
  padding-left: 1.2em;
  margin-bottom: 15px;
  line-height: 1.6;
}
.gb-industry-wrapper .gb-industry-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  font-weight: bold;
}

@media (max-width: 900px) {
  .gb-industry-wrapper .gb-industry-container { flex-wrap: wrap; }
  .gb-industry-wrapper .gb-industry-card { flex: 0 0 100%; margin-bottom: 40px; }
  .gb-industry-wrapper .gb-industry-catch { height: auto; margin-bottom: 10px; }
}


/* ==========================================================================
   報告書/アウトプットのイメージ
   ========================================================================== */
.gb-outcome-wrapper .gb-outcome-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
  align-items: flex-start;
}
.gb-outcome-wrapper .gb-outcome-card {
  flex: 1;
  min-width: 300px;
  display: flex;
  flex-direction: column;
}
.gb-outcome-wrapper .gb-outcome-header {
  background-color: #000;
  color: #fff;
  padding: 20px;
  font-weight: bold;
  line-height: 1.4;
  text-align: left;
  font-family: serif;
}
.gb-outcome-wrapper .gb-outcome-body {
  padding: 20px 0;
}
.gb-outcome-wrapper .gb-outcome-item {
  margin-bottom: 20px;
}
.gb-outcome-wrapper .gb-outcome-item-title {
  font-weight: bold;
  margin-bottom: 5px;
  line-height: 1.4;
  letter-spacing: 0;
  font-family: serif;
}
.gb-outcome-wrapper .gb-outcome-item-text {
  margin: 0;
  line-height: 1.6;
  color: #333;
  font-family: serif;
}

@media (max-width: 900px) {
  .gb-outcome-wrapper .gb-outcome-card {
    flex: 0 0 100%;
  }

  .gb-outcome-wrapper .gb-outcome-header{
    padding: 15px;
  }
}



/* ==========================================================================
   中小企業のブランディングの効果
   ========================================================================== */
/* --- グラフセクション専用スタイル --- */

.graph-section-wrapper {
    --gs-black: #000;
    --gs-gray: #666;
    --gs-border: #ccc;
    background-color: #fff;
    box-sizing: border-box;
    line-height: 1.6;
}

/* 他のCSSの影響をリセット */
.graph-section-wrapper * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.graph-section-wrapper .gs-container {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 60px 30px;
}

/* レスポンシブ：タブレット・スマホで1列 */
@media (max-width: 768px) {
    .graph-section-wrapper .gs-container {
        grid-template-columns: 1fr;
        gap: 50px 0;
    }
    .graph-section-wrapper{
      padding: 20px;
    }
}

.graph-section-wrapper .gs-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.graph-section-wrapper .gs-chart-flex {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 15px;
    margin-bottom: 25px;
    min-height: 150px; /* 高さを揃えてガタつきを防止 */
}

/* ドーナツグラフ本体 */
.graph-section-wrapper .gs-donut-chart {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border: 1px solid var(--gs-border);
}

/* 中央の白い円 */
.graph-section-wrapper .gs-donut-chart::before {
    content: "";
    position: absolute;
    width: 75%;
    height: 75%;
    background-color: #fff;
    border-radius: 50%;
    z-index: 1;
    border: 1px solid var(--gs-border);
}

.graph-section-wrapper .gs-chart-text {
    position: relative;
    z-index: 2;
    font-weight: bold;
    color: var(--gs-black);
    top: 10px;
}

.graph-section-wrapper .gs-percent-num {
    display: block;
    line-height: 1;
    font-size: 32px;
    font-family: serif;
}

.graph-section-wrapper .gs-percent-unit {
    display: block;
    font-size: 20px;
    font-family: serif;
}

.graph-section-wrapper .gs-title {
    font-weight: bold;
    margin: 0 0 12px 0;
    letter-spacing: 0.05em;
    color: var(--gs-black);
    border: none; /* 既存サイトのh3枠線を消去 */
    font-family: serif;
}

.graph-section-wrapper .gs-description {
    max-width: 400px;
    margin: 0 auto;
    text-align: center; /* 説明文は左寄せ（画像準拠） */
    font-family: serif;
}

/* グラフの進捗（conic-gradientで描画） */
.graph-section-wrapper .gs-p69-0 { background: conic-gradient(var(--gs-black) 0% 69.0%, transparent 69.0% 100%); }
.graph-section-wrapper .gs-p53-1 { background: conic-gradient(var(--gs-black) 0% 53.1%, transparent 53.1% 100%); }
.graph-section-wrapper .gs-p51-8 { background: conic-gradient(var(--gs-black) 0% 51.8%, transparent 51.8% 100%); }
.graph-section-wrapper .gs-p45-2 { background: conic-gradient(var(--gs-black) 0% 45.2%, transparent 45.2% 100%); }
.graph-section-wrapper .gs-p34-0 { background: conic-gradient(var(--gs-black) 0% 34.0%, transparent 34.0% 100%); }
.graph-section-wrapper .gs-p36-0 { background: conic-gradient(var(--gs-black) 0% 36.0%, transparent 36.0% 100%); }

/* 複数グラフがある箇所のサイズ調整 */
.graph-section-wrapper .gs-small-chart {
    width: 140px;
    height: 140px;
}
.graph-section-wrapper .gs-small-chart .gs-percent-num {  }