@import url('sanitize.css');

/* navigation（nav.html) */
.menu {
  display: flex;
  gap: 10px;
}

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
}

nav h1 {
  font-size: 1.5em;
  font-weight: bold;
}

/* li {
  border: 1px solid #ccc;
} */

/* main {
  width: 700px;
  padding: 10px;
} */

/*****************/
/* Bodyタグの部分　*/
/*****************/
body {
  background-color: #fafafa;
}

/*****************/
/* 汎用タグの部分　*/
/*****************/

.underline {
  text-decoration: underline;
}

/*****************/
/* mainタグの部分　*/
/*****************/

main {
  width: 100%; /* 画面幅いっぱいに広げる */
  max-width: 700px; /* 最大でも700pxまでに制限（大型画面用） */
  padding: 10px;
  margin: 0 auto; /* 中央に配置（横幅が狭まっても中央） */
  box-sizing: border-box; /* paddingも含めた幅で調整 */
}

main h1 {
  margin: 30px 0 10px 0;
}

main table {
  font-size: 0.8em;
  color: #333;
}

main .year {
  margin: 0 10px 0 0;
  min-width: 120px;
  line-height: 1.8;
}

main li {
  font-size: 0.8em;
  padding-left: 2em; /* 全体を右にずらす */
  text-indent: -2em; /* 1行目だけ左に戻す（ぶら下げ） */
  margin-bottom: 5px;
  line-height: 1.2; /* 行間をフォントの大きさの1.2場合の高さに　*/
}

.space-row td {
  height: 10px; /* スペースの高さを調整 */
  border: none; /* 枠線が不要なら消す */
  padding: 0;
}

/*************/
/* 記事の部分　*/
/*************/

.main-title {
  font-size: 1.8em;
  font-weight: bold;
  padding: 15px;
}

.main-heading {
  font-size: 1.5em;
  font-weight: bold;
  padding: 15px;
}

.article {
  /* width: 800px; */
  border: 1px solid #888;
  padding: 15px;
  margin: 0 0 15px 10px;
}

/* .article-body {
  background-color: #fafafa;
} */

.article img {
  float: left;
  width: 300px;
  margin: 0 15px 15px 0;
  vertical-align: top;
}

.article img.right {
  float: right;
  margin: 0 0 15px 15px;
}

.article img.small {
  width: 200px; /* 通常の300pxより小さめ */
  float: left;
  margin: 0 15px 15px 0;
  vertical-align: top;
}

.article img.large {
  width: 400px; /* 通常の300pxより大きめ */
  float: left;
  margin: 0 15px 15px 0;
  vertical-align: top;
}

.article img.small.right {
  float: right;
  margin: 0 0 15px 15px;
}

.article p {
  line-height: 1.3;
  text-indent: 1em;
}

.article-title {
  font-size: 1.5em;
  margin-bottom: 10px;
}

.article-heading {
  font-weight: bold; /* 太字 */
  font-size: 1em; /* 通常より少し大きい（120%） */
}

.article.no-top-margin p:first-of-type {
  margin-top: 0;
}

.article p.no-indent {
  text-indent: 0;
}

/***********************/
/* マクロ経済学入門の部分　*/
/***********************/

/* アニメーションへのボタンリンク　*/
.button-link {
  display: inline-block;
  padding: 0.5em 1em;
  background-color: #007acc;
  color: white;
  text-decoration: none;
  border-radius: 6px;
}
.button-link:hover {
  background-color: #005fa3;
}

/*********************/
/* pythonコードの部分　*/
/*********************/

.code-block {
  position: relative;
  margin-bottom: 2em;
}

.copy-button {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 5px 10px;
  font-size: 0.9em;
  cursor: pointer;
  background-color: #eee;
  border: 1px solid #ccc;
  border-radius: 4px;
}

pre {
  padding: 1em;
  background-color: #f7f7f7;
  overflow-x: auto;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.plot-image {
  width: 600px; /* 横幅を800pxに */
  height: auto; /* 高さは自動調整 */
  display: block; /* ブロック要素にして中央配置可能に */
  margin: 40px auto; /* 上下に余白＋中央寄せ */
  border: 2px solid #ccc; /* 任意の枠線 */
}

/**************************/
/* pythonコードの目次の部分　*/
/*************************/

.toc {
  /* background-color: #f9f9f9; */
  background-color: #f5f5f5;
  padding: 1em;
  border-left: 4px solid #ccc;
  margin-bottom: 2em;
}
.toc h2 {
  margin-top: 0;
  font-size: 1.2em;
}
.toc ul {
  list-style-type: none;
  padding-left: 1em;
}
.toc ul ul {
  margin-left: 1em;
}
.toc a {
  color: #0066cc;
  text-decoration: none;
}
.toc a:hover {
  text-decoration: underline;
}

/***********************/
/* レスポンシブ対応の部分　*/
/***********************/

@media (max-width: 600px) {
  main {
    padding: 8px;
  }

  .article img,
  .article img.right {
    width: 90%;
    max-width: 300px;
    float: none;
    display: block;
    margin: 0 auto 15px auto;
    height: auto;
  }
}