/* 全体設定 */
body {
  font-family: 'Georgia', 'Yu Mincho', serif;
  background-color: #fdfdfc;
  color: #222;
  line-height: 1.8;
  margin: 3em auto;
  padding: 0 1.2em;
  word-wrap: break-word;
  font-size: 18px;
}

.kuroi-hane {
  width: 200px;
  height: 200px;
  transition: transform 0.4s ease-in-out;
  display: block;
  margin: 0 auto;
}

.kuroi-hane:hover {
  transform: rotate(-1deg) translateY(-3px);
}

body.index{
  max-width: 1100px;
}
body:not(.index){
  margin:0 auto;
  max-width: 700px;
  padding:0 1.2em;
  }
  

header p{
  text-align:center;
  }

footer {
  max-width:600px;
  margin:0 auto;
  
  }

/* リンク */
a {
  color: #2b4f72;
  text-decoration: none;
  font-weight: 500;
  background-image: linear-gradient(to bottom, rgba(62,92,118,0.4) 0%, rgba(62,92,118,0.4) 100%);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.3s ease, color 0.3s ease;
}

a:hover {
  color: #1a2e44;
  background-size: 100% 2px; /* ホバー時に下線を太くする */
}

.index a{
    background:none;
  }

/* 見出し */
h1, h2, h3 {
  font-family: 'Helvetica Neue', sans-serif;
  color: #111;
  font-weight: 400;
  padding-left: 0.5em;
  margin-top: 2em;
  margin-bottom: 1em;
}

h1 {
  font-family: 'Helvetica Neue', 'Yu Gothic', sans-serif;
  font-size: 1.5em; /* ↓ 小さめに抑える */
  font-weight: 500; /* ↑ 少しだけ太くして存在感キープ */
  letter-spacing: 0.08em; /* わずかに字間を広げて余白で主張 */
  line-height: 1.4;
  margin-top: 1.5em;
  margin-bottom: 1em;
  padding-left: 0; /* 左インデントを削除して中央寄せにも適応 */
  text-align: center; /* ページ中央に寄せる */
  position: relative;
}

header{
    margin-bottom: 2em;
  }
  
  

.index h1 {
  font-family: 'Helvetica Neue', 'Yu Gothic', sans-serif;
  font-size: 2.2em;
  color: #111;
  text-align: center;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.5em;
  margin: 0 0 1em 0;
  background: linear-gradient(to right, transparent 5%, #000 50%, transparent 95%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;

  /* 下線（黒のグラデ風） */
  position: relative;
}

.index h1::after {
  content: "";
  display: block;
  width: 40%;
  height: 2px;
  margin: 0.6em auto 0;
  background: linear-gradient(to right, transparent, #333, transparent);
  
}






h2 {
  font-size: 1.5em;
}
.subtitle {
  font-size:1em;
  }


h3 {
  font-size: 1.2em;
}




hr {
  border: none;
  height: 1px;
  background: linear-gradient(to right, transparent, #333, #000, #333, transparent);
  margin: 3em auto;
  width: 60%;
  opacity: 0.7;
}




/* 引用 */
blockquote {
  font-size: 1.1em;
  line-height: 1.75;
  margin: 2em auto;
  padding: 1.4em 1em;
  background: #fdfdfd;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  border-radius: 0.5em;
  max-width: 90vw;
  color: #333;
  box-sizing: border-box;
}

@media (max-width: 600px) {
  blockquote {
    padding: 1em;
    max-width: 95vw;
  }
}


/* 画像 */
img {
  max-width: 100%;
  display: block;
  margin: 1.5em auto;

}

header img{
  margin:0 auto;
  }


.original {
 font-size:80%;
 text-align:center;
  }
  
  /*　セクションリスト　*/
  
 .grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2em;
  margin: 2em 0;
}

.section-card {
  padding: 1em;
}

.section-card h2 {
  margin-top: 0;
  font-size: 1.2em;
  display: flex;
  align-items: center;
  gap: 0.8em; /* 文字と線の間隔 */
  font-weight: normal;
}

.section-card h2::after {
  content: "";
  flex-grow: 1;
  height: 1px;
  background-color: #aaa;
  display: block;
  opacity: 0.6;
}

.section-card ul {
  list-style: none;
  padding-left: 0;
  margin: 0.5em 0 0 0;
}

.section-card a{
  border:none;
  }
  
  /*　ホームボタン  */
  
  
.home-button {
  display: block;
  margin: 8em auto 2em auto;
  padding: 0.7em 1.8em;
  font-family: 'Helvetica Neue', 'Yu Gothic', sans-serif;
  font-size: 1em;
  font-weight: 800;
  text-shadow: 0.5px 0 0 currentColor, -0.5px 0 0 currentColor;
  letter-spacing:0.3em;
  text-decoration: none;
  color: #CCC;
  background: linear-gradient(145deg, #444, #222);
  border: 1px solid #555;
  border-radius: 2em;
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.25),
    inset 0 1px 2px rgba(255, 255, 255, 0.05);
  transition: all 0.25s ease;
  text-align: center;
}

.home-button:hover {
  background: linear-gradient(145deg, #555, #2a2a2a);
  color: #ffffff;
  box-shadow:
    0 6px 10px rgba(0, 0, 0, 0.35),
    inset 0 1px 3px rgba(255, 255, 255, 0.08);
  transform: translateY(-1px);
}

.home-button:active {
  background: linear-gradient(145deg, #1a1a1a, #101010);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6);
  transform: translateY(1px);
}



/* 目次  */

#toc {
  background: #f9f9f9;
  padding: 1em;
  margin-left:2em;
  border: 1px solid #ccc;
  max-width: 300px;
  font-size: 0.9em;
}
#toc ul {
  list-style: none;
  padding-left: 0;
}
#toc li {
  margin: 0.25em 0;
}
#toc a {
  text-decoration: none;
  color: #0077cc;
}
#toc a:hover {
  text-decoration: underline;
}



/* スマホビュー */

@media (max-width: 600px) {
  body {
    padding: 1em;
  }
  blockquote {
    margin: 1.5em 1em;
    padding: 1em;
  }
  h1 { font-size: 1.8em; } 
}