/* 共通スタイル */
html, body {
  margin: 0;
  padding: 20px;
  height: 100%;
  flex-direction: column;
  align-items: center; /* 中央揃え */
}

/* [slug].astro のテキストをすべて 10pt にする */
main {
  width: calc(100% - 40px); /* ヘッダーと同じ計算 */
  margin: 0 auto;          /* 中央寄せ */
  padding: 20px;           /* ヘッダーと同じパディング */
  font-size: 10pt;
}

/* ヘッダー共通スタイル */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background-color: #F6F6F6;
  width: calc(100% - 40px); /* paddingを考慮して計算 */
}

h1 {
  font-size: 10pt;
  color: #24140e;
  margin: 0;
  font-weight: normal;
}

nav a {
  color: #24140e;
  text-decoration: none;
  margin-left: 10px;
  font-size: 10pt;
}


/* リンク要素にマージンを追加 */
nav a {
  color: #24140e;
  text-decoration: none;
  margin-left: 10px;
  font-size: 10pt;
  margin-right: 40px; /* 右側にマージンを追加 */
}

@media (max-width: 768px) {
  nav a {
    margin-right: 5px; /* スマホ版ではマージンを小さくする */
  }
}



/* テキスト選択時のスタイル */
*::selection {
  color: #68a9cf; /* 選択したテキストの文字色 */
}

/* Firefox用の選択スタイル */
*::-moz-selection {
  background: #68a9cf; /* 選択したテキストの背景色 */
  color: white; /* 選択したテキストの文字色 */
}

.masonry-container {
  column-count: 3; /* ✅ 3列に並べる */
  column-gap: 15px; /* ✅ 列の間隔を小さくする */
  width: calc(100% - 40px); /* paddingを考慮して計算 */
  padding-left: 20px; /* ✅ 左の余白を調整 */
  padding-right: 20px; /* ✅ 右の余白を調整 */
  margin: 10pt auto; /* ✅ 中央揃え & 上下余白 */
}

.project-card img {
  width: 100%; /* ✅ 画像の幅を最大化 */
  height: auto;
  border: none;
  box-shadow: none;
  border-radius: 0;
}
/* PC共通: 左寄せにする */
.project-card h2 {
  text-align: left; 
  /* その他のスタイル */
}

/* プロジェクトカード全体のリンクから下線を削除 */
.project-card {
  text-decoration: none;
}

/* ✅ 画像の下のタイトルを10ptにする */
.project-card a {
  text-decoration: none; /* ✅ 下線を削除 */
  color: black; /* ✅ 文字色を黒に変更 */
  font-size: 10pt; /* ✅ フォントサイズを維持 */
  font-weight: 800;       /* 少し重いフォントウェイト */
  margin-bottom: 10px;   /* 画像の下に10pxの余白を追加 */
}

.project-card h2 {
  font-size: 10pt; /* ✅ フォントサイズを指定 */
  font-weight: 800;       /* 少し重いフォントウェイト */
  text-align: left; /* ✅ 左揃え */
  margin: 0; /*適度な間隔 */
  font-weight: normal;
  color: black;
  margin-bottom: 30px;   /* 画像の下に10pxの余白を追加 */
}

.project-image {
  display: flex;
  flex-direction: column; /* 縦に並べる */
  gap: 15px; /* 画像同士の隙間を30px */
  margin: left;      /* 中央寄せ */
  max-width: 800px;       /* 画像の最大横幅を800pxにしたい例 */
  width: 100%;            /* 画面が狭いときは縮小 */
}

.project-caption {
  font-size: 12pt;
  color: #000000;
  text-align: center;
  text-decoration: none; /* 下線を消す */
  margin-bottom: 30px; /* 文字の下に10pxのマージンを追加 */
}


/* About・Contactページのコンテンツを左寄せ */
.section, .about-section, .contact-section {
  max-width: 800px;
  margin-left: 0; /* 左寄せ */
  padding: 20px;
}

/* Aboutページ */
.about-section, .contact-section {
  display: flex;
  flex-direction: column; /* 縦並びに設定 */
  justify-content: flex-start; /* 左寄せ */
  align-items: flex-start;
  width: 100%;
  padding: 20px;
}

