/*--------------------------------
  メイン構造
----------------------------------*/
.support_top-inner,.support-inner,.support-voices-inner{
padding: 80px 8%;
}

h2{
font-size: 3.2rem;
color: #8F4400;

    width: fit-content;
    border-bottom: 7px dotted #E7B880;
    margin-bottom: 10px;
    padding-right: 50px;
    padding-bottom: 5px;
}


h3{
font-size: 2.4rem;
color: #FFFFFF;
}

.member_h3,.volunteer_h3,.donation_h3{
width: fit-content;
padding: 5px 30px;
border-radius: 20px 20px 0 0;  
}

.support-member-inner,.volunteer-content,.donation-inner{
background-color: #FEFBF3;
padding: 30px 40px;
border-radius: 0 15px 15px;  
}

.support-member-erea,
.support-volunteer-erea {
  padding-bottom: 60px; /* お好みのスペース量に調整 */

}

.wave{
width: 100%;
}

/*--------------------------------
  背景色
----------------------------------*/
.support-inner{
background-color: #E7B880;
}

.section-inner{
background-color: #FFEBC7;
}

.member_h3,.btn-member{
background-color: #DF8E2D;
}

.volunteer_h3,.btn-volunteer{
background-color: #E17456;
}

.donation_h3,.btn-donation,.btn-wishlist{
background-color: #FAD531;
color: #825E46;
}
.donation_h3,.btn-donation{
  background-color: #f8b8ad;
  color: #825E46;
}
/*--------------------------------
  ボタン共通
----------------------------------*/
.btn-member,
.btn-volunteer{
  display: inline-block;
  color: #fff;
  padding: 10px 20px;
  border-radius: 30px;
  font-weight: bold;
  text-align: center;
  transition: opacity 0.3s ease;
  margin-top: 20px;
  text-decoration: none;
}
.btn-member:hover,
.btn-volunteer:hover {
  opacity: 0.8;
}

.btn-donation,
.btn-wishlist{
  line-height: 1.9rem;
  display: inline-block;
  padding: 10px 10px;
  border-radius: 30px;
  font-weight: bold;
  text-align: center;
  transition: opacity 0.3s ease;
  margin-top: 20px;
  text-decoration: none;
  width: 280px;
}

.btn-donation:hover,
.btn-wishlist:hover {
  opacity: 0.8;
}

.btn-member::before {
  content: "▶";                       /* 三角アイコン */
  display: inline-block;
  width: 2.0em;                       /* 円の幅 */
  height: 2.0em;                      /* 円の高さ */
  line-height: 2.0em;                 /* アイコンを真ん中に */
  margin-right: 1.5em;                /* テキストとの間隔 */
  background-color: #FEFBF3;             /* 円の背景色 */
  color: #E1A156;                     /* アイコン（三角）の色 */
  border-radius: 50%;                 /* 円にする */
  text-align: center;                 /* アイコンを中央寄せ */
  font-size: 0.6em;  /* ここを小さく */                 /* アイコンサイズ */
}

.btn-volunteer::before {
  content: "▶";                       /* 三角アイコン */
  display: inline-block;
  width: 2.0em;                       /* 円の幅 */
  height: 2.0em;                      /* 円の高さ */
  line-height: 2.0em;                /* アイコンを真ん中に */
  margin-right: 1.5em;                /* テキストとの間隔 */
  background-color: #FEFBF3;             /* 円の背景色 */
  color: #E17456;                     /* アイコン（三角）の色 */
  border-radius: 50%;                 /* 円にする */
  text-align: center;                 /* アイコンを中央寄せ */
  font-size: 0.6em;  /* ここを小さく */                   /* アイコンサイズ */
}

