/*--------------------------------
  メイン構造
----------------------------------*/
.kodomo_top-inner, .about-inner, .day-activity_erea, .shokudou-inner, .message-inner, .voice-inner {
  padding: 80px 8%;
    width: 100%;       /* まずは画面幅いっぱいに */
  max-width: 1400px; /* でも1400pxを超えない */
  margin: 0 auto; 
}


h2 {
  font-size: 3.2rem;
  color: #8F4400;
}
h3 {
  font-size: 2.4rem;
}
.wave, .wave-orange {
  width: 100%;
}
.wave-orange {
  background-color: #FFEBC7;
}
/*--------------------------------
  背景色
----------------------------------*/
.about, .message-section {
  background-color: #E7B880;
}
.shokudou, .voice-section {
  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;
}
/*--------------------------------
  ボタン共通
----------------------------------*/
.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;
}
.btn-member:hover, .btn-volunteer:hover {
  opacity: 0.8;
}


/*--------------------------------
  点線 
----------------------------------*/
.dotted-line {
  width: 100%;
  border-bottom: 7px dotted #E7B880;
  margin: 10px 0 20px;
}
/*--------------------------------
  1. ご支援のお願い
----------------------------------*/
/* 全体の左右レイアウト */
.kodomo_top-inner {
gap: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* 左側のテキストは自動で広がる */
.top-text {
  flex: 6;
  padding-top: 20px;
  text-align: left;
  line-height: 190%;
}
.top-text h1 {
  font-size: 3.2rem;
  color: #8F4400;
  width: fit-content;
  border-bottom: 7px dotted #E7B880;
  margin-bottom: 10px;
  padding-right: 50px;
  padding-bottom: 5px;
}
.top-text p {
  padding-top: 10px;
}

@media screen and (max-width: 1156px){
.top-text h1 {
  font-size: 2.6rem;
  width: 350px;
  padding-right: 20px;
}

}

@media screen and (max-width: 768px) {
  .kodomo_top-inner {
    flex-direction: column;
    gap: 0px;
  }
  .top-text {
    width: 100%;
    padding: 0 0 20px;
    text-align: center;
  }
  .top-text h1 {
    padding-right: 0;
    margin-bottom: 15px;
    font-size: 2.0rem;
    width: 100%;
  }
  .top-text p {
    width: 100%;
    padding-top: 0;
    margin-bottom: 20px;
  }
  .kodomo_top-inner img {
    flex: none;
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
  }
}
/*--------------------------------
  2. about
----------------------------------*/

/* レイアウト */
.about-inner {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}
@media (max-width: 768px) {
  .about-inner {
    flex-direction: column-reverse;
  }
}

/* マップ */
.about_map iframe {
  width: 100%;
  max-width: 410px;
  height: 270px;
  border: none;
  border-radius: 8px;
}

/* 吹き出し */
.about_text {
  position: relative;
      padding-top: 10px;
}
.about_fukidashi {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-100%); /* 親のpadding-top分だけ上へ */
  background: #fff;
  padding: 0.5em 2em;
  border-radius: 8px;
   box-shadow: 3px 4px 1px rgba(0, 0, 0, 0.5);
}
.about_fukidashi::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 10%;
    transform: translateX(-50%);
    border-width: 10px;
    border-style: solid;
    border-color: #fff transparent transparent transparent;
    filter: drop-shadow(3px 4px 1px rgba(0, 0, 0, 0.5));
}

/* テキストボックス＆住所 */
.about_textbox
 {
display: flex;
  background: #FCF7E4;
  border-radius: 8px;
    padding: 20px 40px;
}
.about_address {
margin-top: 20px;
  display: flex;
  gap: 20px;
}
.about_address a{
font-size: 2.0rem;
font-weight: bold;
width: fit-content;
display: flex;
  background: #FCF7E4;
  border-radius: 8px;
padding: 5px 40px;
color: #D48A31;
align-items: center;
}



.about_address img{
width: 30px;
height: auto;
object-fit: contain;
margin-right: 20px;
}
.about_map iframe {
 max-width: 100%;
}

@media (max-width: 1260px){

.about_address{
  flex-direction: column;
}
}


