@charset "UTF-8";

/* ============================================================
  Variables
============================================================ */
/* ============================================================
  Break Point
============================================================ */
.only-pc {
  display: block !important;
}

.only-sp {
  display: none !important;
}

.only-pc--inline {
  display: inline !important;
}

@media only screen and (max-width: 1024px) {

  .only-pc,
  .only-pc--inline {
    display: none !important;
  }

  .only-sp {
    display: block !important;
  }
}

/* ============================================================
  Font Family
============================================================ */
/* ============================================================
  Font Size
============================================================ */
@media only screen and (max-width: 1024px) {
  body {
    font-size: 0.875em;
  }
}

large {
  font-size: 1.375em;
}

@media only screen and (max-width: 1024px) {
  large {
    font-size: 1em;
  }
}

/* ============================================================
  Color
============================================================ */
/* ============================================================
  その他
============================================================ */



.tt1-table {
  width: 95%;
  margin: 0 auto;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
  font-weight:bold;
}

th {
  background-color: #368076;
  color:#fff;
}

td {
  background-color: #e4edec; 
  border: 1px solid #fff;
}

.header1, .cell1 {
  width: 4%; /* セル1の幅 */
  height: 70px; /* セル1の高さ */
}

.header3, .cell2 {
  width: 23%; /* セル3の幅 */
  height: 70px; /* セル3の高さ */
}

.header4, .cell3 {
  width: 20%; /* セル3の幅 */
  height: 70px; /* セル3の高さ */
}
.header5, .cell4 {
  width: 42%; /* セル3の幅 */
  height: 70px; /* セル3の高さ */
}

.header6, .cell5 {
  width: 8%; /* セル3の幅 */
  height: 70px; /* セル3の高さ */
  text-align: center;
}

/* 「詳細」のリンク設定 */

.link-url {
  text-decoration: underline;
  color: #368076; /* 通常時のリンクの色 */
}

.link-url :hover {
 text-decoration: underline; /* ホバー時に下線を表示 */
 color: #e1e8e7; /* ホバー時のリンクの色 */
}




/* スマホ表示用のスタイル */
@media screen and (max-width: 1024px) {
    .tt1-table thead {
        display: none; /* ヘッダーを非表示にする */
    }
    
    .tt1-table, .tt1-table tbody, .tt1-table tr, .tt1-table td {
        display: block;
        width: 98%;
        margin-left:0.25em;
    }
    
    .tt1-table tr {
        margin-bottom: 30px;
    }
    
    .tt1-table td {
        text-align: left;
        padding-left: 35%;
        position: relative;
        height: auto; /* tdの高さを自動調整 */
        display: flex; /* 擬似要素を中央揃えにするためにflexを使用 */
        align-items: center; /* 擬似要素を垂直方向に中央揃え */
    }
  
    .tt1-table td::before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        width: 30%;
        padding-left: 0;
        font-weight: bold;
        background-color: #368076; /* 背景色を設定 */
        color: #fff; /* 文字色を設定 */
        padding: 0; /* パディングを追加して見た目を調整 */
        margin-left: 0;
        height: 100%; /* tdの高さに合わせる */
        text-align: center;
        display: flex; /* 擬似要素を中央揃えにするためにflexを使用 */
        align-items: center; /* 擬似要素を垂直方向に中央揃え */
        justify-content: center;
    }


/* ヘッダーの内容をデータ属性に追加 */
.tt1-table td.cell1::before { content: "No."; }
.tt1-table td.cell2::before { content: "発行者情報"; }
.tt1-table td.cell3::before { content: "支援先"; }
.tt1-table td.cell4::before { content: "活動概要"; }
.tt1-table td.cell5::before { content: "詳細"; }

  }


/* 表のアコーディオン化 */

 
  
.table-box {
  width: 90%;
  max-width: 100%;
  margin: 0 auto;
  background: #368076;
  color: #fff;

}

.accordion-header {
    cursor: pointer;
    padding: 10px;
    text-align: left;
    display: block;
    width: 100%;
    font-size: 16px;
    position: relative;

}

.accordion-header::after {
    content: '∨';
    font-size: 16px;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
    color: white; /* 修正 */
    padding: 2px 5px; /* 追加 */
}



.accordion-item input[type="checkbox"] {
    display: none;
}

.accordion-item input[type="checkbox"]:checked ~ .accordion-header::after {
    transform: translateY(-50%) rotate(180deg);
}


.accordion-content {
    display: none;
    padding: 0;
    background-color: white;
    border-top: 1px solid white;
    color: #000;
   
}

 .accordion-item {
     border-bottom: 2px solid white; /* 各アイテムの下部に白の線を追加 */
 }



.accordion-item input[type="checkbox"]:checked ~ .accordion-content {
    display: block;
}


/* スマホ表示時にtheadを非表示にする*/

@media screen and (max-width: 1024px) {
  .tt1-table thead {
    display: none;
  }
}