.btn-donation::before, 
.btn-wishlist::before{
  content: "▶";                       /* 三角アイコン */
  display: inline-block;
  width: 2.0em;                       /* 円の幅 */
  height: 2.0em;                      /* 円の高さ */
  line-height: 2.0em;                 /* アイコンを真ん中に */
  margin-right: 1.5em;                 /* テキストとの間隔 */
  background-color: #FEFBF3;             /* 円の背景色 */
  color: #FAD531;                     /* アイコン（三角）の色 */
  border-radius: 50%;                 /* 円にする */
  text-align: center;                 /* アイコンを中央寄せ */
  font-size: 0.6em;  
}
.btn-donation::before{
 color: #f19e8f;
}
/*--------------------------------
  点線 
----------------------------------*/
.dotted-line {
  width: 100%;
  border-bottom: 7px dotted #E7B880;
  margin: 10px 0 20px;
}

/*--------------------------------
  1. ご支援のお願い
----------------------------------*/
/* 全体の左右レイアウト */
.support_top-inner {
gap: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 左側のテキストは自動で広がる */
.intro-text {
    flex: 6;
    padding-top: 20px;
    text-align: left;
    line-height: 190%;
}


.intro-text p {
  padding-top: 10px;
}


.support_p_bold{
font-size: 2.4rem;
font-weight: 600;
}

@media screen and (max-width: 1156px){
.intro-text h2 {
  width: 350px;
  padding-right: 20px;
}
}
@media screen and (max-width: 768px) {

.br_sp{
display: none;
}

  .support_top-inner {
  gap: 0px;
    flex-direction: column;
  }
  .intro-text {
    width: 100%;
    padding: 0 0 ;
    text-align: center;
  }
  
  .intro-text h2 {
  width: 100%;
  padding-right: 20px;
}

  
h2 {
text-align: center;
    padding-right: 0;
    margin-bottom: 15px;
    font-size: 2.0rem;
    width: 100%;
  }
  
  h3{
  font-size: 1.8rem;
  
  }
  .support_p_bold{
font-size: 1.8rem;
font-weight: 600;
}

  .intro-text p {
    width: 100%;
    padding-top: 0;
    margin-bottom: 20px;
    font-size: 1.4rem;
  }
  .support_top-inner img {
    flex: none;
    width: 80%;
    height: auto;
    display: block;
    margin: 0 auto;
  }
}
/*--------------------------------
  2. 会員として支援する
----------------------------------*/

.support-member .description {
  line-height: 1.8;
  margin-bottom: 40px;
}

.description{
font-size: 1.6rem;
}
.support-list-block {
  margin-bottom: 30px;
}

.support-list-block h3 {
  position: relative;       /* ::before を位置づけるため */
  padding-left: 1.6em;      /* 丸分のスペースを確保 */
  font-size: 2.0rem;
  color: #825A2D;
}

.support-list-block h3::before {
  content: "";
  position: absolute;
  top: 0.7em;               /* 見出しテキストの中央あたりに合わせる */
  left: 0;                  /* padding-left と合わせて丸を配置 */
  width: 0.8em;             /* 丸の直径 */
  height: 0.8em;
  background-color: #F3AD5B;
  border-radius: 50%;
}

.support-list-block ul {
  list-style: disc inside;
  line-height: 1.8;
  margin: 0;
  padding: 0;
}

.center-button {
  text-align: center;
}

.member-textbox{
font-size: 1.8rem;
display: flex;
flex-wrap: wrap;
gap: 80px;
}

.support-list {
 padding-top: 30px;
  display: flex;
  gap: 20px;   /* 列間の隙間 */
}

/* 直下の要素を 1:1（50%:50%）に */
.support-list > .support-list1,
.support-list > .support-list-block {
  flex: 1;     /* flex:1 で同じ幅 */
}

.support-list1 table{
background-color: #FEE5C9;
border-radius: 15px;
padding: 0 50px;
width: 100%;
gap:20px;
  border-collapse: separate;    /* セルを分離モードに */
  border-spacing: 0 20px;  
}

.support-list1 th{
background-color: #FEFBF3;
color: #E1A156;
padding: 2px 15px;
border-radius: 10px;
}

.support-list1 td{
padding-left: 30px;
}

.furikomi-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #EDD9BD;
}