@media (max-width: 768px) {
.about_text{
font-size: 1.4rem;
}

.about_textbox{
padding: 20px;
}
  .about_address {
  font-size: 1.4rem;
    flex-direction: column;
  }
  .about_address img{
padding-right: 10px;
margin-right: 0px;
}
  .about_address a {
        /* flex アイテムとして縮むことを許可 */
    flex: 1 1 auto;
font-size: 1.5rem;
    /* テキストを単語／文字単位で折り返す */
    overflow-wrap: break-word;
    word-wrap: break-word;      /* 古いブラウザ対応 */
    white-space: normal;
width: 100%;
    padding: 5px 10px 5px 20px;
    min-width: 0; 
  }
}
/*--------------------------------
  3. こども食堂の説明
----------------------------------*/
/* about-block：左右レイアウト（4:6の比率） */
.shokudou-block {
  display: flex;
  margin-bottom: 80px;
  align-items: center;
  justify-content: space-between;
  gap: 80px;
}
/* 左側：画像 */
.shokudou-image-left {
  position: relative;
  /* 必要に応じて幅・高さを指定 */
}

/* 一番目の画像（kodomo1.png）を上に */
.shokudou-image-left img:first-child {
  position: relative;
  z-index: 2;
  display: block; /* ブロック化して位置を安定させる */
}

/* 二番目の画像（Ellipse 21.png）を下に */
.shokudou-image-left img:nth-child(2) {
width: 450px;
  position: absolute;
  top: 55%;       /* 主役画像の中心に合わせる例 */
  left: 60%; 
  transform: translate(-50%, -50%) scale(1.2); /* 少し大きめに */
  z-index: 1;
}



/* 右側：テキストボックス */
.shokudou-text-right {
  flex: 1;
  border-radius: 20px;
}

.shokudou-block:nth-child(2) {
position: relative;
}

.shokudou_fukidashi{
font-size: 1.8rem;
position: absolute;
left: 75px;
top: -10px;
    background: #fff;
    padding: 0.5em 2em;
    border-radius: 8px;
    box-shadow: 3px 4px 1px rgba(208, 124, 124, 1);
     z-index: 10; /* ← これを追加！ */
}


.shokudou_fukidashi::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 10%;
    transform: translateX(-50%);
    border-width: 10px;
    border-style: solid;
    border-color: #fff transparent transparent transparent;
    filter: drop-shadow(3px 4px 1px rgba(208, 124, 124, 1));
}


/* テキストボックス内の説明文 */
.shokudou-text-right .description {
  color: #503409;
  line-height: 1.8;
}
.shokudou-block:nth-child(2) {
  flex-direction: row-reverse;
}



.shokudou-block:nth-of-type(2) .shokudou-image-left {
  position: relative;
  overflow: visible; /* はみ出しを隠さない */
}

/* 2枚目のEllipse画像を右にずらす */
.shokudou-block:nth-of-type(2) .shokudou-image-left2 {
width: 550px;
  position: absolute;
  top: 60%;              /* 親コンテナの縦中央 */
  left: -5%;          /* 親コンテナの右端から20pxはみ出す */
  transform: translateY(-45%); /* 完全に中央寄せ */
  z-index: 1;            /* 背景の円や他要素の下にくるなら調整 */
}





.h3_brown {
  color: #A96F16;
}
.h3_red {
  color: #C65C3F;
}
.h3_yellow {
  color: #8A7617;
}
.dotted-line_brown {
  width: 100%;
  border-bottom: 7px dotted #A96F16;
  margin: 10px 0 20px;
}
.dotted-line_red {
  width: 100%;
  border-bottom: 7px dotted #C65C3F;
  margin: 10px 0 20px;
}
.dotted-line_yellow {
  width: 100%;
  border-bottom: 7px dotted #8A7617;
  margin: 10px 0 20px;
}


.shokudou-image-left_sp{
display: none;
}

.shokudou-block:nth-of-type(3){
margin-bottom: 0px;
}


@media screen and (max-width: 1156px){
.shokudou-block {
  gap: 40px;
}

.shokudou-image-left img:first-child {
width: 350px;
}
.shokudou-image-left img:nth-child(2) {
width: 320px;
}

.shokudou_fukidashi{
font-size: 1.6rem;
position: absolute;
left: 0px;
top: 0px;
    background: #fff;
    padding: 5px 20px;
    border-radius: 8px;
    box-shadow: 3px 4px 1px rgba(208, 124, 124, 1);
     z-index: 10; /* ← これを追加！ */
}


.shokudou_fukidashi::after {
    top: 100%;
    left: 20%;
}


}



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

