/* ========================================
     リセットCSS：全要素の余白・パディングを0にし、
     box-sizingをborder-boxに統一（幅にpaddingとborderを含める）
     ======================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ========================================
     ページ全体の基本設定
     ======================================== */
body {
  font-family:
    "Helvetica Neue", "Hiragino Sans", "Meiryo", sans-serif; /* フォント：Mac/Windows両対応 */
  background: #fff; /* 背景色：白 */
  padding: 40px 20px; /* 上下40px、左右20pxの余白 */
}

/* ========================================
     カード全体を囲むコンテナ（横並びレイアウト）
     ======================================== */
.plan-container {
  display: flex; /* フレックスボックスで横並び */
  gap: 20px; /* カード間の余白：20px */
  max-width: 1200px; /* コンテナの最大幅：1200px */
  margin: 0 auto; /* 左右中央寄せ */
  align-items: stretch; /* 全カードの高さを最も高いカードに揃える */
}

/* ========================================
     各プランのカード
     ======================================== */
.plan-card {
  flex: 1; /* 全カードを均等幅に */
  background: #fff; /* 背景色：白 */
  border-radius: 16px; /* 角丸：16px */
  border: 1px solid #e0e0e0; /* 枠線：薄いグレー */
  padding: 32px 24px; /* 内側の余白：上下32px、左右24px */
  position: relative; /* バッジの絶対配置の基準にする */
  display: flex; /* カード内をフレックスボックスに */
  justify-content: flex-start !important; /* 上詰めに固定 */
  flex-direction: column; /* カード内の要素を縦並びに */
}

/* ========================================
     おすすめカードの枠線（黄色で強調）
     ======================================== */
.plan-card.recommended {
  border: 2px solid #ffc400; /* 枠線：黄色・2px */
}

/* ========================================
     「おすすめ」バッジ（カード上部に浮かせて表示）
     ======================================== */
.badge {
  position: absolute; /* 親要素（.plan-card）を基準に絶対配置 */
  top: -14px; /* カード上端より14px上に配置 */
  left: 50%; /* 左端を中央に */
  transform: translateX(
    -50%
  ); /* 自身の幅の半分だけ左にずらして完全に中央寄せ */
  background: #ffc400; /* 背景色：黄色 */
  color: #fff; /* 文字色：白 */
  font-size: 13px; /* 文字サイズ */
  font-weight: bold; /* 太字 */
  padding: 4px 16px; /* 内側の余白 */
  border-radius: 20px; /* 角丸：丸みのあるピル型 */
  white-space: nowrap; /* テキストの折り返しを防止 */
}

/* ========================================
     カード上部のメタ情報（「個人」「企業」などのラベル行）
     ======================================== */
.plan-meta {
  display: flex; /* 横並び */
  align-items: center; /* 上下中央揃え */
  justify-content: space-between; /* ラベルと王冠を左右端に配置 */
  font-size: 13px; /* 文字サイズ */
  color: #666; /* 文字色：グレー */
  margin-bottom: 12px; /* 下の余白 */
}

/* ========================================
     メタ情報内のラベル（アイコン+テキスト）
     ======================================== */
.plan-meta .label {
  display: flex; /* アイコンとテキストを横並び */
  align-items: center; /* 上下中央揃え */
  gap: 4px; /* アイコンとテキストの間隔 */
}

/* ========================================
     王冠アイコン
     ======================================== */
.crown {
  font-size: 18px; /* アイコンサイズ */
}

/* ========================================
     プラン名（「無料」「Canvaプロ」など）
     ======================================== */
.plan-name {
  font-size: 22px; /* 文字サイズ：大きめ */
  font-weight: bold; /* 太字 */
  margin-bottom: 12px; /* 下の余白 */
}

/* ========================================
     プランの説明文
     ======================================== */
.plan-desc {
  font-size: 14px;
  color: #555;
  line-height: 1.6;
  flex-grow: 0 !important;
  margin-bottom: 24px;
  min-height: 180px; /* 最も長い文章（Premium等）が収まる高さに調整 */
  display: flex; /* 高さを固定した中で位置を調整するために必要 */
  font-weight: bold; /* 太字設定（以前のご希望に合わせて追加） */
}

/* ========================================
     価格表示（「¥0」「¥11,800」など）
     ======================================== */
.plan-price {
  font-size: 36px; /* 文字サイズ：大きく目立たせる */
  font-weight: bold; /* 太字 */
  margin-bottom: 4px; /* 下の余白 */
}

/* 価格内の補足テキスト用（将来用） */
.plan-price span {
  font-size: 16px; /* 文字サイズ：小さめ */
  font-weight: normal; /* 通常の太さ */
}

/* ========================================
     価格の補足（「/年払い、1人あたり」）
     ======================================== */
.plan-period {
  font-size: 14px; /* 文字サイズ：小さめ */
  color: #ff903e; /* 文字色：オレンジ */

  margin-top: 0 !important;
  margin-bottom: auto !important; /* 【重要】これより下の余白をすべて底に押し出す */
  flex-grow: 0 !important;

  /*margin-bottom: 28px; /* 下の余白 */
  font-weight: bold;
}

