/* 全体の文字や背景の基本設定 */
html {
  font-size: 16px;
}

body {
  margin: 0;
  font-family: 'Noto Sans', sans-serif;
  background-color: #ffffff;
  color: #333;
  line-height: 1.6;
}

/* ナビゲーションバー全体 */
.site-header {
  width: 100%;
  background: #ffffff;
  border-bottom: 1px solid #ccc;
  padding: 0.6rem 0;
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* 内部コンテンツを左右に分けて中央に寄せる */
.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.6rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
}

/* ロゴと事務所名 */
.logo {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.logo img {
  height: 80px;   /* ← ここを調整 */
  width: auto;    /* 縦横比を保つ */
  display: block;
}

.logo-text-jp {
  font-family: 'Noto Serif JP', serif;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 2.0rem;
  font-weight: bold;
  color: #333;
}

.logo-text-en {
  /* font-family: 'EB Garamond', serif;  ←明朝　*/
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.4rem;
  font-weight: normal;
  color: #666;
  letter-spacing: 0.5px;
  display: block;
  margin-top: 0.2rem;
}

.logo-text-block {
  line-height: 1.1; /* ← 全体の縦間隔をぎゅっと詰める */
}

.logo-text-jp {
  font-size: 1.8rem;
  line-height: 1.1;         /* ← 行間を詰める */
  margin-bottom: 0.1rem;    /* ↓ 英語との余白を小さく */
}

.logo-text-en {
  font-size: 1.2rem;
  line-height: 1;
  margin-top: 0;            /* ← 間を開けたくなければゼロに */
}


/* ヘッダー */
/* ヘッダー全体 */
.site-header {
  background-color: #fff;
  padding: 1.5rem 1rem 1rem;
  text-align: center;
}

/* ヘッダーナビ（フッターと同じ見た目） */
.top-nav ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 0;
  margin-top: 1rem;
  list-style: none;
}

.top-nav ul li a {
  position: relative;
  text-decoration: none;
  color: #333;
  font-weight: bold;
  padding: 0.2rem 0.4rem;
  font-size: 0.9rem;
}

/* 下に細い線を引く */
.top-nav ul li a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background-color: #999;
  transition: background-color 0.3s ease;
}

.top-nav ul li a:hover {
  color: #df6c00;
}

.top-nav ul li a:hover::after {
  background-color: #df6c00;
}



/* ナビゲーションメニュー（フッター） */
/* ---------------- フッター ---------------- */
footer {
  text-align: center;
  background-color: #f7f4ef;
  padding: 2rem 1rem;
}

footer .foot-nav ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;        /* スマホ対応で折り返し */
  gap: 1rem;              /* ナビの間隔 */
  padding: 0;
  margin: 0;
  list-style: none;
}

footer .foot-nav ul li a {
  position: relative;
  text-decoration: none;
  color: #333;
  font-weight: bold;
  padding: 0.2rem 0.4rem;
  font-size: 0.9rem;
}

/* 下に細い線を引く */
footer .foot-nav ul li a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background-color: #999;
  transition: background-color 0.3s ease;
}

/* ホバー時に線の色変化（任意） */
footer .foot-nav ul li a:hover::after {
  background-color: #df6c00;
}

footer p {
  margin-top: 1.5rem;
  font-size: 0.85rem;
  color: #555;
}

.foot-nav ul li a:hover {
  color: #df6c00;
}



/* ------------------------------------------*/
/* Heroギャラリー */
/* ← この親コンテナで位置調整 */
.hero-wrapper {
  width: 100%;
  overflow-x: hidden;  /* はみ出し対策 */
  position: relative;
}
.hero-gallery {
  width: 100%;
  position: relative;
  left: 0%; /* ＝ (120% - 100%) ÷ 2 */
  display: flex;
  flex-direction: column;
  gap: 0;
}

.hero-row {
  display: flex;
  justify-content: center;
  gap: 5px;  /* 写真と写真の間の横のすき間 */
  margin-bottom: 5px;  /* 写真行同士の縦のすき間（必要であれば） */
}

.hero-item {
  width: 50%;
  padding: 0
}

.hero-img {
  height: 400px;           /* 縦を固定 */
  object-fit: cover;       /* 中央をトリミング */
  display: block;
  width: 100%;
  }

/* 横幅個別指定（比率） */
.hero-img.wide {
  width: 60%;
}
.hero-img.narrow {
  width: 40%;
}
.hero-img.mid {
  width: 50%;
}

body, html {
  margin: 0;
  padding: 0;
}


/* オーバーレイテキスト（中央に表示） */
.hero-text-under {
  max-width: 1000px; /* 必要に応じて調整 */
  margin: 1rem auto 0 auto;
  padding: 1rem 2rem;
  background-color: rgba(255, 255, 255, 0.7);
  text-align: center;
  font-size: 1.5rem;
  font-family: 'Noto Serif JP', serif;
  color: #111;
  border-radius: 6px;
  line-height: 1.8;
}