.shokudou-inner{
padding:80px 0px;
}

  /* 各ブロックを縦並びに */
  .shokudou-block {
    flex-direction: column; /* IMG→TEXT の順 */
    align-items: flex-end; /* 左寄せ */
    gap: 20px; /* 要素間の隙間 */
 
  }
  /* 子要素をフル幅に */
  .shokudou-image-left, .shokudou-text-right {
    flex: none;
    width: 100%;
    padding: 0;
       padding: 0px 8%;
  }
  .shokudou-block:nth-child(2) {
          gap: 40px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
  }
  .shokudou-text-right h3 {
    font-size: 1.6rem;
    text-align: center;
  }
  .shokudou-text-right p {
    font-size: 1.4rem;
  }
  
  
  .shokudou-image-left{
display: none;
}

.shokudou-image-left_sp{
display: block; 
}
.shokudou-image-left_sp img{
width: 600px;
}

.shokudou_fukidashi{
font-size: 1.6rem;
position: absolute;
        left: 7%;
        top: 27rem;
}

}

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

.shokudou_fukidashi{
font-size: 1.4rem;
position: absolute;
left: 2%;
top: 32rem;
}

}

/*--------------------------------
  ４. こども食堂の日々（ボランティア）
----------------------------------*/
.day-volunteer_erea {
  padding-top: 60px;
  text-align: center;
}
.volunteer-title {
  font-size: 2.4rem;
  color: #FFF;
  background-color: #C65C3F;
  padding: 5px 20px;
  width: fit-content;
  margin: 0 auto;
}
.volunteer-description {
  padding: 20px 0;
}
.volunteer_button_erea {
  background-image: url("../img/volunteer.png");
  height: 240px;
  padding-top: 100px;
}
.volunteer-button_red, .volunteer-button_brown {
  background-color: #FFFFFF;
  color: #503409;
  font-weight: 600;
  font-size: 1.8rem;
  padding: 20px 30px;
  align-items: center;
  border-radius: 15px;
  text-decoration: none;
}
.volunteer-button_red {
  border: solid 6px #D46969;
  margin-right: 50px;
}
.volunteer-button_brown {
  border: solid 6px #C68C2F;
}

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

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



.sp_br {
  display: none;
}

@media screen and (max-width: 1156px){
  .volunteer_button_erea {
    padding-top: 25px;
}
  .volunteer_button_erea a {
    display: block;         /* ブロック要素に変えて縦並びに */
    margin-bottom: 16px;    /* ボタン下に 16px の余白 */
  }
  .volunteer_button_erea a:last-child {
    margin-bottom: 0;       /* 最後のボタンだけ余白不要 */
  }
    .volunteer-button_red, .volunteer-button_brown {
    width: 450px;
    text-align: center;
    margin: 0 auto;

}
}