.furikomi-table th,
.furikomi-table td{
  padding: 10px 20px;
  border-bottom: 1px solid #EDD9BD;
}

.furikomi-table th {
  width: 30%;
  text-align: center;
  color: #FFF;
  background-color: #F1B882;
  font-weight: normal;
}

.furikomi-table td{
  text-align: left;
  }
  
  @media screen and (max-width: 1156px){
.member-textbox {
  display: block;
  gap: 0; /* flex の gap を解除 */
}
  
  }
  
@media screen and (max-width: 768px) {
.support-member-inner, .volunteer-content, .donation-inner {
  padding: 20px 15px;
}
.support-member-inner p, .volunteer-content p {
  font-size: 1.4rem;
}
/* support-list を縦並びに */
.support-list {
  display: block;
  gap: 0; /* flex の gap を解除 */
  padding-top: 20px;
}
.support-list-block h3 {
  font-size: 1.6rem;
}
/* 左側のリストグループと右側の振込先をフル幅に */
.support-list > .support-list1, .support-list > .support-list-block {
  flex: none; /* flex を無効化 */
  width: 100%; /* 幅100% */
  margin-bottom: 20px; /* 要素間に余白 */
}
/* member-textbox の flex も解除 */
.member-textbox {
  display: block;
  gap: 0;
}
.support-list1 table {
  padding: 0 10px;
  font-size: 1.4rem;
}
.support-list1 th{
padding: 2px 10px;
border-radius: 5px;
}

.support-list1 td{
padding-left: 10px;
}

.furikomi-table {
font-size: 1.4rem;
}

.furikomi-table th,
.furikomi-table td{
  padding: 10px 10px;
}

}
/*--------------------------------
  3. ボランティアとして活動する
----------------------------------*/
.volunteer-content {
  display: flex;
  flex-wrap: wrap;
  gap: 50px;
  align-items: flex-start;
}

.volunteer-text {
  flex: 1;
  min-width: 280px;
  line-height: 1.8;
  font-size: 1.8rem;
}

@media screen and (max-width: 1156px){
.volunteer-images img{
width: 90%;
display: block;
margin: 0 auto;
margin-bottom: 20px;
}

  .volunteer-content {
    display: block;
    gap: 0;               /* flex の gap は無効化 */
  }
  .volunteer-text {
text-align: center;
  }
}


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

  /* テキストエリアも幅100%に */
  .volunteer-text {
    flex: none;           /* flex プロパティをリセット */
    width: 100%;
    margin-bottom: 20px;  /* 下に余白を入れる */
  }

  /* 画像エリアも幅100%に */
  .volunteer-images {
    width: 100%;
    margin-bottom: 20px;
  }
}
/*--------------------------------
  4. 寄付で支援する
----------------------------------*/


.support-donation .description {
  line-height: 1.8;
  margin-bottom: 40px;
}

.donation-circles {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 10px;
  padding: 20px 40px;
  align-items: center;
}

.circle-item {
  /* 既存のサイズ・見た目 */
  flex: 0 0 240px;
  width: 240px;
  height: 240px;
  background-color: #F3E28A;
  border: 4px solid #FDC875;
  border-radius: 50%;
  box-sizing: border-box;

  /* ここから：中央寄せ */
  display: flex;
  flex-direction: column;    /* 縦方向に並べる */
  justify-content: center;   /* 縦中央寄せ */
  align-items: center;       /* 横中央寄せ */
  text-align: center;        /* テキストも中央揃え */
}

.item_name {
  margin: 0 0 10px;          /* 画像との間に余白 */
  font-size: 2.0rem;         /* お好みで調整 */
  color: #A36D1B;            /* お好みで */
  font-weight: 600;
}
.item_text {
padding-top: 5px;
color: #776447;
width: 70%;
font-size: 1.6rem;
font-weight: 400;
text-align: center;
line-height: 1.8rem;
}