/* プロジェクト紹介ギャラリー */
.projects-gallery {
  padding: 2rem;
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
}

.gallery-item {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 0;
}

.gallery-item img {
  display: block;
  width: 100vw;
  height: auto;
  object-fit: cover;
}

/* main の基本レイアウト調整 */
main {
  max-width: 1200px;
  margin: 2rem auto;
  padding: 0 1rem;
  line-height: 1.8;
}

/* フッター */
footer {
  text-align: center;
  padding: 1rem;
  background: #f0f0f0;
  margin-top: 2rem;
}



/*───────────────*/
/* Section 見出し（h2）デザイン */
main h2 {
  border-bottom: 1px solid #aaa;
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
  font-weight: 600;
  font-size: 1.5rem;
  color: #222;
}

/*会社概要─*/

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;  /* ← 少し小さめ */
  line-height: 1.5;
  margin-bottom: 2rem;
}

th, td {
  padding: 0.4rem 0.6rem;
  text-align: left;
  vertical-align: top;
}

th {
  font-weight: bold;
  color: #333;
  white-space: nowrap;
}


/*───────────────*/
/* 社長経歴・実績用 履歴リストデザイン */
.profile-history {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: flex-start;
  margin-bottom: 2rem;
}

.profile-photo {
  display: flex;
  flex-direction: column;   /* 縦方向に並べる */
  gap: 10px;                /* 写真の間に余白 */
  max-width: 200px;         /* 必要なら幅調整 */
}

.profile-photo img {
  width: 100%;
  height: auto;
  border-radius: 8px;       /* 既存と合わせる場合 */
  object-fit: cover;
}
.profile-history-list {
  flex: 1;
}

.history-list {
  width: 100%;
  border-left: none;
  margin-bottom: 2rem;
  position: relative;
  margin-left: 1.5rem;
  padding-left: 1.5rem;
}

.history-list::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: #d46700; /* 左の線 */
}

.history-item {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0.3rem 0;
  /* border-bottom はなし → 各 .history-content に入れる */
}

.history-item::before {
  content: "";
  position: absolute;
  left: -1.1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.6rem;
  height: 0.6rem;
  background-color: #d46700; /* ドット色 */
  border-radius: 50%;
}

.history-year {
  width: 120px; /* 固定幅 */
  text-align: left;
  font-weight: bold;
  color: #d46700;
  margin-right: 0.2rem;
  white-space: nowrap;
  font-family: 'Noto Sans', sans-serif;
}

.history-content {
  display: inline-block;
  width: 400px; /* 好みで調整OK！350〜450くらいが目安 */
  color: #444;
  line-height: 1.6;
  border-bottom: 1px dotted #d46700;
  padding-bottom: 0.2rem;
}

/*───────────────*/
/* メンバーリスト：シンプルリスト */

.simple-list {
  list-style: none !important; /* ← ★ これで黒い箇条書きを強制的に消す */
  padding: 0;
  margin: 0;
}

.simple-list li {
  position: relative;
  padding: 0.3rem 0 0.3rem 1.5rem;
  border-bottom: 1px solid #eee;
  font-size: 1rem;
  color: #333;
}

.simple-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0.6rem;
  height: 0.6rem;
  background-color: #d46700;
  border-radius: 50%;
}

/* 左にドット（あなたの指定色） */
.simple-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0.6rem;
  height: 0.6rem;
  background-color: #d46700;
  border-radius: 50%;
}


/*＿＿ メンバーリスト：苗字だけ＋イラスト入れれる＿＿＿ */
.members {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* 横に2〜3列で自動調整 */
  gap: 1rem;
  max-width: 700px;
  margin: 0 auto;
  padding: 1rem;
}

.member {
  text-align: center;
}

.member-name {
  display: inline-block;
  font-weight: normal; /* または 400 */
  font-size: 1rem;
  color: #000000;            /* アンダーラインと文字色を同じに */
  border-bottom: 2px solid #d46700;
  padding-bottom: 0.15rem;   /* 下線と文字の隙間 */
  user-select: none;         /* 選択不可にしたい場合 */
  white-space: nowrap;       /* 改行なし */
}


/*───────────────*/
/* ベージュ背景を入れたいときに使うクラス */
.section-bg {
  background-color: #dd7e2675; /* オレンジ */
  padding: 2rem 1rem;
  margin-bottom: 2rem;
  border-radius: 8px;
  max-width: 1000px; /* ← main に揃える！ */
  margin-left: auto;
  margin-right: auto;
}


/* ーーーー業務内容スタイリッシュ版ーーーー */
/* ── 業務内容リスト全体に背景色と余白を追加 ── */
.service-list {
  max-width: 1000px;
  margin: 2rem auto;
  padding: 2rem;
  background-color: #f0e2c9;  /* b69357d0　#ffe86981　← 明るいグレー背景 */
  border-radius: 8px;
  box-shadow: 0 0 8px rgba(0,0,0,0.05);
}

