diff --git a/2024-activities/index.html b/2024-activities/index.html
index b3de561..ac4026e 100644
--- a/2024-activities/index.html
+++ b/2024-activities/index.html
@@ -22,14 +22,16 @@
  1. よい写真を2,3枚選び convert -resize 400x400 元画像.jpg 縮小画像.jpg する
  2. 縮小画像を img/JD2024-XX-???.jpg という名前で置いて git add する
  3. 2024-activities/index.html (これ)を開いて以下のルールで記述する
+ 4. id= に振った classXX を末尾 <section class="archive"> 内の<li></li>
+    に追加する。
  <article id="classXX">    		classXXの番号を本講義回数にする
- <h3><a name="#XX">本講義XX回</h3>	h3見出しにする
+ <h3>本講義XX回</h3>			h3見出しにする
  <h4>2024-MM-DD</h4>			h4見出しで日付を YYYY-MM-DD
  <p><img src="img/JD2024-XX-???.jpg" alt="○○の様子">
  1枚目の写真に対する説明文章を書く。</p>
  <p><img src="img/JD2024-XX-????.jpg" alt="○○の様子">
- 2枚目の写真に対する説明文章を書く。</p>
- </article>
+ 2枚目の写真に対する説明文章を書く。
+ (写真の img に class="full" を追加すると全体幅になる)</p>
 -->
 
 <div class="box">
@@ -41,7 +43,7 @@
 <main class="activity">
 
 <article id="class1">
-<h3><a name="#01">本講義第1回</a></h3>
+<h3>本講義第1回</h3>
 <h4>2024-06-23</h4>
 <p>
 <img src="img/JD2024-01-img1.jpg" alt="アイスブレイクの様子">
@@ -63,7 +65,7 @@
 </article>
 
 <article id="class0">
-<h3><a name="#00">開塾式</a></h3>
+<h3>開塾式</h3>
 <h4>2024-06-22</h4>
 <p>
 <img src="img/JD2024-00-IMG_0471.jpg" alt="開塾式の様子">
diff --git a/activities/act-simple.css b/activities/act-simple.css
index 6a0891c..08d3080 100644
--- a/activities/act-simple.css
+++ b/activities/act-simple.css
@@ -1,4 +1,9 @@
 /* --- 2024 Simplify --- */
+:root {				/* グローバル変数にするため :root 擬似クラス */
+    --my-main-width: 70%;	/* 左半分の <main> 記事の幅 */
+    --my-topic-img-width: 40%;	/* main記事内の写真の相対幅 */
+}
+
 section#active {margin: 0 auto; padding: 1em; max-width: 1280px;}
 main.activity h3 {
     display: flex; align-items: center;
@@ -6,7 +11,7 @@
     background: center left no-repeat url("img/riku_umi_h2.png");
 }
 main.activity {
-    float: left; width: 70%;
+    float: left; width: var(--my-main-width);
     margin: 0 2em 1em 1em;
     background: white; border-radius: 2em;
 }
@@ -17,7 +22,7 @@
 main.activity + aside {margin-left: 2em;}
 main.activity + aside h3 {text-align: center;}
 main.activity + aside .sidebarbox {
-    margin-left: 72%; font-size: 0.875rem;
+    margin-left: calc(var(--my-main-width) + 2%); font-size: 0.875rem;
 }
 .sidebarbox {
     margin: 1ex;    padding: 1em 1em;
@@ -26,22 +31,22 @@
     border-left: solid 10px #ffdd6e;
 }
 main.activity article p:nth-child(2n+1) img {
-    float: right; width: 40%; padding-left: 1em;
+    float: right; width: var(--my-topic-img-width); padding-left: 1em;
 }
 main.activity article p:nth-child(2n) img {
-    float: left; width: 40%; padding-right: 1em;
+    float: left; width: var(--my-topic-img-width); padding-right: 1em;
 }
 main.activity article p {
     clear: both; margin: 4ex 0; text-indent: 1em;
 }
 main.activity article p img.full {width: 99%;}
 
-
 aside#sidebar ul {
-    list-style: none; padding: 0em 0em; margin-left: 72%;
+    list-style: none; padding: 0em 0em;
+    margin-left: calc(var(--my-main-width) + 2%); /* + - は要前後スペース */
     border-bottom: 1px solid #777;
 }
 aside#sidebar ul li {
-    padding: 1em 2em; 
+    padding: 1em 2em;
     border-top: solid  1px #777;
 }