/* サイト全体の背景色 */
body {
    background-color: #f3f2ec;
  }

/* サイト全体の文字色 */
body {
  color: #2b3c1a;
}

#gundam1 {
  background-color: #f3f2ec;
}

#gundam2 {
  background-color: #edebe4;
}

#gundam3 {
  background-color: #f3f2ec;
}

#gundam4 {
  background-color: #edebe4;
}

#contact-me {
  background-color: #edebe4;
}

/* このように「順番にフォントを指定」しておくことで、 */
/* どれかのフォントが入ってなかったときも、次のフォントでちゃんと表示されます */
body {
font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
}

/* メニューバーがページをスクロールしても常に上に張り付く */
/* 固定されるので、その下のコンテンツがメニューバーに隠れる */
body {
  padding-top: 56px; /* 固定メニュー分、本文を下げる */
}

.main-logo {
    display: flex;
    justify-content: center; /* 横方向の中央揃え */
    align-items: center;     /* 縦方向の中央揃え */
  }

.main-logo img {
margin-top: 10px; /* 好きな数値に調整できるよ */
}

/*
.navbar {
    background-color: transparent !important;
  }
*/
/* メニューバーの背景色をサイトの背景色に合わせる */
.navbar {
  background-color: #f3f2ec !important; /* !importantで上書きしてあげる必要がある */
}

/* object-fit: cover;だと、画像がトリミングされるので注意 */
.carousel-inner img {
  width: 100%;
  height: auto;
  max-height: 90vh; /* 画面の高さの90%以内に収める */
  object-fit: contain; /* トリミングせず、全体を縮小表示 */
  background-color: #f3f2ec; /* 画像の外側に余白が出るので、背景色を設定しておくときれい */
}

/* メニューバーの文字色 */
.navbar, .navbar a, .navbar .nav-link, .navbar-brand {
  color: #2b3c1a;
}

/* ホバー時も色を指定 */
.navbar a:hover, .navbar .nav-link:hover, .navbar-brand:hover {
  color: #e99a24;
}

/* ドロップダウンメニューの文字色 */
.dropdown-menu a {
  color: #2b3c1a;
}

/* スライダーの内側に余白を入れる */
.carousel-item .row {
  padding: 30px 0; /* 上下30px、左右0px */
}

/* スライダーの左右矢印（＜とか＞）に色をつける */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  filter: invert(29%) sepia(14%) saturate(1526%) hue-rotate(54deg) brightness(95%) contrast(88%);
}

/* セクションタイトル */
.heading1-title {
  font-size: 2.5rem; /* 少し大きめ */
  font-weight: bold;
  text-align: center; /* 中央寄せ */
  margin-top: 2rem; /* 上に余白を追加 */
  margin-bottom: 2rem; /* 下に余白 */
  color: #2b3c1a; /* サイトの基本カラー！ */
} 
.heading2-title {
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center; /* 中央寄せ */
  margin-bottom: 2rem; /* 下に余白 */
  color: #2b3c1a; /* サイトの基本カラー！ */
}
.heading3-title {
  font-size: 1rem;
  font-weight: bold;
  text-align: center; /* 中央寄せ */
  margin-top: 1rem; /* 上に余白を追加 */
  margin-bottom: 2rem; /* 下に余白 */
  color: #2b3c1a; /* サイトの基本カラー！ */
}
/* =====================================
   セクション: gundam2 ギャラリーサイト
======================================= */
/* 内側に余白を入れる */
#gundam2 .row {
  padding: 30px 62px; /* 上下30px、左右62px */
}

.callout {
  padding: 1.5rem;
  margin: 1rem 0;
  border: 1px solid #edebe4;
  border-left: 5px solid #e99a24;
  background-color: #edebe4;
}

/* =====================================
   セクション: gundam3 ギャラリーサイト
======================================= */
.gallery-img {
  cursor: pointer;
  transition: 0.3s;
}
.gallery-img:hover {
  opacity: 0.8;
}
.modal-content {
  background: transparent;
  border: none;
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
  filter: invert(1); /* 白色にする */
}

/* gundam3 section ギャラリーサイト スライダーの背景色 */
/* ▼スライド1枚1枚に背景色をつける！ */
/*
#carouselGallery .carousel-item img {
  background-color: #100d0a; 
}
*/
#carouselGallery .carousel-item img {
  background-color: rgba(255, 255, 255, 0.8); /* 白の80%不透明 */
  padding: 10px;
  border-radius: 8px; /* 角丸でやわらかい印象に */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* ほんの少し影をつけると浮き上がる */
}


/* 以下を設定しても表示は変わらなかった */
#carouselGallery .carousel-item img {
  max-height: 80vh; /* 画面高さいっぱいにしすぎない */
  object-fit: contain; /* 画像をトリミングせず収める */
  margin: auto; /* 中央揃え */
}

/* モーダルヘッダーで×ボタンを追加したら、ヘッダーの下に境界線が現れるので消す */
.modal-header {
  border-bottom: none;
}

/* インジケーターの色と形 */
.carousel-indicators [data-bs-target] {
  background-color: #e99a24;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin: 0 4px;
}

/* インジケーターの位置 */
.custom-indicators {
  position: absolute !important;
  bottom: -20px !important; /* 画像との間にスペースを確保 */
}

/* 独自CSSクラス（custom-caption）を定義 */
/* 独自CSSクラス（custom-caption）はhtmlではなく、gallery.jsの中で追加 */
.custom-caption {
  color: #ffcc00;
}

/* =====================================
   セクション: Contact me お問い合わせ
======================================= */
/* 内側に余白を入れる */
#contact-me .row {
  padding: 30px 62px; /* 上下30px、左右62px */
}

/* マウスカーソルを書き込み禁止マークにする */
input[readonly], textarea[readonly] {
  cursor: not-allowed;
}
/* =====================================
   フッターのデザイン
======================================= */
footer.custom-footer {
  background-color: #e99a24;
  color: #2b3c1a;
  }
  
footer.custom-footer a {
color: #2b3c1a;
text-decoration: underline;
}

footer.custom-footer a:hover {
color: #3d5228; /* 少し明るい色に変化 */
}
/* フッターを最下部に固定する　ここから */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}
/* フッターを最下部に固定する　ここまで */