.service-item {
  border-bottom: 1px solid #000000;
  padding: 1rem 0;
  margin: 0;
}

.service-item h3 {
  font-size: 1.05rem;
  font-weight: bold;
  margin: 0;
  color: #1d1d1d;
}

.service-item p {
  font-size: 0.9rem;
  margin: 0.3rem 0 0;
  line-height: 1.6;
  color: #444;
}



/* ーーーーニュースセクションーーーー */
.news-section {
  max-width: 1200px;
  margin: 2rem auto;
  padding: 2rem 1rem;
  background-color: none; /* ベージュ背景 */
  border-radius: 8px;
}

.news-section h2 {
  border-bottom: 1px solid #aaa;
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
  font-weight: 600;
  font-size: 1.5rem;
  color: #222;
}

.news-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.news-list li {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px dotted #c4914e;
}

.news-date {
  font-size: 0.9rem;
  color: #666;
  white-space: nowrap;
}

.news-title {
  font-size: 1rem;
  color: #333;
}



/*───────────────*/
/* フッター色調整 */
footer {
  text-align: center;
  padding: 1rem;
  background: #f5f2eb; /* ベージュグレーで温かみ */
  margin-top: 2rem;
  color: #444;
}

/*─────────────────*/
/* 年表用タイムラインリスト：timeline-list（発展版） */
/* 用途：年表っぽく整列。年号＋分類別の項目を並べられる */

/* タイムライン全体 */
.timeline-list {
  position: relative; /* ← ドットや線のために relative にする */
  max-width: 1000px;  /* ← コンテンツの最大幅を 1000pxにして main に揃える */
  margin: 2rem auto;  /* ← 上下に余白2rem、左右中央揃え */
  padding: 0 2rem;    /* ← 左右に2remの余白 */
  list-style: none;   /* ← 黒い●などの通常リスト記号は消す */
  border-left: 2px solid #c4914e; /* ← 左に年表の縦線を表示（色はお好きに変えられる） */
}

/* 各年表の1アイテム */
.timeline-item {
  position: relative; /* ← ドットを絶対配置したいので relative に */
  display: flex;      /* ← 横並びにする（年号＋本文） */
  align-items: center;/* ← 縦の中心を揃える */
  padding: 0.4rem 0;  /* ← 上下に少し余白 */
}

/* ドット（●）部分 */
.timeline-item::before {
  content: ""; /* ← 疑似要素を使う（HTMLはそのままでOK） */
  position: absolute; /* ← ドットは絶対位置で配置する */
  left: -1.1rem;      /* ← 線のすぐ横にドットを置く */
  top: 50%;           /* ← 縦中央に配置 */
  transform: translateY(-50%); /* ← 完全に中央に整列 */
  width: 0.6rem;      /* ← ドットの幅 */
  height: 0.6rem;     /* ← ドットの高さ */
  background-color: #c4914e; /* ← ドットの色（分類によって色変え予定） */
  border-radius: 50%; /* ← 丸くする */
}

/* 年号（左側に配置する部分） */
.timeline-item .year {
  width: 100px;          /* ← 幅を固定する（ズレ防止） */
  text-align: left;      /* ← 左揃え */
  font-weight: bold;     /* ← 太字 */
  color: #c4914e;        /* ← 色（年号の色） */
  margin-right: 1rem;    /* ← 年号と本文の間に余白 */
  white-space: nowrap;   /* ← 改行させない */
  font-family: 'Noto Sans', sans-serif; /* ← フォント */
}

/* 本文（右側） */
.timeline-item .content {
  flex: 1;                       /* ← 残り幅を全部使う */
  color: #444;                   /* ← 本文の色 */
  line-height: 1.6;              /* ← 行間 */
  border-bottom: 1px dotted #c4914e; /* ← 下線（点線） */
  padding-bottom: 0.2rem;        /* ← 線との間隔 */
}

/* 分類別の色分け（任意） 
/* 後で li に class をつけるだけでOK（例：class="timeline-item new"） 

/* 新築 
.timeline-item.new::before {
  background-color: #3da5d9;  青系 */


/* 補強 
.timeline-item.repair::before {
  background-color: #e07a5f;  赤系 */


/* 歴史的建造物補強 
.timeline-item.heritage::before {
  background-color: #81b29a;  緑系 */


/* 開発 
.timeline-item.development::before {
  background-color: #f2cc8f; 黄色系 */

*/






/* ギャラリー用カテゴリナビ（別デザイン） */
.project-subnav {
  margin: 1rem 0;
  text-align: center;
}
.project-subnav {
  margin-top: 6rem; /* ← 60pxくらいが目安。ヘッダーの高さ分だけ余白を追加 */
  padding-top: 0.5rem;
}

