body {
  max-width: 1024px;
  margin: 0 auto;
}

div.main {  
  /* 背景担当コンテナ、背景の縞模様は、bodyに敷き詰める　 */
  background-image: linear-gradient(
    0deg, 
    #c574dd 0px, 
    #c574dd 1px,       /* 濃い紫を 0px から 1px まで引く（1pxの細い線） */
    #d6abe7e7 1px, 
    #d6abe7e7 6px      /* 1px から 6px までは、色の変化なしで薄い紫で塗りつぶす */
  );
  background-size: 100% 5px;
  min-height: 100vh;
  padding: 20px; /* 画面端との隙間*/
  box-sizing: border-box;
}

/* ↓bannerとcontainerを横並びに */
.content-area {
  display: flex; 
}

div.header {
  margin-bottom: 20px; /* ヘッダーとバナーの間にスペースを空ける */
  width: 984px;
  height: 100px;  
  background-color: white;
  border-left: 5px solid #1900ff; /* 先ほど追加した左側の太い線 */
  border-top: 1px solid #1900ff;
  border-right: 1px solid #1900ff;
  border-bottom: 1px solid #1900ff;

  padding: 0 10px;           
  box-sizing: border-box;
  flex-shrink: 0;            
  align-self: flex-start; 
  h1 {
    margin: 0; /* デフォルトのマージンをリセット */
    line-height: 60px; /* ヘッダーの高さに合わせてテキストを中央に配置 */
    font-size: 44px; /* お好みでフォントサイズを調整 */
    color: #00b7ff; /* テキストの色を指定 */
    text-shadow: -1px 1px 2px rgba(68, 0, 255, 0.5); /* テキストに影をつける */
    font-family: "Noto Serif JP", serif; /* フォントを指定 */
  }
  h2 {
    margin: 0; /* デフォルトのマージンをリセット */
    line-height: 40px; /* ヘッダーの高さに合わせてテキストを中央に配置 */
    font-size: 24px; /* お好みでフォントサイズを調整 */              
    color: #00b7ff; /* テキストの色を指定 */
    text-shadow: -1px 1px 2px rgba(68, 0, 255, 0.5); /* テキストに影をつける */
    font-family: "Noto Serif JP", serif; /* フォントを指定 */  
  }
  /* リンクのスタイル */
  a {
    text-decoration: none; /* 下線消す */
    color: #1900ff;
    font-size: 24px;
    padding: 2px 4px;
  }
  /* リンクにマウスを重ねたときに色付き背景が出る */
  a:hover {
    background-color: #1900ff63;
    color: white;
  }
}

/* 縞模様の上に浮かせる、左側の白いボックス */
div.left-banner {
  width: 180px;              /* メニュー全体の幅を180pxに固定 */
  background-color: #ffffff; /* ボックスを真っ白にする */
  border-left: 5px solid #1900ff; /* 左側の太い線 */
  border-top: 1px solid #1900ff;
  border-right: 1px solid #1900ff;
  border-bottom: 1px solid #1900ff;
  
  /* 【重要①】左右に10pxの余白を固定します */
  padding: 0 10px;           
  box-sizing: border-box;
  flex-shrink: 0;            
  align-self: flex-start;     
}

/* バナーボックス*/
.banner {
  display: flex;
  flex-direction: column;    /* バナーを縦一列に並べる */
  
  /* 【ここがポイント！】上下の隙間を10pxに指定 */
  gap: 10px;                 
  
  /* メニューの上下にも10pxの余白を指定したいならのちに指定 */
  padding: 10px 0;

  margin-left: -3px;

  img:hover {
    transform: scale(1.05); /* ホバー時に少し拡大 */
    transition: transform 0.1s ease; /* 拡大のアニメーション */
  }
  a {
    text-decoration: none; /* 下線消す */
  }
  p {
    color: #1900ff;
    font-size: 18px;
    padding: 2px 4px;
    margin: 0; /* デフォルトのマージンをリセット */
  }
  /* リンクにマウスを重ねたときに色付き背景が出る */
  p:hover {
    background-color: #1900ff63;
    color: white;
  }
}

/* バナー画像自体の設定 */
.banner img {
  width: 100%;               /* 親の幅（180px - 左右余白20px = 160px）に自動でピタッと合わせる */
  height: auto;              /* 画像の比率を壊さずに表示 */
  display: block;            /* 画像の下に生まれる謎の隙間を消すための設定 */
}

/* 右側のコンテンツ（背景は透明にして、後ろの縞模様を透けさせます） */
div.container1 {
  background: white;   /* 背景を白にする */
  padding-left: 20px; /* コンテナ内コンテンツの左側に余白20px */
  border-left: 5px solid #1900ff; /* 左側の太い線 */
  border-top: 1px solid #1900ff;
  border-right: 1px solid #1900ff;
  border-bottom: 1px solid #1900ff;          
  padding: 0 10px;
}

/* 特設サイト用コンテナ */
div.container2 {
  background: white;   /* 背景を白にする */
  border-left: 5px solid #1900ff; /* 左側の太い線 */
  border-top: 1px solid #1900ff;
  border-right: 1px solid #1900ff;
  border-bottom: 1px solid #1900ff;
  padding: 0 10px;
  h1 {
    margin: 0; /* デフォルトのマージンをリセット */
    line-height: 60px; /* ヘッダーの高さに合わせてテキストを中央に配置 */
    font-size: 44px; /* お好みでフォントサイズを調整 */
    color: #000000; /* テキストの色を指定 */
    text-shadow: -1px 1px 2px rgb(212, 0, 255); /* テキストに影をつける */
    height: 200px;
  }
}

/* 右側のコンテンツ */
/* 右側コンテンツを縦並び */
.right-contents {
  display: flex;
  flex-direction: column;
  gap: 10px; /* container同士の隙間 */
  margin-left: 10px;
  flex: 1;
}

img {
  image-rendering: pixelated;
}