@media screen and (max-width: 768px) {
  .day-volunteer_erea {
    padding-top: 30px;
    text-align: center;
  }
  .volunteer-title {
    font-size: 2.0rem;
    color: #FFF;
    background-color: #C65C3F;
    padding: 5px 20px;
    width: fit-content;
    margin: 0 auto;
  }
  .sp_br {
    display: block;
  }
  .volunteer-description {
    padding: 20px 24px;
    font-size: 1.3rem;
  }
  .volunteer_button_erea {
    padding-top: 40px;
}
  .volunteer_button_erea a {
    display: block;         /* ブロック要素に変えて縦並びに */
    margin-bottom: 16px;    /* ボタン下に 16px の余白 */
  }
  .volunteer_button_erea a:last-child {
    margin-bottom: 0;       /* 最後のボタンだけ余白不要 */
  }
  
  .volunteer-button_red, .volunteer-button_brown {
    font-size: 1.4rem;
    padding: 10px 20px;
    width: fit-content;
    text-align: center;
    margin: 0 auto;
}
}
.activity-title {
  width: fit-content;
  border-bottom: 7px dotted #E7B880;
  margin: 10px 0;
  margin-bottom: 10px;
  padding-right: 50px;
  padding-bottom: 5px;
}
/* つくば「こどもの家」食堂の日々：グリッドレイアウト */
.activity-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 横2列 */
  gap: 60px 45px; /* アイテム間の隙間 */
  margin-top: 40px;
}
/* 各アイテム */
.image-text-item {
  align-items: center;
  display: flex;
  flex-direction: column; /* 上：画像、下：テキスト */
  overflow: hidden;
}
/* 画像 */
.image-text-item img {
  border-radius: 8px;
  width: 570px;
  height: 365px;
  display: block;
  object-fit: cover;
}
/* テキスト */
.image-text-item p {
  margin-top: 15px;
  font-size: 1.6rem;
  line-height: 1.6;
  color: #503409;
}
.activity-description {
  padding-top: 10px;
}
/* スマホ対応：1列レイアウト */
@media screen and (max-width: 768px) {
  .activity-title {
    text-align: center;
    padding-right: 0;
    margin-bottom: 15px;
    font-size: 2.0rem;
    width: 100%;
  }
  .activity-description {
    font-size: 1.4rem;
  }
  .activity-grid {
    grid-template-columns: 1fr; /* 横1列 */
  }
  .image-text-item p {
    font-size: 1.4rem;
    width: 100%;
  }
  
  .image-text-item img {
    width: 340px;
    height: 220px;
    display: block;
    object-fit: cover;
}
}
/*--------------------------------
  5. メッセージ
----------------------------------*/
.message-inner {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.message-inner p {
  width: 65%;
  background-color: #FFFEFB;
  border-radius: 25px;
  padding: 30px 40px;
  height: fit-content;
  position: relative; /* 三角を配置するために必要 */
}

.message-inner p::after {
    content: "";
    position: absolute;
    top: 65%;
    right: -40px; /* 三角の位置（吹き出しの外側） */
    transform: translateY(-50%);
    border-width: 20px;
    border-style: solid;
    border-color: transparent transparent transparent #FFFEFB;
}

.message-inner img {
  flex: 0 0 200px;
  /* さらにサイズ調整を自然にしたいなら */
  max-width: 100%; /* 親要素の枠を超えない */
  height: auto;
}
.message_red {
  color: #C65C3F;
}



@media screen and (max-width: 768px) {
  .message-inner {
    flex-direction: column; /* IMG→TEXT の順 */
    align-items: center; /* 左寄せ */
    gap: 50px;
  }
  
  .message-inner p{
  width: 100%;
  font-size: 1.4rem;
  }
  
  .message-inner img {
  max-width: 100%; /* 親要素の枠を超えない */
  height: 20px;
}

  .message-inner p::after {
    content: "";
    position: absolute;
    top: 100%;
    right: 60%; /* 三角の位置（吹き出しの外側） */
    transform: translateX(-50%);
    border-width: 20px;
    border-style: solid;
    border-color: #FFFEFB transparent transparent transparent;
  }
}
/*--------------------------------
  ６. ボランティアの声
----------------------------------*/
.voice-title {
  text-align: center;
}
.voice-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 横2列 */
  gap: 40px; /* アイテム間の隙間 */
  margin-top: 40px;
}
/* 各アイテム */
.voice-text-item {
  align-items: center;
  display: flex;
  flex-direction: column; /* 上：画像、下：テキスト */
  overflow: hidden;
  background-color: #FFFFFF;
  border-radius: 17px;
  padding: 50px;
}
/* 画像 */
.voice-text-item h3 {
  margin-top: 15px;
  font-size: 2.0rem;
}
/* テキスト */
.voice-text-item p {
  margin-top: 15px;
  font-size: 1.6rem;
  line-height: 1.8;
  color: #503409;
}

@media screen and (max-width: 1156px){
  .voice-grid {
    grid-template-columns: 1fr; /* 横1列 */
  }


}
/* スマホ対応：1列レイアウト */
@media screen and (max-width: 768px) {

  .voice-title {
   font-size: 2.0rem;
  
}
.voice-text-item{
padding: 20px;
}

.voice-text-item img{
width: 100px;
}
.voice-text-item h3 {
  font-size: 1.6rem;
}

.voice-text-item p {

  font-size: 1.4rem;
}



}