Merge pull request #22 from coderdojo-japan/fix/text-and-styles

デザインとの差異を修正（テキストとスタイル）

Author: mucho613

_includes/top/sections/about-coderdojo.html

@@ -1,6 +1,6 @@
 <div class="relative mt-20 xl:mt-48">
   <div class="max-w-7xl mx-6 xl:mx-auto">
-    <div class="max-w-3xl mx-auto xl:absolute xl:bottom-[45%]">
+    <div class="max-w-3xl mx-auto xl:absolute xl:bottom-2/5">
       <!-- 見出しセクション -->
       <!-- デスクトップの場合 -->
       <h2 class="hidden xl:block mx-8">
@@ -14,13 +14,13 @@ <h2 class="relative xl:hidden max-w-lg">
       </h2>
 
       <!-- 説明文セクション -->
-      <div class="mt-9 xl:ml-18 xl:max-w-[620px]">
-        <p>
+      <div class="mt-9 xl:ml-18 xl:max-w-[620px] leading-7">
+        <p class="mb-4">
           CoderDojoは子ども達にプログラミングを学ぶ場を提供する、ボランティア主導の世界的な非営利活動です。
         </p>
         <p>
           CoderDojoは2011年にアイルランドから始まり、現在は世界100カ国に2,000以上の道場があり、日本国内でも全国200以上の道場で毎年1,000回以上(*1)開催されています。CoderDojoはエンジニアやデザイナー、各地域の保護者や学生、研究者や経営者など（メンター）と子どもが出会える場にもなっています。<br />
-          <small>*1 統計情報:https://coderdojo.jp/stats</small>
+          <small class="break-all">*1 統計情報:https://coderdojo.jp/stats</small>
         </p>
       </div>
     </div>

_includes/top/sections/inspire-next.html

@@ -4,7 +4,7 @@
     <h2>
       <img src="/img/top/inspire-next/inspire-next-heading.webp" alt="Inspire NEXT ～好奇心に火をつけよう～" />
     </h2>
-    <div class="mt-9 max-w-3xl">
+    <div class="mt-9 max-w-3xl leading-7">
       今年のDojoCon Japanのテーマは「Inspire NEXT〜好奇心に火をつけよう〜」です。<br />
       この言葉には、「次の一歩をふみ出すきっかけになるようなひらめきや刺激を届けたい」という思いがこめられています。プログラミングやテクノロジーの世界は、AIなど新しいことがどんどん出てきて、変わり続けています。でも、子どもたちの「やってみたい！」「知りたい！」という好奇心は、いつの時代も変わりません。<br />
       CoderDojoは、そんな好奇心を大切にし、応援する場所です。<br />
@@ -32,7 +32,7 @@ <h2 class="relative max-w-7xl">
       <img class="h-[140%] w-auto absolute right-0 -bottom-1/5 w-3xs" src="/img/top/inspire-next/fire-transparent.webp" />
     </h2>
 
-    <div class="mt-9">
+    <div class="mt-9 leading-7">
       今年のDojoCon Japanのテーマは「Inspire NEXT〜好奇心に火をつけよう〜」です。<br />
       この言葉には、「次の一歩をふみ出すきっかけになるようなひらめきや刺激を届けたい」という思いがこめられています。プログラミングやテクノロジーの世界は、AIなど新しいことがどんどん出てきて、変わり続けています。でも、子どもたちの「やってみたい！」「知りたい！」という好奇心は、いつの時代も変わりません。<br />
       CoderDojoは、そんな好奇心を大切にし、応援する場所です。<br />

_includes/top/sections/keynote.html

@@ -9,7 +9,7 @@ <h2 class="text-4xl text-center mb-12">
       生成AI時代における<br />
       「子どもたちの創造」と学び
     </p>
-    <p class="text-xl mb-4">宮島 衣瑛（みやじま きりえ）</p>
+    <p class="text-xl mb-2">宮島 衣瑛（みやじま きりえ）</p>
     <p class="text-xs mb-8 leading-5">
       一般社団法人 CoderDojo Japan 理事<br />
       CoderDojo Kashiwa Champion
