/* ==================== 1. 基本設定と変数 ==================== */
        :root {
            --color-accent: #06b6d4; /* シアン 600 */
            --color-primary-text: #1f2937; /* Gray 800 */
            --color-secondary-text: #4b5563; /* Gray 600 */
            --color-light-bg: #f9fafb; /* Gray 50 (交互背景) */
            --color-very-light-bg: #f3f4f6; /* Gray 100 (画像背景) */
            --color-border: #e5e7eb; /* Gray 200 */
            --max-content-width: 72rem;
        }

        body {
            margin: 0;
            padding: 0;
            height: 100%;
            line-height: 1.6;
            overflow-x: hidden;
            color: var(--color-primary-text);
            background-color: white;
        }

        /* ==================== 2. レイアウトとコンテナ ==================== */
        .l-container-header {
            max-width: 1200px;
            margin: 6.6rem auto 40px auto; 
            padding: 0 15px;
            display: flex;
            align-items: center;
        }

        /* h1のスタイル */
        .l-container-header h1 {
            display: inline-block;
            color: #111827;
            border-bottom: none;
        }
        
        .themes-container {
            max-width: 95%;
            margin: 0 auto;
            padding: 4rem 20px 0; 
        }

        /* ==================== 3. テーマブロック (メイン詳細) ==================== */
        
        /* タイトルヘッダーのスタイル */
        .theme-header {
            grid-column: 1 / -1; /* 1列目から最終列までを占有 */
            grid-row: 1 / 2;
            padding: 3rem 4rem 1rem 4rem; 
            position: relative;
            z-index: 20;
            background-color: white; /* 白に統一 */
        }

        .theme-wrapper {
            display: grid;
            /* 2列定義: 1fr (画像) 1.3fr (説明) */
            --col1: 1.5fr;  /* 画像側 */
            --col2: 1fr; /* 説明コンテンツ側 */
            grid-template-columns: var(--col1) var(--col2);
            /* 2行を定義 (タイトル行とコンテンツ行) */
            grid-template-rows: auto 1fr; 
            align-items: stretch;
            max-width: 90%;
            margin: 0 auto 5rem auto; /* 各テーマブロック間の余白 */
            gap: 0;
            
            /* スクロールアニメーション初期状態 */
            opacity: 0;
            transform: translateY(50px);
            transition: opacity 1s ease, transform 1s ease;
            
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
            border-radius: 0.5rem; /* 角を丸める */
            overflow: hidden;
        }

        .theme-wrapper.in-view {
            opacity: 1;
            transform: translateY(0);
        }

        /* 画像コンテナ (背景画像から切り替え) */
        .theme-img {
            position: relative;
            min-height: 360px;
            background-color: white; /* 画像の背景色を白に統一 */
            padding:4rem; /* パディングは4remで維持 */
        
            order: 1; 
            grid-row: 2 / 3;
            /* Flexbox を使用して <img> を中央配置 */
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        /* 挿入された <img> タグのスタイル */
        .theme-img img {
            width: 100%;
            height: 100%;
            max-height: 100%;
            /* コンテナに合わせて画像全体を表示 */
            object-fit: contain; 
        }

        /* 説明コンテンツ */
        .theme-content {
            padding: 1rem 1rem 5rem 1rem; 
            position: relative;
            order: 2; 
            grid-row: 2 / 3;
            grid-column: 2 / 3;
        }

        /* テーマ番号の装飾的な傾き線 (削除済み) */
        .theme-content::before {
            display: none;
        }

        /* テーマ番号（右下の大きな数字）のスタイルを復活 */
        .theme-index {
            position: absolute;
            /* 【修正】説明コンテンツの右下に配置 */
            bottom: 1rem; 
            right: 1rem; 
            top: initial;
            left: initial;
            font-size: 7rem;
            font-weight: 200;
            color: #cbd5e1; 
            opacity: 0.7;
            z-index: 5;
        }

        .theme-title {
            font-size: 2rem;
            font-weight: 800;
            color: #111827;
            margin-bottom: 1.5rem;
            border-bottom: 3px solid var(--color-accent);
            padding-bottom: 0.5rem;
            display: inline-block;
        }
        .theme-header .theme-title { /* ヘッダー内のタイトル調整 */
            margin-bottom: 0;
            border-bottom: none;
            padding-bottom: 0;
            font-size: 2rem;
            font-weight: 800;
        }
        .theme-header .theme-title br {
            display: none;
        }

        .theme-text {
            font-size: 1.1rem;
            line-height: 1.9;
            color: #374151;
            margin-bottom: 1.75rem;
            max-width: 90%;
			text-align: justify;
			text-justify: inter-character;
			hyphens: auto;
        }

        .theme-link {
            color: #0E2841; /* Sky 600 */
            text-decoration: none;
            font-weight: 600;
            position: relative;
            font-size: 1.05rem;
            /* リンクの上に数字が来る可能性があるため、z-indexを設定 */
            z-index: 10;
        }

        .theme-link::after {
            content: "→";
            margin-left: 0.4rem;
            transition: margin 0.3s;
        }

        .theme-link:hover::after {
            margin-left: 0.8rem;
        }

        /* ==================== 4. レスポンシブ調整 ==================== */
        @media (max-width: 1024px) { /* タブレット以下 */
            .theme-wrapper {
                grid-template-columns: 1fr; /* 1列にする */
                grid-template-rows: auto auto 1fr; /* タイトル, 画像, 説明 */
                margin-bottom: 3rem;
                box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
            }
            .theme-wrapper-even {
                grid-template-columns: 1fr; /* 反転を解除 */
            }
            
            /* 行の順序を明確に設定 */
            .theme-header {
                grid-row: 1 / 2;
                grid-column: 1 / 2; /* 1列目全体を占有 */
                padding: 1.5rem 1.5rem 0.5rem 1.5rem;
                text-align: center;
            }
            .theme-img {
                grid-row: 2 / 3;
                grid-column: 1 / 2; /* 1列目全体を占有 */
                min-height: 300px;
                padding: 2rem; 
                order: initial;
            }

            .theme-content {
                padding: 1rem 1.5rem 5rem 1.5rem; 
                grid-row: 3 / 4;
                grid-column: 1 / 2; /* 1列目全体を占有 */
                order: initial;

                /* ★追加：モバイルでは中身を左寄せ基準にする */
                text-align: left;
            }
            
            .theme-text{
                margin:0 auto 2rem auto;
            }

            /* ★修正：リンクを theme-text と同じ左位置（= max-width:90%, margin:auto の左端）に揃える */
            .theme-link{
                display: block;
                max-width: 90%;
                margin: 0 auto;     /* theme-text と同じ */
                text-align: left;   /* 左揃え */
            }

            /* テーマ番号はモバイルでは非表示 */
            .theme-index {
                display: none !important; 
            }
            
            .theme-header .theme-title {
                font-size: 1.25rem; 
                display: block;
                line-height: 1.3;
            }
            .theme-header .theme-title br {
                display: initial;
            }

        }
        /* ==================== Smartphone (<= 768px) ==================== */
@media (max-width: 768px) {

  /* 全体の左右余白を少し詰める */
  .themes-container{
    max-width: 100%;
    padding: 2.5rem 12px 0;
  }

  .l-container-header{
    margin: 5.5rem auto 24px auto;
    padding: 0 12px;
  }

  .theme-wrapper{
    max-width: 100%;
    margin: 0 auto 2.5rem auto;
    border-radius: 0.75rem;
  }

  .theme-header{
    padding: 1.25rem 1.0rem 0.5rem 1.0rem;
  }

  .theme-header .theme-title{
    font-size: 1.15rem;
    line-height: 1.35;
  }

  .theme-img{
    min-height: 220px;
    padding: 1rem;   /* 画像周りの余白を縮小 */
  }

  .theme-img img{
    width: 100%;
    height: auto;    /* スマホは縦伸び防止 */
    max-height: 260px;
    object-fit: contain;
  }

  .theme-content{
    padding: 0.75rem 1.0rem 2.5rem 1.0rem;
  }

  .theme-text{
    max-width: 100%;
    font-size: 1.0rem;
    line-height: 1.85;
    margin: 0 0 1.25rem 0;  /* auto解除で素直に左揃え */
  }

  .theme-link{
    max-width: 100%;
    margin: 0;
    font-size: 1.0rem;
  }
}

/* ==================== Small Smartphone (<= 480px) ==================== */
@media (max-width: 480px) {


  .theme-header{
    padding: 1.1rem 0.9rem 0.4rem 0.9rem;
  }

  .theme-header .theme-title{
    font-size: 1.05rem;
  }

  .theme-img{
    min-height: 200px;
    padding: 0.85rem;
  }

  .theme-img img{
    max-height: 220px;
  }

  .theme-content{
    padding: 0.7rem 0.9rem 2.2rem 0.9rem;
  }

  .theme-text{
    font-size: 0.98rem;
  }
}