/* お知らせ欄スタイル */
.news_section {
  padding: 20px 0;
}

.news_list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.news_item {
  padding: 8px 0;
  border-bottom: 1px solid #E2DED8;
  font-size: 14px;
  color: #574F48;
}

/* スマホ表示のとき、左右に余白を追加 */
@media screen and (max-width: 768px) {
  .news_section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .news_item {
    line-height: 1.7;
    margin-bottom: 8px;
  }
}

.story_section {
  background: #f8f6f2;
  padding: 40px 20px;
  text-align: center;
  margin-top: 40px;
}

.story_title {
  font-size: 20px;
  line-height: 1.6;
  font-weight: bold;
  margin-bottom: 25px;
}

.story_text {
  font-size: 15px;
  line-height: 1.9;
  margin-bottom: 30px;
  color: #444;
}

.story_btn_wrapper {
  margin-top: 20px;
}

.story_btn {
  display: inline-block;
  background: #d2c6b8;
  color: #fff;
  padding: 12px 28px;
  border-radius: 30px;
  font-size: 15px;
  text-decoration: none;
   width: 80%;
  max-width: 280px;
  margin: 20px auto 0;
  padding: 12px 0;
  border-radius: 30px;
}

.story_btn:hover {
  background: #c5b7a8;
  opacity: .85
}

.story_section h2 {
  font-size: 20px;
  line-height: 1.6;
}

.story_banner {
  width: 100%;
  padding: 0 15px;
  box-sizing: border-box;
}

.story_banner img {
  width: 100%;
  height: auto;
  display: block;
  max-width: 100%;
}

/*list-grid5
---------------------------------------------------------------------------*/
.list-grid5-parts .list-parts * {margin: 0;padding: 0;}

/*ボックス１個あたり*/
.list-grid5-parts .list-parts {
	display: grid;
    grid-template-rows: auto 1fr;	/*１つ目（この場合はfigure要素のサイズ）は自動に、２つ目（この場合はtextブロック））を目一杯使う*/
	text-align: center;		/*テキストをセンタリング*/
	margin-bottom: 2rem;	/*ボックスの下に空けるスペース。2文字分。*/
}

/*ボックス内のp要素*/
.list-grid5-parts .list-parts p {
	font-size: 0.85rem;	/*文字サイズを85%に*/
	line-height: 1.5;	/*行間を少し狭く*/
}

/*ボックス内のfigure画像*/
.list-grid5-parts .list-parts figure {
	margin-bottom: 1rem;	/*画像の下に空けるスペース。1文字分。*/
}
.list-grid5-parts .list-parts figure img {
	box-shadow: 10px 10px 0px rgba(0,0,0,0.05);	/*ボックスの影。右へ、下へ、ぼかし幅、最後は色の指定で0,0,0は黒の事で、0.05は色が5%出た状態。*/
	border-radius: 30px;	/*角を丸くするサイズ。丸くしたくなければこの１行を削除。*/
	overflow: hidden;
}