.item_text span{
font-size: 1.4rem;
}

.circle-item img {
  height: 100px;             /* 既存のサイズ */
  width: auto;               /* 縦横比を維持 */
  object-fit: cover;
}

.donation-buttons {
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: center;
  width: 280px;
  margin-inline: auto;
}

.donation_box{
display: flex;
}

.donation-circles{
flex: 2;
}
@media screen and (max-width: 1156px){
.donation-circles {
  gap: 00px;
      padding: 20px 0px;
}


.donation_box{
display: block;
}

.btn-donation, .btn-wishlist {
   width: fit-content;
    display: block;
    margin: 0 auto;
    width: 280px;
    font-size: 1.5rem;
}

}
@media screen and (max-width: 768px) {
  /* 全体を縦並びに */
  .donation_box {
    display: block;
  }
  
  .description{
  font-size: 1.4rem;
  }

  /* 丸アイテム群を縦積みに */
  .donation-circles {
    display: block;     /* flex を解除 */
    flex: none;         /* flex プロパティをリセット */
    width: 100%;        /* フル幅 */
    margin-bottom: 20px;
    padding: 0 20px;    /* 必要に応じて左右余白 */
  }

  /* 個々の丸アイテム間に余白 */
  .circle-item {
    margin: 0 auto 20px; /* 中央寄せ＋下余白 */
  }

  /* ボタン群も縦並びに */
  .donation-buttons {
    font-size: 1.5rem;
    display: block;     /* column もリセット */
    width: 100%;
    margin-top: 20px;
    width: 280px;
  }

  .donation-buttons a {
    display: block;
    margin: 0 auto 16px;
  }
  .donation-buttons a:last-child {
    margin-bottom: 0;
  }
  
  .item_name {         /* 画像との間に余白 */
  font-size: 1.6rem;         /* お好みで調整 */
}
.item_text{
font-size: 1.4rem;
}
.item_text span{
font-size: 1.3rem;
}
}
/*--------------------------------
  5. 支援者・関係者の声
----------------------------------*/
.voice-box {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 40px;
  display: flex;
  gap: 20px;    
}

.voice-face {
  width: 340px;
  height: 280px;
  border-radius: 5px;
  object-fit: cover;
}

.voice-name {
  /* 親要素に相対位置付け */
  position: relative;
  /* 左側にマーカーの幅だけパディング */
  padding-left: 1.2em;
  margin: 0 0 10px;
  /* list-style は不要になるので消します */
  list-style: none;
}

/* .voice-name の前に丸マーカー */
.voice-name::before {
  content: "";
  /* 絶対位置で配置 */
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  /* 丸の大きさ */
  width: 0.8em;
  height: 0.8em;
  /* 丸に色 */
  background-color: #F3AD5B;
  border-radius: 50%;
}


.voice-comment {
  line-height: 1.8;
}

.voice-box_text {
  border-left: 2px dotted #E99C17;
  padding-left: 20px;             /* ボーダーとテキストの間隔 */ 
}
.voice-name{
font-size: 2.0rem;
}

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


  /* Flex レイアウトを解除 */
  .voice-box {
    display: block;
    gap: 0;              /* flex の gap をリセット */
    margin-bottom: 20px; /* カード間の余白 */
  }

  /* 画像は幅100%に、高さは自動調整 */
  .voice-face {
    width: 50%;
    margin: auto;
    height: auto;
    border-radius: 5px;
    margin-bottom: 15px;
  }

  /* テキスト領域もフル幅に */
  .voice-box_text {
    display: block;
    border-left: none;   /* 左の点線を解除するなら */
    padding-left: 0;
    font-size: 1.4rem;
  }

  /* お名前とコメントの間隔調整 */
  .voice-name {
    margin-bottom: 10px;
    font-size: 1.6rem;
  }
}