@charset "utf-8";
/*PCSP共通設定*/
section:nth-of-type(odd){background-color:#fffdf7;}
section:nth-of-type(even){background-color:#fffdf9;}
html {scroll-behavior: smooth;}/*smooth scroll*/

/*共通項目*/
    h2 {
        width:auto;
        margin-bottom: 20px;
        font-size: 22px;
        font-weight: bold;
    }

    .emphasis {
        background-image: linear-gradient(
            rgba(0 0 0 / 0) 70%,
            #fcee21 70%
        );
    }

    hr.line{
      border: none;
      border-top: 10px dashed #fff;
    }

    .more {
        font-size: 15px;
         text-align: right;  
        margin-right: 0.5rem;
    }

/* -----------------------------------
   SP（759.9px以下）のスタイル
----------------------------------- */
@media screen and (max-width: 759.9px) {
    body{
 overflow-x: hidden;
}
    h2 {
        width:100%;
        text-align: center;
        margin-bottom: 30px;
        font-size: 24px;
        font-weight: bold;
    }

    .emphasis {
        background-image: linear-gradient(
            rgba(0 0 0 / 0) 70%,
            #fcee21 70%
        );
    }
    #dirPathBlock {
        font-size: 10px;
        margin: 1% 1% 0 1%;
    }
    #dirPathBlock p {
        font-size: 12px;
    }
    /* PC用メニュー(.forpc)を非表示 */
    .forpc {
        display: none;
    }

    .program-example-title { font-size: 1.1rem; }
    .program-block-title { font-size: 1.2rem; }
    
    /* 説明リストを縦積みに */
    .program-definitions div {
        display: block; /* 横並びを解除 */ 
    }
    .program-definitions dt {
        font-weight: bold;
        width: 30%;
        max-width: 150px;
        padding: 15px;
        flex-shrink: 0;
        box-sizing: border-box;
    }
    .program-definitions dd {
        width: 100%; 
        padding-top: 5px; 
    }
    
.program-header {
    margin: 100px auto 40px auto;
}
.program-header-sub {
    text-align: center;
    color: #db000f;
    font-weight: bold;
    font-size: 1.1rem;
}

.program-lead {
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 30px;
    padding: 0 20px;
}
.program-example-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: #333;
    border-left: 10px solid #d31643; /* ピンク縦線 */
    padding-left: 15px;
    margin-top: 40px;
    margin-left: 20px;
}

/* ▼ 各プログラムのコンテンツブロック */
.program-content {
    width: 90%;
    margin: 30px auto 50px auto;
    border-top: 20px solid #967a00; /* 黄土色の太い区切り線 */
    padding: 20px 30px 30px 30px;
    line-height: normal;
}

/*
.program-block-subtitle {
    font-size: 1.2rem;
    font-weight: bold;
    color: #522004;
    margin-bottom: 8px;
}
*/
.program-block-title {
    font-size: 1.6rem;
    font-weight: bold;
    color: #333;
    margin-top: 15px;
    padding-bottom: 15px;
    margin-right: 10px;
}
.program-sdgs {
    margin: 0 0 0 auto;
}
.program-sdgs img {
    width: 62px;
    height: auto;
    margin-right: 5px;
    
}
   
/***********************************************
* ★ここが「横並び」の指定★
***********************************************/
/* 親ヘッダーにflexを設定し、子要素を垂直中央揃えに */
    .program-block-header {
        display: flex;
        align-items: center; 
        margin-bottom: 20px; 
    }

    /* (要素1) タイトルブロック */
    .program-title-block {
        margin-right: 0px; 
    }
/* (要素2) SDGs */
/*
    .program-sdgs {
        display: flex; 
        margin-left: 100px;  タイトルブロックとの隙間 ☆ 
    }
    .program-sdgs img {
        width: 50px; 
        height: auto;
        margin-right: 4px; 
        margin-bottom: 4px;
    }
    .program-sdgs img:last-child {
        margin-right: 0; 
    }
*/

    
.program-text {
    font-size:16px;
    line-height: 1.8;
    margin-bottom: 30px;
    line-height: normal;
    padding-top: 10px;
}