@@ -28,13 +28,18 @@ <h2 class="text-4xl text-center mb-12">
   </div>
 </div>
 
+<h2 class="text-4xl text-center mb-12">
+  招待講演
+  <span class="block mt-5 text-2xl">KEYNOTE 02</span>
+</h2>
+
 <div class="flex max-w-7xl mx-auto px-6 lg:px-12 jutify-between gap-x-12 flex-col lg:flex-row">
   <div class="w-full lg:w-[55%] mb-8">
     <p class="text-3xl lg:text-4xl leading-12 lg:leading-15 mb-2">
       生成AIをはじめ急速に変化する環境で、<br />
       子どもの好奇心をどう伸ばすか
     </p>
-    <p class="text-xl mb-4">小宮山 利恵子（こみやま りえこ）</p>
+    <p class="text-xl mb-2">小宮山 利恵子（こみやま りえこ）</p>
     <p class="text-xs mb-8 leading-5">
       スタディサプリ教育AI研究所所長<br />
       国立大学法人 東京学芸大学大学院教育学研究科准教授

_includes/top/sections/news.html

@@ -4,7 +4,7 @@ <h2 class="text-4xl mt-20 sm:mt-32 text-center">
 </h2>
 
 <div class="m-6 flex flex-col items-center">
-  <ul class="border-y divide-y max-w-7xl mx-auto mb-12">
+  <ul class="border-y border-[#ccc] divide-y divide-[#ccc] max-w-7xl mx-auto mb-12">
     {% for i in (1..5) %}
     <li class="text-sm flex items-center py-4 flex-wrap sm:flex-nowrap gap-y-1">
       <time class="block min-w-24">2025.06.20</time>

_includes/top/sections/organized-by.html

@@ -2,7 +2,7 @@ <h2 class="text-4xl text-center">
   主催
   <span class="block mt-5 text-2xl">ORGANIZED BY</span>
 </h2>
-<p class="text-2xl sm:text-4xl text-center mt-10 mx-8 leading-16">
-  DojoCon Japan 2025 実行委員会<br />
-  一般社団法人 CoderDojo Japan
-</p>
+<div class="text-xl sm:text-2xl md:text-4xl text-center mt-10 mx-8 leading-6 sm:leading-10 md:leading-16">
+  <div class="mb-4">DojoCon Japan 2025 実行委員会</div>
+  <div>一般社団法人 CoderDojo Japan</div>
+</div>

_includes/top/sections/session.html

@@ -17,8 +17,8 @@ <h2 class="text-4xl mb-4 text-center lg:text-left">
     <li class="flex-1 min-w-full sm:min-w-64">
       <img class="w-full" src="https://placehold.jp/1920x1080.png" alt="セッションのイメージ">
       <p class="mt-2">セッションタイトル。2行ぐらいあるかも</p>
-      <p class="text-xs mb-2">セッションの説明です。最大2行ぐらいまで許容しそうな雰囲気</p>
-      <p class="text-xs text-gray-400">
+      <p class="text-xs mb-2 leading-5">セッションの説明です。最大2行ぐらいまで許容しそうな雰囲気</p>
+      <p class="text-xs text-gray-400 leading-5">
         登壇者：仮の団体名・仮の登壇者の氏名<br />
         所属：仮の所属名</p>
     </li>

_includes/top/sections/workshop.html

@@ -18,8 +18,8 @@ <h2 class="text-4xl mb-4 text-center lg:text-left">
     <li class="flex-1 min-w-full sm:min-w-64">
       <img class="w-full" src="https://placehold.jp/1920x1080.png" alt="セッションのイメージ">
       <p class="mt-2">セッションタイトル。2行ぐらいあるかも</p>
-      <p class="text-xs mb-2">セッションの説明です。最大2行ぐらいまで許容しそうな雰囲気</p>
-      <p class="text-xs text-gray-400">
+      <p class="text-xs mb-2 leading-5">セッションの説明です。最大2行ぐらいまで許容しそうな雰囲気</p>
+      <p class="text-xs text-gray-400 leading-5">
         登壇者：仮の団体名・仮の登壇者の氏名<br />
         所属：仮の所属名</p>
     </li>