/* ===================================================
   PC 専用スタイル (≥ 840px)
   - コンテンツ幅は 840px 固定、画面が広いほど左右余白が広がる
   - 指定はpxで管理
   =================================================== */

   :root { --container: 1260px; }

   /* コンテナ */
   .inner {
     max-width: var(--container);
     margin: 0 auto;
     padding: 0 10px;
   }
   
   /* -----------------------------------------------
      Header / Navigation
   ----------------------------------------------- */
   .topbar {
     display: flex;
     justify-content: flex-end;   /* 交通アクセスを右上寄せ */
     align-items: center;
   }
   
   .site-header{
    aspect-ratio: auto;
    height: 172.8px;
    max-height:172.8px;
   }

   .site-header .global-nav ul {
     display: flex;               /* 念のため */
     justify-content: flex-end;   /* グローバルメニュー右寄せ */
     gap: 12px 22px;
   }
   
   .site-header .global-nav ul li {
     font-size: 9px;              /* ご指定値 */
   }
   
   /* 外部リンクの ↗ を非表示 */
   a[rel~="external"]::after {
     display: none !important;
     content: none !important;
   }

   .ham_visible{
    position: absolute;
    display: none;
   }
   
   /* -----------------------------------------------
      Hero
   ----------------------------------------------- */
   #hero {
     height: 315px;               /* 高さ固定 */
     display: flex;
     align-items: center;         /* 縦中央 */
     justify-content: center;     /* 横中央 */
     position: relative;
     overflow: hidden;
   }
   #hero .hero__bg img {
     width: 100%;
     height: 100%;
     object-fit: cover;
   }
   #hero h1 { font-size: 31.5px; letter-spacing: 7px; font-weight: 400; }
   #hero p  { font-size: 16.5px; letter-spacing: 3.5px;position: relative;
     top: -6px; }
 
   /* -----------------------------------------------
      Sections 共通
   ----------------------------------------------- */
   .section { padding: 0px 140px 68px; 
  max-width: 1260px;
  margin-right: auto;
  margin-left: auto;
  }
   section#appeal{
     padding-top:68px;
   }
    
   /* 2カラム（PCで横並び） */
   .cols {
     display: grid;
     grid-template-columns: 80% 20%;
     gap: 10px;
     align-items: start;
   }
   
   /* -----------------------------------------------
      Appeal / Purpose
   ----------------------------------------------- */
   /* h2：全幅?センター?上下細ボーダー＋1.2行余白 */
   #appeal h2,
   #purpose h2,
   #keepsakes h2 {
     width: 100%;
     text-align: center;
     border-top: 1px solid #cfd3da;
     border-bottom: 1px solid #cfd3da;
     padding: 1.6em 0;
     margin: 70px 0 80px;
   }
   
   /* 見出し/本文サイズ */
   #appeal h2, #purpose h2, #keepsakes h2 {
     font-size: 30px;
    font-weight: 400;
    letter-spacing: 4px; }
   #appeal h3, #purpose h3 {
    position: relative;
    top: -10px; 
  font-weight: 400;}
   #appeal p,  #purpose p  { font-size: 16px; }
   
   /* 写真：小さめ、114px、角丸なし */
   #appeal .figure img,
   #purpose .figure img {
     width: 180px;
     max-width: 100%;
     border-radius: 0;
     box-shadow: none;
     display: block;
     margin: 75px 0px 0 0px;
       }
   
   /* メディアカラム：幅と余白 */
   #appeal .col--media {
     margin-left: 24px;  /* ご指定：24px */
     width: 230px;       /* ご指定：230px */
   }
   
   /* 本文フォントを明朝（PCのみ） */
   body p {
     font-family: "Hiragino Mincho ProN","Yu Mincho","Noto Serif JP", serif;
   }
   
   /* -----------------------------------------------
      Programs
   ----------------------------------------------- */


   /* 背景ラベル：幅650px?中央寄せ?文字センター */
   #programs h2 {
     width: 1000px;
     max-width: 100%;
     margin: 0 auto 40px;
     text-align: center;
     padding: 10px 14px;
     background: #8a1d3f;
     color: #fff;
   
   }
   
   #programs h3 { font-size: 16px; 
    .donationporpose{
      font-size:24px;
    }
  }
   
   /* -----------------------------------------------
      Donation Methods（主要サイズ）
   ----------------------------------------------- */
   #donation-methods h2 { font-size: 24px; }
   #donation-methods h3 { font-size: 18px; }
   #donation-methods h4 { font-size: 16px; }
   #donation-methods p { font-size: 14px; 
    
    letter-spacing: 1px;
}

   #donation-methods .donation-summary {
     gap: 32px;
     padding: 24px 0;
   }
   #donation-methods .donation-summary figure img {
     width: 210px;
   }
   
   /* -----------------------------------------------
      Keepsakes（PCの見た目）
   ----------------------------------------------- */
   #keepsakes .thumbs {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 12px;
   }

   #keepsakes .thumbs img {
     height: 120px;
     padding: 8px;
     object-fit: contain;
     background: #fff;
   }

   #keepsakes section.gift-item.gift_b .thumbs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 280px;
        margin: 0 auto;
}
#keepsakes section.gift-item.gift_c .thumbs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  width: 140px;
      margin: 0 auto;
}

#keepsakes section.gift-item.gift_d .thumbs {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
      margin: 0 auto;
      width: 420px;
}
#keepsakes section.gift-item.gift_d .thumbs img{
  margin-top: 30px;


}

#keepsakes section.gift-item.gift_d .thumbs .giftcaption{
  position: absolute;

}

#keepsakes section.gift-item.gift_e .thumbs {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
      margin: 0 auto;
      width: 420px;
}
#keepsakes section.gift-item.gift_e .thumbs img{
  margin-top: 30px;


}

#keepsakes section.gift-item.gift_e .thumbs .giftcaption{
  position: absolute;

}

/* 税制優遇 */

#tax h2{
font-size:24px;
font-weight: 400;
}

#tax h3{
  font-size:20px;
}

#tax h4{
  color:#003770;
}


/* フッター */

.site-footer .inner {
  display: grid;
  grid-template-columns: 2fr 4fr;
  padding: 90px 50px 0;
}