/* レイアウトのズレ予防（ページごとのスクロールバー有無で横幅が変わるのを防ぐ） */
html{overflow-y:scroll;scrollbar-gutter:stable;}
html,body{overflow-x:hidden;}

/* ページ全体の基本設定 */
body{
  margin:0;
  font-family:"Yu Gothic","YuGothic","Yu Gothic UI","Hiragino Kaku Gothic ProN","Meiryo",sans-serif;
  line-height:1.7;
}

/* 中央寄せ＋余白（レイアウトの土台）
   - max-width で本文幅を制限
   - margin:0 auto で中央寄せ
   - padding で上下左右に最小限の余白 */
.wrap{
  max-width:980px;
  margin:0 auto;
  padding:24px 16px;
}

/* ヘッダー内を「左:タイトル、右上:ナビ」に分ける
   - display:flex で横並びにする
   - justify-content:space-between で左右に分ける
   - align-items:flex-start で上端を揃え、ナビが右上に来やすくする */
.site-header .wrap{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
}

/* タイトルの余白を整える（h1のデフォルト余白を消す） */
.site-title{
  margin:0;
  font-size:24px;
  font-weight:600;
}

/* ナビを横並びにする
   - display:flex でリンクを横に並べる
   - gap で間隔
   - flex-wrap で画面が狭い時に折り返せるようにする */
.nav{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

/* リンクの下線を消す
   - color:inherit で文字色を本文と揃える */
.nav a{
  text-decoration:none;
  color:inherit;
  font-weight:600;
}

/* トップのロゴ表示エリア：画面の高さからヘッダー分を引いた高さを最低限確保し、中央に配置する */
.top-logo{
  min-height:calc(100vh - 180px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
}

/* TOPのロゴ画像：100vw をやめて 100% にする（横ズレの原因を潰す） */
.top-logo-img{
  width:100%;
  max-width:100%;
  height:auto;
  max-height:100%;
  display:block;
}

/* 通常リンク */
a{
  color:#000;
  text-decoration:none;
}

/* 訪問済みリンク */
a:visited{
  color:#888;
}

/* ホバー時 */
a:hover{
  color:#000;
}

/* クリック中 */
a:active{
  color:#000;
}

/* =========================================
   Failure Dictionary（五十音リンク）用CSS
   ========================================= */

.kana-list{
  list-style:none;
  padding-left:0;
  margin:16px 0;
}

.kana-row{
  margin:0 0 14px;
}

.kana-row a{
  display:inline-block;
  font-size:1.15rem;
  font-weight:600;
  margin-right:16px;
}

.failure-description{
  margin:8px 0 20px;
  font-size:0.95rem;
  color:#000;
}

/* 読み物系セクション間の間隔を統一 */
#texts,
#failure-dictionary,
#archives-list{
  margin-top:80px;
}

/* 文中の区切り記号（□）を中央に配置 */
.mark{
  display:block;
  text-align:center;
  margin:1.5em 0;
}

/* ===============================
   Architecture 作品ページ：画像サイズ制御
   =============================== */

.architecture-figure{
  max-width:720px;
  margin:48px auto;
}

.architecture-figure img{
  width:100%;
  height:auto;
  display:block;
}

/* フッター内の wrap だけを中央揃えにする */
.site-footer .wrap{
  text-align:center;
}

/* 建築ページの画像まわり */
.architecture-figure img{
  display:block;
  width:100%;
  margin-bottom:24px;
}

/* =========================================
   Works / Archives 共通タイトル行
   左にタイトル、右に年号や日付を置く
   ========================================= */

.entry-title{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:24px;
  margin:0 0 32px;
}

.entry-title-text{
  display:block;
}

.entry-year{
  margin-left:auto;
  font-size:0.9em;
  font-weight:inherit;
  color:inherit;
  white-space:nowrap;
}

/* =========================================
   Works / Archives 共通一覧
   左にタイトル、右に年号を並べる
   ========================================= */

/* ul の黒丸と左のへこみを消す */
.entry-list{
  list-style:none;
  padding-left:0;
  margin:16px 0 0;
}

.entry-list li{
  margin:10px 0;
}

/* 1行まるごとをリンク化し、左にタイトル・右に年号を置く */
.entry-list .entry-link{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:1rem;
  text-decoration:none;
  font-size:1rem;
  font-weight:600;
}

/* 年号が途中で改行されないようにする */
.entry-list .year{
  white-space:nowrap;
}

/* =========================================
   Works / Archives 各セクションの縦間隔
   ========================================= */

main > section{
  margin-top:64px;
}

main > section:first-of-type{
  margin-top:32px;
}

main h2{
  margin:0 0 16px;
}

main h2 + *{
  margin-top:0;
}

/* 写真一覧を、ヘッダーや本文と同じ幅の中で並べる */
.photo-grid-full{
  /* 写真を格子状に並べる */
  display:grid;

  /* 横に4枚ずつ並べる */
  grid-template-columns:repeat(4,1fr);

  /* 写真と写真の間隔 */
  gap:12px;

  /* 写真一覧の上に少し余白をつくる */
  margin-top:32px;
}

/* グリッド内の画像設定 */
.photo-grid-full img{
  /* 画像を枠いっぱいに広げる */
  width:100%;

  /* 横5：縦4の比率にする */
  aspect-ratio:5 / 4;

  /* 枠からはみ出す部分はトリミングする */
  object-fit:cover;

  /* 画像下に余計な隙間が出ないようにする */
  display:block;
}

/* スマホ表示の設定 */
@media (max-width:700px){
  .photo-grid-full{
    /* スマホでは横2枚ずつにする */
    grid-template-columns:repeat(2,1fr);

    /* スマホでは写真同士の間隔を少し狭くする */
    gap:6px;
  }
}

/* 年賀状ページの画像サイズ調整
   - max-width: 画像が大きくなりすぎないように、最大幅を600pxにする
   - width: 画面が狭いときは、画面幅に合わせて自動で縮む
   - height: 画像の縦横比を保つ
   - display:block: 画像をブロック要素にして、余計なすき間を防ぐ
   - margin:0 auto: 画像を中央寄せにする */
.nengajo-image{
  max-width:600px;
  width:100%;
  height:auto;
  display:block;
  margin:0 auto;
}

/* 作品ページ・年賀状ページのタイトル
   - タイトルを左、年号を右端に配置する */
.work-title{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:24px;
}