/* ========================================
     「ご相談ください」テキスト（エンタープライズ用）
     ======================================== */
.plan-contact {
  font-size: 28px; /* 文字サイズ：大きめ */
  font-weight: bold; /* 太字 */
  margin-bottom: 4px; /* 下の余白 */
}

/* 「詳細はお問い合わせください」補足テキスト */
.plan-contact-sub {
  font-size: 13px; /* 文字サイズ：小さめ */
  color: #888; /* 文字色：薄いグレー */
  margin-bottom: 28px; /* 下の余白 */
}

/* ========================================
     ボタンをまとめるグループ（カード下部に配置）
     ======================================== */
.btn-group {
  margin-top: auto; /* カード内の余ったスペースを上に押し出し、ボタンを下端に固定 */
  display: flex; /* フレックスボックス */
  flex-direction: column; /* ボタンを縦並びに */
  gap: 10px; /* ボタン間の余白 */
}

/* ========================================
     ボタン共通スタイル
     ======================================== */
.btn {
  display: block; /* ブロック要素として表示 */
  width: 100%; /* 幅いっぱい */
  padding: 14px; /* 内側の余白 */
  border-radius: 8px; /* 角丸 */
  font-size: 15px; /* 文字サイズ */
  font-weight: bold; /* 太字 */
  text-align: center; /* テキスト中央寄せ */
  cursor: pointer; /* マウスカーソルを指マークに */
  border: none; /* デフォルトの枠線を消す */
  text-decoration: none; /* リンクの下線を消す */
}

/* ========================================
     メインボタン（黄色背景）
     ======================================== */
.btn-primary {
  background: #ffc400; /* 背景色：黄色 */
  color: #fff; /* 文字色：白 */
}
/* メインボタン：ホバー時に少し暗く */
.btn-primary:hover {
  background: #c79e17;
}

/* ========================================
     アウトラインボタン（白背景＋枠線）
     ======================================== */
.btn-outline {
  background: #fff; /* 背景色：白 */
  color: #333; /* 文字色：濃いグレー */
  border: 1px solid #ccc; /* 枠線：グレー */
}
/* アウトラインボタン：ホバー時に薄いグレー背景 */
.btn-outline:hover {
  background: #f5f5f5;
}

/* ========================================
     参加企業セクション全体
     ======================================== */
.company-section {
  max-width: 1200px; /* プランカードと幅を合わせる */
  margin: 60px auto 0; /* 上に60pxの余白、左右中央寄せ */
}

/* セクション見出し */
.company-section h2 {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 24px;
  color: #333;
}

/* ========================================
     タブナビゲーション（プランA〜Dの切り替えボタン）
     角丸ボタン型のデザイン
     ======================================== */
.tab-nav {
  list-style: none; /* リストマーカーを消す */
  display: flex; /* 横並び */
  gap: 8px; /* タブ間の余白 */
  margin-bottom: 0;
  padding: 0;
}
.tab-nav li {
  flex: 1; /* 各タブを均等幅に */
}
.tab-nav li a {
  display: block;
  text-align: center;
  padding: 14px 20px; /* 内側の余白 */
  font-size: 15px;
  font-weight: bold;
  color: #555; /* 非アクティブ時の文字色 */
  text-decoration: none;
  cursor: pointer;
  background: #eae1c4; /* 非アクティブ時の背景色：薄い黄色 */
  border-radius: 12px 12px 0 0; /* 上側のみ角丸（タブ型） */
  border: 2px solid transparent; /* 非アクティブ時は透明の枠線 */
  border-bottom: none; /* 下辺の枠線なし */
  transition:
    background 0.2s,
    color 0.2s,
    border-color 0.2s; /* アニメーション */
}
/* アクティブなタブのスタイル */
.tab-nav li a.current {
  color: #fff; /* 文字色：白 */
  background: #ffc400; /* 背景色：薄めの黄色 */
  border-color: #ffc400; /* 枠線：背景と同色 */
}
/* ホバー時のスタイル */
.tab-nav li a:hover {
  background: #ffc400; /* ホバー時：明るめの黄色 */
  color: #fff;
}

/* ========================================
     タブコンテンツ（各プランの参加企業一覧）
     ======================================== */
.tab-content {
  display: none; /* 【追加】最初はすべて隠す */
  background: #ffc400; /* 背景色：薄めの黄色（アクティブタブと同色） */
  color: #fff; /* 文字色：白 */
  border-radius: 0 0 12px 12px; /* 下側のみ角丸 */
  padding: 32px;
}

/* 最初の要素だけ、または current がついている時だけ表示させるための補助 */
.tab-content:first-of-type {
  display: block;
}

/* タブコンテンツ内の説明文 */
.tab-desc {
  color: #fff; /* 文字色：白 */
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 20px;
  font-weight: bold;
}