.project-subnav ul {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.project-subnav ul li a {
  text-decoration: none;
  background: #eee;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  color: #333;
  font-weight: bold;
  transition: background 0.3s;
}

.project-subnav ul li a {
  padding: 0.3rem 0.8rem;  /* パディングを少し小さく */
  white-space: nowrap;      /* 文字を折り返さず1行に */
  display: inline-block;    /* 白抜きボックスを均一に */
  box-sizing: border-box;
}

.project-subnav ul li a:hover {
  background: #c4914e;
  color: white;
}

/* ・・・・・・ギャラリーそれぞれに飛ぶ・・・・・・ */
.gallery-item a {
  text-decoration: none;
  color: inherit; /* pの文字色もそのまま */
  display: block;
}

.gallery-item a:hover img {
  opacity: 0.85;
  transition: opacity 0.3s ease;
  cursor: pointer;
}

.gallery-item p {
  margin-top: 0.3rem;
  font-size: 0.9rem;
}


/* ギャラリー写真 */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* ★ 常に3列 */
  gap: 4px; /* 画像同士の間隔を狭める */
  margin: 2rem 0;
}

.gallery-item {
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gallery-item img {
  width: 100%;
  aspect-ratio: 4 / 3; /* ★ ここに移動！ */
  object-fit: cover;
  display: block;
  border-radius: 0;
}


/* ★ キャプションを明示的に表示 */
.gallery-item p {
  font-size: 0.9rem;
  text-align: center;
  margin: 0.5rem 0 1rem; /* ← ★ 最後の 1rem を追加！ */
  color: #333;
  line-height: 1.4;
  width: 100%;
}



/* //////////プロジェクトギャラリー全体のレイアウト設定/////////////////// */
.project-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));  /* ← 画像幅に応じて自動配置 */
  gap: 1.5rem;
  padding: 2rem 1rem;
}

.project-item img {
  width: 100%;            /* 親の幅いっぱいに */
  max-width: 240px;       /* ← 写真サイズをギャラリー風に制限（例: 240px） */
  height: auto;           /* 高さは自動で調整し、縦横比維持 */
  display: block;
  margin: 0 auto 0.5rem;  /* 中央揃え＋下に余白 */
  border: 1px solid #ccc; /* 枠線 */
  border-radius: 4px;     /* 角丸（不要なら削除可） */
}

/* ギャラリー内の各画像とテキストブロック */
.project-item {
  text-align: center;
}

/* smallギャラリー、KKAAでリンク 
.gallery-item a {
  color: #a15b00;
  text-decoration: underline;
}
*/
.gallery-item a:hover {
  opacity: 0.7;
}
/* 
.gallery-item p {
  white-space: nowrap;
}

.gallery-item a {
  display: inline-block;
}
 
.gallery-item a {
  white-space: nowrap;
  display: inline-block;
}

*/


.gallery-item a.external-credit {
  display: inline;
  text-decoration: underline;
  white-space: nowrap;
    color: #a15b00;
}

/* ＊＊＊＊＊＊＊＊＊＊＊ プロジェクト詳細ページ専用スタイル ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ */

/* ▼ 写真：コンパクトに並べてクリックで拡大できるようにする */
.gallery-thumbnail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); /* 自動で詰める */
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.gallery-thumbnail img {
  width: 100%;
  height: 300px;                /* 固定高さで揃える */
  object-fit: cover;           /* 切り取り表示（縦長も対応） */
  border-radius: 0;            /* 角丸なし */
  cursor: pointer;
  transition: transform 0.2s;
}

.gallery-thumbnail img:hover {
  transform: scale(1.02);      /* ホバー時に軽く拡大 */
}

/* ▼ 横長だけ高さを変えるバージョン（画像に class="landscape" を付けた場合） */
.gallery-thumbnail img.landscape {
  height: 150px; /* landscape専用高さ */
}


/* ▼ 見出し：2行にしたときに詰まりすぎないようにする */
.project-detail h2 {
  font-size: 1.4rem;
  line-height: 1.4;
  margin-bottom: 1rem;
}


/* ▼ 説明テーブル：項目と内容を揃えてコンパクトに */
.project-info {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
  line-height: 1.5;
  table-layout: auto;
}

.project-info th {
  text-align: left;
  white-space: nowrap;
  padding: 0.3rem 0.5rem 0.3rem 0;
  vertical-align: top;
  font-weight: bold;
  color: #333;
  width: 7em;  /* ← ここで右側と近づける距離を調整 */
}

.project-info td {
  padding: 0.3rem 0;
  color: #444;
}


/* ▼ 参照セクション：本文と差別化して強調表示 */
.project-description .reference {
  margin-top: 1.5rem;
  padding: 0.8rem 1rem;
  background-color: #fef8f2;     /* 優しい背景色 */
  border-left: 4px solid #d46700;
  font-size: 0.95rem;
  color: #222;
  line-height: 1.6;
}

.project-description .reference a {
  color: #d46700;
  font-weight: bold;
  text-decoration: underline;
}