.about-content, .contact-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  text-align: left; /* 左寄せ */
}

/* Aboutページ */
.about-title {
  font-size: 10pt;
  margin-bottom: 20px;
  color: #333;
}

.about-text,.contact-text {
  font-size: 10pt;
  line-height: 1.6;
  color: #24140e;
  white-space: pre-line !important;
}

.instagram-link {
  text-decoration: none; /* 下線を消す */
  color: inherit;        /* 親要素の文字色を継承 */
}

.contact-form {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top: 20px; /* フォームと本文の間にスペース */
}

/* フォームグループ */
.form-group {
  display: flex;
  flex-direction: column; /* フォーム項目を縦に並べる */
  margin-bottom: 15px;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 10px;
  margin-top: 5px;
  border: none; /* ボーダーを完全になくす */
  border-bottom: 1px solid #ccc; /* 下線を追加 */
  background-color: transparent;
  text-align: left;
  color: #24140e;
  font-size: 10pt;
}

/* フォーカス時のスタイル */
.form-group input:focus,
.form-group textarea:focus {
  border-bottom: 1px solid #68a9cf;
  color: #24140e;
}

/* 送信ボタン */
.submit-button {
  background-color: transparent;
  color: #24140e;
  padding: 10px 20px;
  border: 1px solid #ccc;
  border-radius: 0px;
  cursor: pointer;
  font-size: 10pt;
  transition: background-color 0.3s, color 0.3s;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-bottom: 1px solid #68a9cf; /* 下線のスタイルはそのまま */
  outline: none; /* フォーカスリングを消す */
}

.footer {
  background-color: transparent;
  color: black;
  text-align: left;
  width: calc(100% - 40px); /* ヘッダーと同じ幅 */
  margin: 0 auto;         /* 中央寄せ */
  font-size: 10pt;
}


/* WebKit系（Chrome, Safari） */
::-webkit-scrollbar {
  display: none;
}

/* Firefox */
html {
  scrollbar-width: none;
}

/* スマホ用レスポンシブデザイン */
@media (max-width: 768px) {
  body {
    padding: 0; /* 左右の余白を完全に無くす */
    margin: 0; /* 余計なマージンがないように */
    width: 100%; /* ボディを画面いっぱいに広げる */
  }

  header {
    padding: 0; /* ヘッダーの左右の余白を削除 */
    margin: 0; /* 左右のマージンを完全に削除 */
    width: 100%; /* ヘッダーの幅を画面いっぱいに */
  }

  .section, .about-section, .contact-section {
    width: 100%; /* セクション幅を100%に設定 */
    margin: 0; /* 左右のマージンを完全に削除 */
    padding: 0; /* 左右のパディングを削除 */
  }

  .footer {
    padding: 0 px; /* フッターのパディングを調整 */
  }

  nav a {
    margin-right: 3px; /* スマホ版ではマージンを小さくする */
  }

  .masonry-container {
    column-count: 1;
    column-gap: 10px;
    width: 100%; /* ボディを画面いっぱいに広げる */
    margin: 0 auto;       /* これで中央寄せ */
    padding: 0;             /* 必要ならパディングをリセット */
  }
  .project-card {
    width: 100%; /* ✅ 画像の幅を最大化 */
    margin-bottom: 10px; /* ✅ 下の余白を確保 */
  }

  .project-card img {
    width: 100%; /* ✅ 画像を親要素いっぱいに */
    height: auto;
  }

  .project-card h2 {
    font-size: 10pt; /* ✅ フォントサイズを少し大きめに */
    text-align: left; /* ✅ タイトルを中央揃え */
  }
  .project-image {
    margin: left;/* 中央寄せ */
    width: 100%;
    margin: 0 auto;       /* これで中央寄せ */
    gap: 15px;
    padding: 0;             /* 必要ならパディングをリセット */
  }

  .main-inner {
    width: 100%;
    margin: 0 auto;
    padding: 0;             /* 必要ならパディングをリセット */
  }
  .footer {
    width: 100%;
    margin: 0 auto;
    padding: 0;   
  }
    
}