/* 企業ロゴ・名前を並べるグリッド */
.company-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4列 */
  gap: 20px;
}

/* 各企業のカード */
.company-item {
  background: #fff; /* 背景色：白 */
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  font-size: 14px;
  color: #333; /* 文字色：濃いグレー */
}
.company-item .company-logo {
  font-size: 32px; /* ロゴ代わりのアイコンサイズ */
  margin-bottom: 8px;
}

/* セクション間の余白を統一する専用クラス */
.section-spacer {
  padding-top: 100px !important; /* ここで全ての「上の余白」を統一 */
  padding-bottom: 60px;
}

/* --- 公式イベントパートナー紹介セクション専用設定 --- */

/* 1. 通常時の団体名（.ttl）を強制的に黒にする */
/* セクションのクラス名（.section05）から辿ることで優先順位を最大化します */
.section08 .partner-list .item .partner-box .ttl {
  color: #333 !important;
  font-weight: bold !important;
  text-decoration: none !important;
  transition: color 0.3s ease; /* ふわっと色を変えるアニメーション */
}

/* 2. ホバー時の団体名（.ttl）をオレンジにする */
/* hover-allまたはaタグにマウスが乗ったとき、隣接または子要素の.ttlをオレンジに */
.section08 .partner-list .item .partner-box:hover .ttl {
  color: #ffc400 !important; /* オレンジ色（必要に応じて#e06666等に変更してください） */
}

/* リンク自体の色指定が邪魔をしないようにリセット */
.section08 .partner-list .item .partner-box a {
  color: inherit !important;
  text-decoration: none !important;
}

/* ========================================
     レスポンシブ対応：画面幅768px以下（スマートフォン）
     カード・企業グリッドを縦並びに切り替える
     ======================================== */
@media (max-width: 768px) {
  .plan-container {
    flex-direction: column; /* 横並び → 縦並びに変更 */
  }

  /*  .plan-card {
    width: 100%; /* カードを画面幅いっぱいに 
  }
  .company-grid {
    grid-template-columns: repeat(2, 1fr); /* 4列 → 2列に変更 */

  /* ========================================================
   登録団体リスト：3列表示への変更 ＆ 重なりバグ修正の統合設定
   ======================================================== */
}
/* 1. リスト全体を3列のグリッドレイアウトにする */
.partner-list {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important; /* 3列表示 */
  gap: 24px 20px !important; /* 縦の隙間24px、横の隙間20px */
  width: 100% !important;
  padding: 0 !important;
  margin: 0 0 30px 0 !important;
  list-style: none !important;
}

/* 各アイテムの横幅や余白の干渉をリセット */
.partner-list .item {
  width: 100% !important;
  margin: 0 !important;
}

/* 3. 【レスポンシブ】タブレット・スマホ表示（画面幅768px以下）では1列にする */
@media only screen and (max-width: 768px) {
  .partner-list {
    grid-template-columns: repeat(
      1,
      1fr
    ) !important; /* スマホやタブレットでは1列 */
    gap: 20px !important; /* 縦並びの時のアイテム間の余白 */
  }
}

/* ========================================================
   タブ切り替えメニュー：スマホで左右スワイプできるようにする設定
   ======================================================== */
@media only screen and (max-width: 768px) {
  /* 親要素に横スクロールを許可する */
  .tab-nav {
    display: flex !important;
    white-space: nowrap !important;
    overflow-x: auto !important; /* 横方向のはみ出しをスクロールに変換 */
    -webkit-overflow-scrolling: touch; /* スマホでのスクロールを滑らかにする */
    padding-bottom: 8px !important; /* スクロールバーが文字に被らないための余白 */
  }

  /* 各タブボタンが潰れないように最低限の横幅を確保する */
  .tab-nav li {
    flex: 0 0 auto !important;
    margin-right: 12px !important; /* ボタン同士の間隔 */
  }
}

/* ========================================================
   Aboutセクション：画面幅いっぱいに背景をオレンジにする設定
   ======================================================== */
.orange-background-section {
  background-color: #ff903e !important; /* 背景をブランドカラーのオレンジに指定 */
  width: 100% !important; /* 画面の左端から右端まで広げる */
  margin: 0 !important;

  /* セクション全体の上下の余白（お好みの詰まり具合に合わせて調整してください） */
  padding-top: 0px !important;
  padding-bottom: 100px !important;
}

/* 内部にある「提供する3つの支援」リストの白い背景色や余白の干渉をクリアする */
.orange-background-section .service-list {
  background-color: transparent !important; /* リスト自体の白い背景を透明化 */
  padding: 0 !important;
  box-shadow: none !important; /* もし影がついていたら消去 */
}

/* タブレット・スマホ用の上下余白調整（画面が狭いときは余白を少しコンパクトに） */
@media only screen and (max-width: 768px) {
  .orange-background-section {
    padding-top: 70px !important;
    padding-bottom: 70px !important;
  }
}