/* ▼ 全リンク共通：色調整 */
a {
  color: #3366cc;
  text-decoration: underline;
}

a:hover {
  color: #cc3300;
}


/* ーーーーー書籍ーーーーーーー */
.book-list ul {
  list-style: none;
  padding: 0;
  margin: 2rem 0;
}

.book-list li {
  padding: 0.5rem 0;
  border-bottom: 1px dotted #ccc;
  line-height: 1.6;
  font-size: 1rem;
  color: #333;
}

.book-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin: 2rem 0;
  justify-items: center; /* 各アイテムを中央寄せ */
}

.book-item {
  width: 180px; /* 本全体の幅を固定（写真＋テキストに合わせて調整） */
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}


.book-item img {
  width: 100%;
  height: auto;
  object-fit: contain;
  margin-bottom: 0.8rem;
  border: 1px solid #ccc;
}

/* レイアウト */
.book-horizontal {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.book-horizontal img {
  width: 140px;
  height: 200px;        /* ←ここで揃う */
  object-fit: contain;  /* 余白が出ても切らない */
  border: 1px solid #ccc;
  display: block;
}

.book-horizontal img {
  width: 140px;
  height: 200px;
  object-fit: cover;    /* はみ出す分は切る */
  border: 1px solid #ccc;
  display: block;
}

.book-horizontal img {
  width: 140px;
  height: 200px;
  object-fit: cover;    /* 切って揃える */
  border: 1px solid #ccc;
  display: block;
}

.book-horizontal.meguru-img img {
  width: 160px;      /* bookと同じ感じに（140〜180で調整） */
  height: auto;
  max-height: 220px; /* ←縦長がデカくならない上限 */
  object-fit: contain;
  display: block;
  border: 1px solid #ccc;
}



.book-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}


.book-meta {
  margin: 0.2rem 0;
  color: #555;
  font-size: 0.9rem;
}


.book-link {
  margin-top: 0.5rem;
  padding: 0.4rem 1rem;
  background-color: #d46700;
  color: white;
  text-decoration: none;
  font-size: 0.9rem;
  width: fit-content;
  border-radius: 4px;
  border: 1px solid #000000;

  /* ★影をつける（軽い浮き感） */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);

  /* ★マウスホバー時に少し持ち上がるような効果（任意） */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.book-link:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 少し強くなる */
  transform: translateY(-2px); /* 少し持ち上がる動き */
}



.book-link:hover {
  background-color: #0056b3;
}

/* 各テキストブロックの統一 */
.book-title {
  font-weight: bold;
  font-size: 1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0.4rem;
  white-space: normal; /* 折り返しを許可 */
  word-break: break-word; /* 単語の途中でも折り返し */
  overflow-wrap: break-word; /* 古いブラウザ対応 */
  display: block; /* 必要に応じて */
}

.book-year,
.book-publisher,
.book-size {
  font-size: 0.9rem;
  margin: 0.2rem 0;
}

.book-item a {
  margin-top: 0.5rem;
  padding: 0.4rem 1rem;
  background-color: #007BFF;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  font-size: 0.9rem;
}

.book-item a:hover {
  background-color: #0056b3;
}

/* ───── 芽ぐる会ギャラリー ───── 
.meguru-gallery{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-top: 12px;
}

.meguru-card{
  display: block;
  border: 1px solid #ccc;
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
}

.meguru-card img{
  width: 100%;
  aspect-ratio: 3 / 4;   /* ← “枠”を揃える（ここが肝） 
  object-fit: contain;   /* 切らない（横長は余白が出る） 
  display: block;
}

.meguru-card img{
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;   /* ←切るけど統一感が最強 
  display: block;
}
.meguru-card{
  transition: transform .15s ease, box-shadow .15s ease;
}
*/



/* ───── 論文・雑誌記事・講演 各セクションの共通余白 ───── */
.papers-section,
.articles-section,
.lectures-section {
  margin: 3rem 0;
}

/* ───── 見出し（h3）デザイン ───── */
.papers-section h3,
.articles-section h3,
.lectures-section h3 {
  font-size: 1.2rem;
  color: #333;
  border-left: 5px solid #d46700;
  padding-left: 0.6rem;
  margin-bottom: 1rem;
}

/* ───── 各リストの基本スタイル ───── */
.paper-list,
.article-list,
.lecture-list {
  list-style: none;
  padding: 0;
  margin: 0;
  color: #444;
}

/* ───── 各アイテムの余白調整 ───── */
.paper-list li,
.article-list li,
.lecture-list li {
  margin: 0 0 0.8rem 0;
  padding: 0 0 0.4rem 0;
  border-bottom: 1px dotted #ccc;
  font-size: 0.95rem;
  line-height: 1.4;
}

