@charset "UTF-8";

body {
    margin: 10px 0 0 0; /* 上:10px, 右:0, 下:0, 左:0 */
    padding: 0; /* 上:20px, 右:0, 下:0, 左:0 */
    font-family: "Yu Gothic", "游ゴシック", "Meiryo", sans-serif;
    font-weight: 600;
    line-height: 1.8;
    /* background-color: #ffffff; 白 */
    color: #000; /* 文字色は黒 */
}

h2 {
    color: #ffffff; /* 白 */
    font-size: 24px;
    margin: 0px;
    background-color: #ff943c; /* 薄い赤 */
    /* border-bottom: 2px solid #ff8c8c; 下に線を追加 */
    /* padding-bottom: 3px; */
    text-align: center; /* 中央寄せ */
}

p {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 12px;
    margin-left: 10px;
    padding: 10px;
    background-color: #E2F3FF; /* 薄い青 */
    border-left: 5px solid #59acff; /* 左に青い線 */
}

strong {
    color: #f06728;
}

/* -----------------------
ページ全体の枠
- 横幅100%、縦は最低1画面分
- ボーダーあり、中央寄せ
- 背景白
----------------------- */
.page-frame {
    width: 95%;              /* 横幅を画面の90%に（両端に余白ができる） */
    max-width: 1200px;       /* 最大幅を制限して見やすく */
    min-height: 100vh;       /* 最低でも画面1つ分の高さ */
    border: 3px solid black; /* 少し太めの枠線 */
    margin: 0px auto;        /* 上下0px、左右は自動で中央寄せ */
    box-sizing: border-box;
    position: relative;
    background: #fff;
    padding: 10px 0;           /* 中身と枠の間に余白 */
    border-radius: 8px;      /* 角を少し丸くして柔らかい印象 */
}

/* -----------------------
各セクション（デモ用コンテンツ）
- デフォルトはPC向けのフォントサイズ・高さ
----------------------- */
.section {
    min-height: 600px;
    border-bottom: 1px dashed #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #1f1f1f;
    padding: 12px 24px;
}
.section:nth-child(odd) {
    background: #fafafa;
}


h3 {
  margin-left: 10px;         /* 左の枠から少し離す */
  background-color: #fffacd; /* 薄い黄色 (lemonchiffon) */
  padding: 5px;              /* 内側に余白 */
  padding-left: 35px;        /* テキスト全体を右に移動 */
  border-radius: 4px;        /* 角を少し丸くする */
}

ul {
  margin-left: 10px;         /* 左の枠から少し離す */
  background-color: #fffacd; /* 箇条書きも同じ背景色 */
  padding: 10px;
  padding-left: 35px;        /* テキスト全体を右に移動 */
  border-radius: 4px;
}


.section2,
.section3,
.section4,
.section5,
.section6,
.section7,
.section8,
.section9,
.section10,
.section11 {
    /* border-top: 2px solid #1f1f1f; 上に太めの線を追加 */
    padding-top: 10px;          /* 線とコンテンツの間に余白を追加 */
}

.diagram {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 20px 0;
  text-align: center;
}
.box {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 14px;
  width: 150px;
}
.main-img {
  width: 100px;
}
.small-img {
  width: 40px;
  margin-top: 8px;
}
.arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.arrow-symbol {
  font-size: 38px;
  font-weight: bold;
}
.arrow-label {
  font-size: 12px;
  margin-top: 4px;
}
.below {
  margin-top: 8px;
  font-size: 12px;
  color: #333;
}

/* ---- レスポンシブ：小さな画面では縦積みにする ---- */
@media (max-width: 780px) {
  .diagram {
    flex-direction: column;
    align-items: center; /* 中央寄せ */
    gap: 12px;
  }

  /* 全ての要素を1列目に揃える */
  .box-left, .arrow-left, .box-center, .arrow-right, .box-right,
  .left-below, .center-below, .right-below {
    grid-column: 1;
  }

  /* メイン画像は少し小さく */
  .main-img { width: 120px; }
  .arrow-symbol { font-size: 22px; }
  .small-img { width: 48px; }
}




/* コード表示ブロック */
.code-block {
  background: #e2ffbc;
  color: #000000;
  padding: 10px;
  border-radius: 8px;
  margin: 0px auto; /* 中央寄せ */
  padding: 0;      /* pre 内側の余白を調整 */
  font-family: Consolas, "Courier New", monospace;
  font-size: 1.2em;
  line-height: 1.6;
  letter-spacing: 0.08em;  /* 横幅拡大を transform ではなく文字間隔で調整 */
  white-space: pre-wrap; 
  word-wrap: break-word;
  box-sizing: border-box;
  overflow-x: auto;
  max-width: calc(100% - 20px); /* 左右のmargin分を引く */
}

/* pre 内の調整 */
.code-block pre {
  margin: 0;
  white-space: pre-wrap;   /* 折り返し可能にする */
  word-wrap: break-word;   /* 単語が長いときは途中で改行 */
  font-family: Consolas, "Courier New", monospace;
  letter-spacing: 0.05em;  /* 少し横の文字間隔を広げる */
}



/* ================================
レスポンシブ（メディアクエリ）
- スマホ/タブレット/PCに対応
================================ */

/* スマホ（～600px） */
@media (max-width: 600px) {
.section { min-height: 300px; font-size: 16px; }
.dimension-label { font-size: 12px; }
}

/* タブレット（601px～1024px） */
@media (min-width: 601px) and (max-width: 1024px) {
.section { min-height: 500px; font-size: 18px; }
.dimension-label { font-size: 13px; }
}

/* PC（1025px～） */
@media (min-width: 1025px) {
.section { min-height: 600px; font-size: 20px; }
.dimension-label { font-size: 13px; }
}


.page-nav {
  width: 100%;
  display: flex;
  justify-content: space-between; /* 左右に配置 */
  padding: 10px 20px;
  box-sizing: border-box;
}

.page-nav.only-next {
  justify-content: flex-end; /* 次だけのときは右寄せ */
}

.page-nav a {
  text-decoration: none;
  font-weight: bold;
  color: #fff;
  background-color: #6666cc;
  padding: 8px 14px;
  border-radius: 6px;
  transition: background 0.3s;
}

.page-nav a:hover {
  background-color: #5555aa;
}