/*ボックス内のfigure画像（※アスペクト比を1:1にした場合）*/
.list-grid5-parts.square .list-parts figure {
	width: 100%;
	aspect-ratio: 1 / 1;	/*幅に対して高さを同じにする*/
}
.list-grid5-parts.square .list-parts figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;			/*コンテナいっぱいにカバー、余分な部分はカット*/
	object-position: center;	/*中央部分を表示*/
}

	/*画面幅500px以上の追加指定*/
	@media screen and (min-width:500px) {

	/*ブロック全体を囲むブロック*/
	.list-grid5-parts {
		display: grid;
		grid-template-columns: repeat(2, 1fr);	/*2列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
		gap: 3rem;	/*ブロックの間に空けるマージン的な指定。３文字分。*/
	}

	}/*追加指定ここまで*/


	/*画面幅800px以上の追加指定*/
	@media screen and (min-width:800px) {

	/*ブロック全体を囲むブロック*/
	.list-grid5-parts {
		grid-template-columns: repeat(3, 1fr);	/*3列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
	}

	}/*追加指定ここまで*/

/* セクションタイトル */
.section_title {
  font-family: 'Rounded M+ 1c', sans-serif;
  font-size: 1.4rem;
  margin-bottom: 15px;
  color: #333;
  text-align: left;
}

/* セット内容 */
.set_contents_box {
  background: #fafafa;
  padding: 20px;
  border-radius: 12px;
  margin: 40px 0;
}

.set_list {
  margin: 0;
  padding-left: 20px;
  line-height: 1.8;
}

.set_note {
  margin-top: 10px;
  color: #666;
}

.faq_block {
  margin: 40px 0;
  font-family: 'Rounded M+ 1c', sans-serif;
}

.faq_item {
  border-bottom: 1px solid #e6e6e6;
  padding: 15px 0;
}

/* チェックボックスは非表示 */
.faq_check {
  display: none;
}

.faq_q {
  display: block;
  font-weight: bold;
  cursor: pointer;
  position: relative;
  padding-right: 25px;
}

/* ＋ アイコン */
.faq_q::after {
  content: "＋";
  position: absolute;
  right: 0;
  top: 0;
  color: #aaa;
}

/* チェックされてる時は ー に変わる */
.faq_check:checked + .faq_q::after {
  content: "−";
}

/* 最初は閉じた状態 */
.faq_a {
  display: none;
  margin-top: 10px;
  color: #555;
  line-height: 1.6;
}

/* チェックされたら開く */
.faq_check:checked + .faq_q + .faq_a {
  display: block;
}

/* ======================================
   FAQ（よくある質問）スマホ余白調整
   ====================================== */
@media screen and (max-width: 768px) {
  .faq_block {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .faq_item {
    margin-bottom: 20px;
  }

  .faq_q {
    display: block;
    padding: 12px;
    border-radius: 8px;
    background: #f8f6f3;
    margin-bottom: 6px;
  }

  .faq_a {
    padding: 12px;
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid #e5ded6;
  }
}


.review-card {
  background:#FFFFFF;
  padding:20px;
  border-radius:12px;
  text-align:center;
  margin:20px auto;
  max-width:500px;
}

.review-card-img {
  width:100%;
  border-radius:12px;
  margin-bottom:15px;
}

.review-card-text {
  font-size:14px;
  line-height:1.7;
  color:#444;
  margin-bottom:15px;
}

.review-more-btn {
  display:inline-block;
  padding:10px 20px;
  background:#d6c7b2;
  color:#fff;
  border-radius:50px;
  text-decoration:none;
  font-size:14px;
}

.review-more-btn:hover {
  background:#c4b79f;
}

.donation_banner {
  background: #f7f4f1;
  padding: 30px 20px;
  border-radius: 14px;
  text-align: center;
  margin: 40px 0;
}

.donation_title {
  font-size: 20px;
  margin-bottom: 10px;
  color: #5b5143;
}

.donation_text {
  font-size: 15px;
  line-height: 1.7;
  color: #6e6253;
  margin-bottom: 20px;
}

.donation_btn {
  display: inline-block;
  background: #d4c7b8;
  padding: 12px 30px;
  border-radius: 25px;
  text-decoration: none;
  color: #fff;
  font-size: 15px;
}

.top_story_block {
  max-width: 640px;
  margin: 80px auto;
  padding: 0 20px;
  text-align: center;
}

.top_story_title {
  font-size: 22px;
  margin-bottom: 12px;
  letter-spacing: 0.05em;
}

.top_story_lead {
  font-size: 14px;
  color: #666;
  margin-bottom: 24px;
}

.top_story_text {
  font-size: 15px;
  line-height: 2;
  margin-bottom: 32px;
}

.top_story_btn_wrap {
  text-align: center;
}

.top_story_btn {
  display: inline-block;
  padding: 14px 36px;
  border-radius: 999px;
  background: #d6c9b8;
  color: #fff;
  font-size: 14px;
  text-decoration: none;
}

.top_story_btn:hover {
  opacity: 0.85;
}