/* SDGsアイコンのコンテナ */
    .program-block-header .program-sdgs {
        display: flex; /* SDGsアイコンも横並びに */
        justify-content: flex-end;
        flex-wrap: wrap;
        margin: 0 0 0 auto;
        

    }
    .program-block-header .program-sdgs img {
        width: 50px; /* PCでのアイコンサイズを少し小さく */
        height: auto;
        margin-bottom: 3px;
    }

/* 説明リスト (dl) */
.program-definitions {
    border-top: 1px solid ;
    margin-bottom: 20px;
}
.program-definitions div {
    display: flex; /* dtとddを横並びにする */
    border-bottom: 1px solid;
}
.program-definitions dt {
    /* background-color: #f7f7f7; */
    font-weight: bold;
    width: 25.5%;
    max-width: 150px;
    padding: 7px;
    flex-shrink: 0;
    box-sizing: border-box; /* 崩れ防止 */
    text-align: center;
    letter-spacing: 0.1rem;
    font-size: 0.9rem;
}
.program-definitions dd {
    width: 70%;
    padding: 6px;
    margin: 0;
    box-sizing: border-box; /* 崩れ防止 */
    font-size: 0.9rem;
}

.program-definitions div:nth-child(odd) { 
     background-color: #f4ee9c; /* 奇数行：薄ピンク */
}

.program-definitions div:nth-child(even) { 
     background-color: #f7f4c5; /* 偶数行：さらに薄いピンク */
}

/* 画像ギャラリー */
.program-gallery {
    display: grid; /* 画像をグリッドで並べる */
    /*grid-template-columns: 1fr 1fr; /* 2列 */
    grid-template-columns: repeat(3, 1fr); /* 3列にする ☆ */
    gap: 10px;
    margin-bottom: 20px;
}
/* ギャラリーのリンク要素(a)を正方形にする */
.program-gallery a {
    display: block;
    aspect-ratio: 1 / 1; /* 縦横比を1:1 (正方形) にする */
    border: 1px solid #ddd;
    overflow: hidden; /* はみ出した画像を隠す */
}

/* ギャラリーの画像(img)を正方形いっぱいに広げる */
.program-gallery img {
    width: 100%;
    height: 100%; /* 親(aタグ)の高さに合わせる */
    object-fit: cover; /* 縦横比を保ったまま親要素を埋める（トリミングされる） */
    
    display: block;
    /* border: 1px solid #ddd; ← borderは親(aタグ)に移動 */
}

/* スケジュール表 */
.program-schedule {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #ccc;
    margin-bottom: 0px;
    font-size: 0.9rem;
}
.program-schedule th {
    background-color: #cc167d; /* レイアウト画像の紫 */
    color: white;
    padding: 5px;
    font-size: 1rem;
    text-align: center;
    
}
.program-schedule td {
    border: 1px solid #ccc;
    padding: 7px;
}

/* 奇数行（1, 3, 5...）に薄紫を設定 */
.program-schedule tbody tr:nth-child(odd) td { 
     background-color: #ffeff5; /* 薄ピンク */
}

/* 偶数行（2, 4, 6...）にさらに薄い紫を設定 */
.program-schedule tbody tr:nth-child(even) td { 
     background-color: #fff7fa; /* さらに薄いピンク */
}

.program-schedule td:first-child {
    width: 25%;
    text-align: center;
    font-weight: bold;
    letter-spacing: 0.05rem;
}

    
}