/* ───── タイトル部分を太字に・間隔詰める ───── */
.paper-title,
.article-title,
.lecture-title {
  font-weight: bold;
  font-size: 1rem;
  color: #000;
  margin-bottom: 0.05rem;  /* ← さらに詰める */
  line-height: 1.2;        /* ← できるだけ小さめに */
  display: block;
  padding: 0;              /* ← 念のためリセット */
}
.paper-title {
  transform: translateY(10px); /* 下に少しずらす（慎重に調整） */
}

/* ───── メタ情報（2行目）のスタイル ───── */
.paper-meta,
.article-meta,
.lecture-meta {
  font-size: 1rem;
  color: #020202;
  margin-top: 0rem;        /* ← これも詰める */
  padding-top: 0;
}

.page-toc {
  background-color: #f7f4ef;
  padding: 1rem;
  margin-bottom: 2rem;
  border-radius: 6px;
  font-size: 0.95rem;
}

/* ───── パブリケーションページ目次分け250804更新 ───── 
.page-toc ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.page-toc a {
  text-decoration: none;
  color: #d46700;
  font-weight: bold;
}

.page-toc a:hover {
  text-decoration: underline;
} */

/* 目次ナビゲーション *//* ───── パブリケーションページ目次分け250804更新 ───── */
/*.publication-nav {
  background-color: #5a5549;
  padding: 0.6rem 1rem;
  margin-bottom: 2rem;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

.publication-nav ul {
  display: flex;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-weight: bold;
}

.publication-nav ul li a {
  color: #a15b00;
  text-decoration: none;
  font-size: 1rem;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
  transition: border-color 0.3s ease;
}

.publication-nav ul li a:hover,
.publication-nav ul li a:focus {
  border-bottom: 2px solid #a15b00;
}
*/

/* 各パート */
/* ─────.publication-section h2 {
  color: #000000;
  border-bottom: 2px solid #a15b00;
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}── */

