/* ------------------------------------------- */
/* 1. サイト全体 */
/* ------------------------------------------- */

body {
    margin: 0;
    padding-top: 50px; 
}


/* ------------------------------------------- */
/* 1. ナビゲーションバーのカスタムカラー設定 */
/* ------------------------------------------- */

/* ブランドロゴ部分の背景色 */
.custom-brand-bg {
    background-color: #5782A2 !important;
    color: #fff !important; 
}

/* ブランドロゴを最前面に */
.brand-logo {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 35px;
  z-index: 1050; /* 最前面 */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.custom-navbar-bg {
  position: fixed;
  top: 0; /* ロゴの高さ分ずらす */
  left: 0;
  width: 100%;
  height: 80px;
  z-index: 1030;
  background-color: #f1d033 !important;
  display: flex;
  align-items: center;
}

/* パンくずリストをさらに下に */
.breadcrumb-bg {
  position: fixed;
  top: 20px; /* ロゴ + ナビバーの高さ分 */
  left: 0;
  width: 100%;
  height:35px;
  margin:0 0 50px 0; 
  z-index: 1040;
  background-color: #fcf4d4;
  padding: 5px ;
  border-radius: 5px;
}

.breadcrumb-bg .breadcrumb-item {
  line-height: 1;
}

.breadcrumb-bg a {
  color: #5782A2;   /* 通常時の色 */
  text-decoration: none; /* 下線を消したい場合 */
}

.breadcrumb-bg a:hover {
  color: #f1d033;   /* ホバー時の色 */
}


/* ------------------------------------------- */
/* 1-1. PCサイズ (lg以上) での表示制御の設定 (オフキャンバス移行後は無効化推奨) */
/* ------------------------------------------- */

/* Offcanvasを使うため、この部分は今回は無視してOKだが、構造維持のため残す */
   @media (min-width: 992px) {
    .navbar-expand-lg .navbar-toggler {
        display: block !important;
    }
} 

/* ------------------------------------------- */
/* 1. パンくずリストの背景 */
/* ------------------------------------------- */

.breadcrumb-bg {
    /* 背景色：ブランドカラー（黄色 #f1d033）に近い、とても薄い黄色 */
    background-color: #fcf4d4; 
    
    /* 上下左右に余白を確保 */
    padding:10px 10px 1px; 

    width: 100%;
    
    /* 角丸にして柔らかい印象に */
    border-radius: 5px; 
    
    /* パンくずリスト自体のデフォルトの上下マージンをリセット */
    margin-top: 20px;
    margin-bottom: 0 !important; 
    box-sizing: border-box;
}


/* ------------------------------------------- */
/* 3. プロフィールページ */
/* ------------------------------------------- */

/* セクション全体（フッターとの区別のため、背景色を白に想定） */
.profile-section {
    background-color: #ffffff;
    color: #333;
}

/* ページ全体のタイトル */
.section-title {
    color: #5782A2; /* ブランドカラー（青）で強調 */
    border-bottom: 3px solid #f1d033; /* ブランドカラー（黄色）で下線 */
    display: inline-block; /* 下線がテキスト幅に収まるように */
    padding-bottom: 5px;
}

/* 各プロフィールの見出し */
.profile-heading {
    color: #5782A2;
    font-weight: bold;
    margin-bottom: 1rem;
}

/* プロフィール画像のラッパー */
.profile-img-wrapper {
    /* 正方形の画像を表示するための固定サイズ */
    width: 300px;
    height: 300px;
    margin: 0 auto; /* 中央寄せ */
    overflow: hidden; /* 画像が枠からはみ出さないように */
    border: 5px solid #5782A2; /* ブランドカラーの枠線 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }

.profile-image {
    /* Bootstrapのrounded-circleとimg-fluidを継承 */
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像をトリミングして枠いっぱいに表示 */
}

/* イメージの画像ラッパーに背景色を追加して差別化 */
.image-color {
    background-color: #5782A2; 
    border-color: #5782A2; /* 枠線を黄色系に */
}

/* Mocoの画像ラッパーに背景色を追加して差別化 */
.moco-color {
    background-color: #fff; 
    border-color: #fff; /* 枠線を黄色系に */
}

/* Cocoの画像ラッパーに背景色を追加して差別化 */
.coco-color {
    background-color: #fff; 
    border-color: #fff; /* 枠線を青系に */
}

/* ページを区切る水平線にブランドカラーを使用 */
.brand-hr {
    border-top: 2px solid #f1d033;
    opacity: 1; /* 見えにくい場合は不透明度を調整 */
}

/* ブランドカラーを使ったボタンのスタイル */
.brand-btn {
    background-color: #5782A2; 
    border-color: #5782A2;
    color: #ffffff;
    transition: background-color 0.3s;
}

.brand-btn:hover {
    background-color: #f1d033; /* ホバーで黄色に */
    border-color: #f1d033;
    color: #333; /* ホバー時はテキストを濃い色に */
}

/* モバイル対応（画像とテキストの余白を調整） */
@media (max-width: 767.98px) {
    .profile-img-wrapper {
        width: 180px;
        height: 180px;
    }
    .profile-content {
        text-align: center; /* モバイルではテキストを中央寄せ */
    }
}

/* ------------------------------------------- */
/* 3-1. 活動年表（タイムライン） */
/* ------------------------------------------- */

/* タイムラインコンテナ: 中央に縦線を引くための基準 */
.timeline-container {
    position: relative;
}

/* 縦線の描画 */
.timeline-container::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%; /* PCでは中央に線を配置 */
    width: 4px;
    background-color: #f1d033; /* ブランドカラーの縦線 */
    z-index: 1; 
}

/* 各アイテムの基本設定 */
.timeline-item {
    position: relative;
    margin-bottom: 50px;
    width: 100%;
}

/* 日付と内容 */
.timeline-content {
    padding: 0 40px; /* 縦線から少し離す */
    position: relative;
    z-index: 2;
}

/* 中央の縦線上に、丸い画像アイコンを配置する */
.timeline-icon {
    position: absolute;
    left: 50%; /* 縦線と同じ中央位置 */
    top: 50%; /* 親要素(アイテム)の縦方向の中心に合わせる */
    transform: translate(-50%, -50%); /* アイコン自身の幅と高さの半分だけ左上に戻して完全に中央寄せ */
    width: 50px; /* 指定の50px */
    height: 50px; /* 指定の50px */
    z-index: 5; /* 縦線より上に表示 */
}

/* アイコン内の画像を丸くする */
.timeline-icon img {
    width: 100%;
    height: 100%;
    border-radius: 50%; /* 画像を丸く切り抜く */
    object-fit: cover; /* 画像が歪まないように調整 */
    border: 3px solid #fff; /* 白い縁取りを付けて、視認性を高める */
}

/* 画像のスタイル */
.timeline-image {
    padding: 0 40px;
    position: relative;
    z-index: 2;
    text-align: center;

/* Flexboxを使って内部の要素を中央に配置 */
    display: flex;
    justify-content: center; /* 左右中央寄せ */
    align-items: center; /* 上下中央寄せ（必要であれば） */
}

/* 右側のアイテム（画像が右に来る場合）の調整 */
.timeline-item.timeline-right .timeline-image {
    /* 右側の画像コンテナの場合、左側のパディングを大きくして縦線から離し、右側のパディングは小さくする */
    padding: 0 0 0 10px; 
}

/* 左側のアイテム（画像が左に来る場合）の調整 */
.timeline-item:not(.timeline-right) .timeline-image {
    /*左側の画像コンテナの場合、右側のパディングを大きくして縦線から離し、左側のパディングは小さくする */
    padding: 0 20px 0 0; 
}


/* ------------------------------------------- */
/* モバイル（PC幅以外）時の調整 */
/* ------------------------------------------- */
@media (max-width: 767.98px) {
    
    /* 縦線: モバイル時は左側に移動 */
.timeline-container::before {
    left: 20px; /* 線の位置を左から30pxに変更 */
}

/* モバイルではアイコンを左端に寄せ、縦線を隠すなどの調整が必要になることが多いです */
.timeline-icon {
    /* アイコンを親要素の左端から少し離れた位置に配置 */
    left: 8px; 
    top: 25px;
    /* 縦方向の中央寄せはPCと同じでOK (テキストボックスの真ん中に来るため) */
    transform: translate(0, 0); /* 横方向の中央寄せは不要になるため、translateX(-50%)を解除 */
    margin-left: -25px; /* アイコン幅50pxの半分 */
    z-index: 10;
}

/* テキストがアイコンと重ならないように左に余白を設ける（親要素に適用） */
.timeline-item-content { 
    padding-left: 60px; /* アイコンの幅(50px) + 余白10px 程度の値 */
}
   
/* 全てのコンテンツと画像のパディングを統一 */
.timeline-content,
.timeline-image {
    /* 左側のパディングを確保: 
    縦線（30px）とコンテンツの余白（20px程度）を合わせた数値。
    これにより縦線から十分な距離を取る。 */
    padding-left: 40px; 
    padding-right: 0; /* 右側のパディングは不要 */
    padding-top: initial;
    padding-bottom: initial;
}

/* 3. 画像の親コンテナの幅と中央寄せを確保 */
.timeline-image {
    margin-top: 40px; 
     /* PCでcol-md-6などに設定されている幅をリセットする必要があるかもしれませんが、
    Bootstrapが自動で幅100%にしている場合は不要です。 */
}
    
    
    /* モバイル時、右側のアイテムに適用されていた不要な調整をリセット */
.timeline-item.timeline-right .row {
    flex-direction: column;
    align-items: initial;
}

/* PC用の左右アイテムの個別パディングをリセット */
.timeline-item.timeline-right .timeline-image,
.timeline-item:not(.timeline-right) .timeline-image {
    padding: 0 0 0 40px; 
}
    
.timeline-item {
    margin-bottom: 40px;
}

/* テキストボックスの高さが足りない場合に中央に寄せるための調整 */
.timeline-text-box {
    /* モバイルではコンテンツの高さが変わるので、中央寄せは難しいが、
    テキストボックス内は上から表示されるのが自然なため、この設定は一旦不要
           （コンテンツが少ない場合は上部に寄ってしまう）
    */
  }
}


/* ------------------------------------------- */
/* 3-2. タイトル（強調ボックス）のスタイル */
/* ------------------------------------------- */

/* タイトル全体に適用するスタイル (元の .border_style02 を参考に) */
.timeline-title-style {
    /* h3 のデフォルトマージンをリセット */
    margin: 0 0 15px 0; 
    padding: 0.5em 0.5em 0.5em 1em;
    border: 5px solid #5782A2;
    border-left: 30px solid #5782A2; /* 太い左側のバー */
    position: relative;
    color: #333;
}

/* 右側の三角マークを作成 */
.timeline-title-style::before {
    content: "";
    display: block;
    position: absolute;
    right:0;
    left: auto;
    top: 50%;
    transform: translateY(-50%); /* 自身の高さの半分だけ上に移動して中央に寄せる */
    width: 0;
    height: 0;
    border-style: solid;
    /* border-width: [上下の高さ] [左の線] [上下の高さ] [右の線] */
    border-width: 26px 20px 26px 0;
    border-color: transparent #5782A2 transparent transparent;
}

/* ------------------------------------------- */
/* 3-3. 全体を囲む点線ボックスのスタイル */
/* ------------------------------------------- */

.timeline-text-box {
    /* 点線で全体を囲む */
    border: 2px dashed #5782A2; /* 青色の点線（dashed） */
    padding: 20px; /* 内側の余白 */
    background-color: #fff; /* 背景色を白に戻しておくと見やすい */
    position: relative;
    z-index: 3; /* コンテンツが手前に来るように */
}
/* ------------------------------------------- */
/* 3-4. モバイル時の修正 (768px未満)  */
/* ------------------------------------------- */

@media (max-width: 767.98px) {
    
/* 全てのコンテンツと画像を左端の縦線からスタートさせる */
.timeline-item .row {
    flex-direction: row !important; /* row-reverseを強制解除 */
}

/* モバイル時、画像はコンテンツの下に表示されるので、中央寄せを解除して左寄せに */
.timeline-side-image {
    position: static; /* position: absolute を解除 */
    transform: none; /* transform も解除 */
    margin: 0 auto 0 auto; /* 画像の下側の余白を確保 */
    display: block; /* 引き続きブロック要素 */
  }
}

/* ------------------------------------------- */
/* 4. ミッション・ビジョンセクション */
/* ------------------------------------------- */

/* セクション全体の薄い背景（フッターの黄色とは差別化） */
.mission-vision-section {
    background-color: #f8f9fa; 
}

/* メッセージボックスのスタイル */
.vision-box {
    max-width: 800px; /* PCでの幅を制限して読みやすくする */
    border: 5px solid #5782A2; /* ブランドカラーの太い枠線 */
    background-color: #ffffff; /* 白い背景 */
    border-radius: 10px;
    box-shadow: 0 10px 20px rgba(87, 130, 162, 0.2); /* 枠線と同色の影 */
}

.vision-title {
    font-size: 1.8rem;
    color: #5782A2;
    border-bottom: 3px solid #f1d033; /* 黄色でアンダーライン */
    display: inline-block;
    padding-bottom: 5px;
}

.vision-text {
    font-size: 1.15rem;
    line-height: 1.8;
}

/* 小さなデバイスでは枠線を少し細くする */
@media (max-width: 767.98px) {
    .vision-box {
        border-width: 3px;
    }
}


/* ------------------------------------------- */
/* 3. メインフッター */
/* ------------------------------------------- */

/* フッター全体の背景色と基本設定 */
.custom-footer {
    background-color: #f1d033 !important;
    color: #5782A2; /* 基本のテキストカラー */
}

/* リンクテキストの色 */
.custom-footer a {
    color: #5782A2 !important;
    transition: color 0.3s ease; /* 色の変化を滑らかに */
}

/* ホバー時のリンク色 */
.custom-footer a:hover {
    color: #ffffff !important; /* ホバーで白に変身！ */
}

/* 水平線（hrタグやborder）の色 */
.custom-footer .border-top {
    border-top: 1px solid #5782A2 !important; /* 空色のライン */
    opacity: 1; /* Bootstrapのデフォルトの透明度をリセット */
}

/* 見出しも空色 */
.custom-footer h4, 
.custom-footer h5 {
    color: #5782A2;
}

/* 著作権表記（一番下）のテキストカラー */
.custom-footer .copyright {
    color: #5782A2 !important;
    opacity: 0.8; /* ほんの少しだけ透けさせる */
}