/* -----------------------------------
   PC（759.9px以上）のスタイル
----------------------------------- */
@media screen and (min-width: 759.9px), print {
    #wrapper {
        line-height: 1.231;
    }
    /* PC幅と中央揃え */
    #dirPathBlock,
    h1 {
        width: 100%;
        max-width: 759.9px;
        min-width: 759.9px;
        margin-left: auto;  /* 中央揃え */
        margin-right: auto; /* 中央揃え */
    }

    /* PCパンくずリストのスタイル */
    #dirPathBlock {
        margin-top: 0; 
        margin-bottom: 0; 
        display: block;
        font-size: 12px;
    }
    #dirPathBlock p {
        font-size: 12px;
    }
    /* SP用メニュー(.formb)を非表示 */
    .formb {
        display: none;
    }

    /* PC用メニューコンテナ */
    
    .forpc {
        margin-top: -1rem;
    }
    .contentsMenu {
        display: flex;
        flex-wrap: wrap;   /* 折り返しを許可 */
        justify-content: center;
        margin-top: 0px;
        list-style: none;
        text-align: center;
        margin: 0 auto;
    }

    /* PC用メニュー項目（均等幅） */
    .contentsMenu li {
        flex: 1; /* 幅を均等に */
        margin: auto 0.30rem;
    }

    /* PC用メニューのリンク（青いボタン） */
    .contentsMenu li a {
        display: block;
        background-color: #2d327d; /* 濃い青 */
        color: white;
        text-align: center;
        padding: 15px 10px;
        text-decoration: none;
        font-weight: bold;
        font-size: 14px;
        line-height: 1.4;
        border-bottom-right-radius: 15px;
        border-bottom-left-radius: 15px;
        margin-top: 0px;
    }

    /* ホバー効果 */
    .contentsMenu li a:hover {
        background-color: #595959;
    }
    
.program-header {
    width: 95%;
    margin: 80px auto 40px auto;
    max-width: 759.9px; /* PC幅に合わせる */
}
.program-header-sub {
    text-align: right;
    color: #db000f;
    font-weight: bold;
    font-size: 1.1rem;
}

.program-lead {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 30px;
}
.program-example-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: #333;
    border-left: 10px solid #d31643; /* ピンク縦線 */
    padding-left: 15px;
    margin-top: 40px;
}

/* ▼ 各プログラムのコンテンツブロック */
.program-content {
    width: 100%;
    margin: 30px auto 50px auto;
    max-width: 970px; /* PC幅に合わせる */
    border-top: 20px solid #967a00; /* 黄土色の太い区切り線 */
    padding: 20px 30px 30px 30px;
}

.program-block-subtitle {
    font-size: 1.2rem;
    font-weight: bold;
    color: #522004;
    margin-bottom: 8px;
}
.program-block-title {
    font-size: 1.6rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
}
.program-sdgs {
    margin: 15px 0 15px auto;
}
.program-sdgs img {
    width: 60px;
    height: auto;
    margin-right: 5px;
}
.program-text {
    font-size:16px;
    line-height: 1.8;
    margin-bottom: 30px;
}

/* 説明リスト (dl) */
.program-definitions {
    border-top: 1px solid ;
    margin-bottom: 20px;
}
.program-definitions div {
    display: flex; /* dtとddを横並びにする */
    border-bottom: 1px solid;
}
.program-definitions dt {
    /* background-color: #f7f7f7; */
    font-weight: bold;
    width: 25.5%;
    max-width: 150px;
    padding: 7px;
    flex-shrink: 0;
    box-sizing: border-box; /* 崩れ防止 */
    text-align: center;
    letter-spacing: 0.1rem;
    font-size: 0.9rem;
}
.program-definitions dd {
    width: 70%;
    padding: 6px;
    margin: 0;
    box-sizing: border-box; /* 崩れ防止 */
    font-size: 0.9rem;
}

.program-definitions div:nth-child(odd) { 
     background-color: #f4ee9c; /* 奇数行：薄ピンク */
}

.program-definitions div:nth-child(even) { 
     background-color: #f7f4c5; /* 偶数行：さらに薄いピンク */
}

/* 画像ギャラリー */
.program-gallery {
    display: grid; /* 画像をグリッドで並べる */
    /*grid-template-columns: 1fr 1fr; /* 2列 */
    grid-template-columns: repeat(3, 1fr); /* 3列にする ☆ */
    gap: 10px;
    margin-bottom: 20px;
}
/* ギャラリーのリンク要素(a)を正方形にする */
.program-gallery a {
    display: block;
    aspect-ratio: 1 / 1; /* 縦横比を1:1 (正方形) にする */
    border: 1px solid #ddd;
    overflow: hidden; /* はみ出した画像を隠す */
}