/* ───── アコーディオン（折り畳み式）を追加251201 ───── */
/* ========= 女性構造家を芽ぐる会 内部アコーディオン ========= */
/* 説明文 */
.activity-intro {
  margin: 0.5rem 0 1rem;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* 各回の折りたたみブロック */
details.activity-item {
  background: #f0e2c9;
  border-radius: 6px;
  margin: 4px 0;
  padding: 4px 10px;
}
/*details.activity-item:hover {
  background-color: #b69357d0;
}*/

/* activity-item の見出し（summary） */
.activity-item > summary {
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* マウスを乗せたとき */
.activity-item > summary:hover {
   /* background-color: #e6d3a3;   /* 今のベージュより少し濃く */
  color: #4c00ff;
}

/* キーボード操作時（Tabなど） */
.activity-item > summary:focus {
  outline: none;
   /* background-color: #e6d3a3;*/
}

/* 開いている状態 */
.activity-item[open] > summary {
  /* background-color: #d9bf8c;*/
  font-weight: bold;
}


/* 各回タイトル行 */
.activity-item-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-weight: bold;
  font-size: 0.97rem;
}
.activity-important {
  color: #b00000; /* 落ち着いた赤（おすすめ） */
}

/* デフォルトマーカー消す */
.activity-item-summary::-webkit-details-marker {
  display: none;
}

/* 各回の右側アイコン */
.activity-item-toggle {
  font-size: 1rem;
  margin-left: 0.5rem;
}

/* 本文（中身） */
.activity-meta {
  margin: 0.2rem 0 0.4rem;
  font-size: 0.9rem;
  line-height: 1.5;
}

/* 各回のタイトル行に下線 */
.activity-item > summary {
  border-bottom: 1px solid #000000; /* 色はお好みで */
  padding-bottom: 4px;
  margin-bottom: 6px;
  display: inline-block;
  width: 100%;
}


/* ===== パブリケーション用アコーディオン共通 ===== */

.pub-accordion {
  border-radius: 6px;
  margin: 8px 0 16px;
  border: 1px solid #b48754;
  background: #ffffff;
}


/* 見出し部分（summary） */
.pub-summary {
  list-style: none;                 /* デフォルトの▼を消す */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 1rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

/* WebKitのデフォルトマーカーを消す */
.pub-summary::-webkit-details-marker {
  display: none;
}

/* 見出しテキストの見た目（既存h2に近づける） */
.pub-title {
  font-size: 1.1rem;
  font-weight: bold;
  color: #000000;
}

/* 右側の小さな▼マーク */
.pub-summary::after {
  content: "▼";
  font-size: 0.8rem;
  margin-left: 0.5rem;
}

/* 開いているときは▲にする */
.pub-accordion[open] .pub-summary::after {
  content: "▲";
}

/* ホバーしたときに少し色を変えて「押せそう」感を出す */
.pub-summary:hover {
  background-color: #f0e2c9;
}

.pub-body{
  padding: 0.4rem 1rem 0.8rem;
}


.pub-accordion,
.pub-body {
  height: auto;
  max-height: none;
  overflow: visible;
}



/* ===== 講演の折りたたみ ===== */
/* 1件ぶんの枠 
.talk-item {
  border-bottom: 1px dotted #c9c1b3;
  padding: 0.6rem 0;
  margin-bottom: 0.8rem;
} */

/* タイトル行全体（クリックできるところ） */
.talk-summary {
  cursor: pointer;
  list-style: none;
  display: block;          /* ← flex をやめて縦並びに */
  position: relative;
  padding-right: 1.5rem;   /* 右上の矢印ぶんの余白 */
}

.talk-summary::-webkit-details-marker {
  display: none;
}

/* 右上の ▼ / ▲ をテキストの上に重ねる */
.talk-summary::after {
  content: "▽";
  font-size: 0.8rem;
  position: absolute;
  right: 0;
  top: 0.2rem;
}
.talk-item[open] .talk-summary::after {
  content: "△";
}

/* 開閉アニメーションはそのまま使う */
.talk-body {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-height 0.3s ease,
    opacity 0.3s ease,
    padding-top 0.3s ease;
}
.talk-item[open] .talk-body {
  max-height: 1500px;
  opacity: 1;
  padding-top: 0.5rem;
}

/* 写真レイアウトはさっきのままでOK */
.talk-photos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}
.talk-photos img {
  width: 180px;
  border: 1px solid #ccc;
  border-radius: 4px;
}


/* ホバーしたときに少し色を変えて「押せそう」感を出す */
.talk-summary:hover {
  background-color: #f0e2c9;
}


/* ───── ------------------------------ ───── */
/* ───── お問い合わせフォームの基本設定 ───── */

/* フォーム全体のレイアウトと見た目 */
.contact-form {
  max-width: 800px;              /* 最大幅を制限 */
  margin: 2rem auto;             /* 中央寄せ & 上下に余白 */
  padding: 2rem;                 /* 内側にスペース */
  background-color: #f9f9f9;     /* 背景を淡いグレーに */
  border-radius: 8px;            /* 角をやや丸く */
  border: 1px solid #ccc;        /* 薄い枠線 */
  box-sizing: border-box;        /* はみ出し防止 */
}

/* セクションタイトルのスタイル */
.contact-form h2 {
  font-size: 1.2rem;
  margin-bottom: 1rem;
  color: #333;
}

/* ラベル（項目名） */
.contact-form label {
  display: block;               /* ブロック表示で縦配置 */
  margin-bottom: 0.3rem;        /* ラベルと入力欄の間隔 */
  font-weight: bold;
  color: #222;
}

/* 必須マーク（※）の装飾 */
.required-mark {
  color: red;
  font-weight: bold;
  margin-left: 0.2rem;
  font-size: 0.95rem;
}

/* 入力欄・セレクト・テキストエリアの共通スタイル */
input, select, textarea {
  width: 100%;
  padding: 0.5rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

/* テキストエリアの高さ */
textarea {
  resize: vertical; /* 高さ調整のみ可（横は不可） */
}

/* フォーム項目の基本ブロック */
.form-row {
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
}

/* 横並びにする項目群 */
.form-row-group {
  display: flex;
  gap: 1.5rem;  /* カラム間の間隔 */
  margin-bottom: 1rem;
}

/* 横並び内の1カラム */
.form-row.half {
  flex: 1;
}

/* 送信ボタン */
button {
  background-color: #007BFF;
  color: white;
  padding: 0.6rem 1.5rem;
  font-size: 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}




/* -----------------------------------------*/

/* ヘッダーの内部配置（PC向け） */
.header-inner {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

/* ハンバーガー初期非表示（PCでは） */
.hamburger {
  display: none;
  font-size: 2rem;
  cursor: pointer;
}

/* ナビゲーションメニュー */
.top-nav ul {
  display: flex;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}



/* ------------------ -------------------------*/
/* ------------------モバイル対応 -------------------------*/
/* ------------------モバイル対応 -------------------------*/
@media (max-width: 768px) {
  /* ヘッダー内の構成 */
  .header-inner {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }

  .site-header {
    position: static; /* スクロール時に追従させない */
  }

  /* ロゴのサイズ調整 */
  .logo img {
    height: 50px;
  }

  .logo-text-jp {
    font-size: 1.3rem;
    line-height: 1.2;
  }

  .logo-text-en {
    font-size: 0.9rem;
    margin-top: 0.1rem;
  }

  /* ハンバーガー いったん不要 
  /* ハンバーガーボタン表示 
  .hamburger {
    display: block;
    position: absolute;
    top: 1.2rem;
    right: 1.5rem;
    z-index: 2000;
  }

  /* ハンバーガー押すまで非表示のナビメニュー 
  .top-nav ul {
    display: none;
    flex-direction: column;
    align-items: center;
    background: rgba(20, 20, 20, 0.925);
    position: absolute;
    top: 60px;
    right: 0;
    width: 100%;
    padding: 1rem;
    border-top: 1px solid #202020;
    z-index: 999;
  }

  .top-nav.active ul {
    display: flex;
  }

  .top-nav ul li a {
    display: block;
    width: 100%;
    text-align: center;
    padding: 0.6rem 0;
    border-bottom: 1px solid #eee;
    color: #ffffff;
  }
*/

/* 選択中（.active などで制御） */
.top-nav ul li a.selected {
  border: 1px solid #c4c4c4;
  background-color: transparent;
  font-weight: bold;
}



  /* トップ写真（ヒーロー）縮小 */
  .hero-img {
    height: 200px;
    object-fit: cover;
  }

  .hero-gallery,
  .hero-row,
  .hero-item {
    width: 100%;
    margin: 0;
    padding: 0;
  }


/* スマホで左右に余白を出す */
  .service-list {
    padding: 1.5rem 1rem;  /* 上下1.5rem・左右1remで程よく */
  }

  .service-item h3 {
    font-size: 1rem;
  }

  .service-item p {
    font-size: 0.85rem;
  }

  /* オーバーレイテキスト小さめに */
.hero-text-under {
  max-width: 800px; /* 必要に応じて調整 */
  font-size: 1.5rem;
}

  /* 経歴　*/
  .profile-history {
    flex-direction: column;
  }

  .profile-photo img {
    width: 100%; /* 画面幅に合わせて伸ばす */
    max-width: 300px;
    margin: 0 auto;
    display: block;
  }

  .history-year {
    width: 100px;  /* スマホ用に短め */
    font-size: 0.9rem;
  }

  .history-content {
    width: 100%;  /* 横幅を画面サイズに合わせる */
    font-size: 0.9rem;
  }

/* 会社概要小さく */
  table {
    font-size: 0.85rem; /* モバイル用にさらに小さめ */
  }

  th, td {
    padding: 0.3rem 0.5rem;
  }

/* ヘッダー */
  .site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: #fff; /* 背景をつけないと後ろが透けて見える場合がある */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 影を付けると浮き出て見える */
    padding: 0.1rem 0.5rem; /* ← 大きければ小さくする */
}

  .site-header {
    padding: 0.3rem 0.8rem;
  }

  .logo img {
    height: 30px;
  }

   .logo-text-jp {
    font-size: 1rem;
    line-height: 1.1;
    margin-bottom: 0.05rem;
  }

  .logo-text-en {
    font-size: 0.8rem;
    margin-top: 0;
    line-height: 1;
  }

  .logo-text-block {
    line-height: 1.1;
  }

  body {
    padding-top: 70px; /* ← ヘッダー高さ分だけ余白をつける */
  }

    /* ハンバーガーは不要なので非表示 */
  .hamburger {
    display: none;
  }
  /* ナビ全体を表示 */
  .top-nav {
    display: block;
    width: 100%;
    margin-top: 1rem;
  }

  .top-nav ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .top-nav ul li a {
    position: relative;
    text-decoration: none;
    color: #333;
    font-weight: bold;
    padding: 0.2rem 0.4rem;
    font-size: 0.9rem;
  }

  .top-nav ul li a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 1px;
    background-color: #999;
    transition: background-color 0.3s ease;
  }

  .top-nav ul li a:hover {
    color: #df6c00;
  }

  .top-nav ul li a:hover::after {
    background-color: #df6c00;
  }

/* 事務所名とナビの間 */
  .logo-text-block {
    margin-bottom: 0.2rem;
  }

  .top-nav {
    margin-top: 0.2rem;
  }

  .header-inner {
  gap: 0.5rem; /* ← 事務所名とナビの間 */
}

@media (max-width: 768px) {
  .gallery-two-column {
    grid-template-columns: 1fr; /* スマホでは1列 */
  }
}



  }


/* ーーーーーーーーーーーーブログーーーーーーーーーーーーーーー */
  
.blog-entry {
  max-width: 1000px;
  margin: 2rem auto;
  padding: 1rem;
  background: #fffaf2;
  border-radius: 6px;
  box-shadow: 0 0 10px rgba(0,0,0,0.05);
}

.blog-entry h1 {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
  color: #814f1d;
}

.blog-date {
  font-size: 0.9rem;
  color: #888;
  margin-bottom: 1.5rem;
}

.blog-body p {
  line-height: 1.6;
  margin: 1rem 0;
}

/* 旅行写真用ギャラリー */
.travel-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: flex-start;
  margin-top: 1.5rem;
}

.travel-gallery img {
  width: 200px;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.travel-gallery img {
  width: 200px;
  height: 300px; /* 高さを固定 */
  object-fit: cover; /* 画像を中央トリミングで表示 */
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}


.travel-gallery img {
  width: auto;
  max-width: auto;
  max-height: 300px;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* スマホ向け */
@media (max-width: 600px) {
  .travel-gallery img {
    width: 100%;
    height: auto;
    object-fit: contain; /* 高さを自動で比率維持 */
  }

  .travel-gallery {
    flex-direction: column;
    align-items: center; /* 中央寄せ（好みに応じて） */
  }
}