/* ギャラリーの画像(img)を正方形いっぱいに広げる */
.program-gallery img {
    width: 100%;
    height: 100%; /* 親(aタグ)の高さに合わせる */
    object-fit: cover; /* 縦横比を保ったまま親要素を埋める（トリミングされる） */
    
    display: block;
    /* border: 1px solid #ddd; ← borderは親(aタグ)に移動 */
}

/* スケジュール表 */
.program-schedule {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #ccc;
    margin-bottom: 0px;
    font-size: 0.9rem;
}
.program-schedule th {
    background-color: #cc167d; /* レイアウト画像の紫 */
    color: white;
    padding: 5px;
    font-size: 1rem;
    text-align: center;
    
}
.program-schedule td {
    border: 1px solid #ccc;
    padding: 7px;
}

/* 奇数行（1, 3, 5...）に薄紫を設定 */
.program-schedule tbody tr:nth-child(odd) td { 
     background-color: #ffeff5; /* 薄ピンク */
}

/* 偶数行（2, 4, 6...）にさらに薄い紫を設定 */
.program-schedule tbody tr:nth-child(even) td { 
     background-color: #fff7fa; /* さらに薄いピンク */
}

.program-schedule td:first-child {
    width: 25%;
    max-width: 150px;
    text-align: center;
    font-weight: bold;
    letter-spacing: 0.05rem;
}

    /***********************************************
    * ★ここが「横並び」の指定★
    ***********************************************/
/* 親ヘッダーにflexを設定し、子要素を垂直中央揃えに */
    .program-block-header {
        display: flex;
        align-items: center; 
        margin-bottom: 20px; 
    }

    /* (要素1) タイトルブロック */
    .program-title-block {
        margin-right: 20px; 
    }

    /* (要素2) SDGs */
    .program-sdgs {
        display: flex; 
        justify-content: flex-end;
        align-items: center; 
        flex-shrink: 0; /* 縮まないようにする */
        /* 以下の行を追加または修正 */
        margin-left: auto; /* 左側のマージンを自動にして右端に寄せる */
        margin-right: 0px; /* 念のため右側マージンを0に */
    }
    .program-sdgs img {
        width: 60px; 
        height: auto;
        margin-right: 12px; 
    }
    .program-sdgs img:last-child {
        margin-right: 0; 
    }


    /* タイトル（h4）のマージン調整 */
    .program-block-header .program-block-title {
        margin-bottom: 0; /* サブタイトルの下なのでマージン不要 */
        
    }
    /* SDGsアイコンのコンテナ */
    .program-block-header .program-sdgs {
        display: flex; 
        justify-content: flex-end;
        margin: 0 0 0 auto; /* ここも 'auto' に修正/確認 */
        flex-shrink: 0;
    }
    .program-block-header .program-sdgs img {
        width: 60px; /* PCでのアイコンサイズを少し小さく */
        height: auto;
        margin-right: 8px; /* アイコン間の間隔 */
    }
    .program-block-header .program-sdgs img:last-child {
        margin-right: 0; /* 最後のアイコンは右マージンなし */
    }
    
    /* (1) 親コンテナをflexboxにする */
    .program-column-wrapper {
        display: flex; 
        justify-content: space-between; /* 左右のカラム間に隙間を空ける */
    }

    /* (2) 左カラムの幅を指定 */
    .program-left-column {
        width: 53%; /* 全体の約58% */
    }

    /* (3) 右カラムの幅を指定 */
    .program-right-column {
        width: 45%; /* 全体の約40% */ 
    }
    /*************************************************/
}

/* ===================================
   教育プログラム詳細 (education.html)
   =================================== */

/* -----------------------------------
   SP・PC共通スタイル
----------------------------------- */

/* ▼ ページ上部（探究学習プログラム）*/