@charset "UTF-8";
/* ========================================================
   北九州リサイクル若松 遺品整理センター
   - page-gomiyashiki.css（粗大ごみ・不用品廃品回収ページ専用）
   ※共通スタイルは common.css
   ======================================================== */

/* ========== ページヒーローバナー ========== */
.page-hero{
  position:relative;
  width:100%;
  height:50vh;
  min-height:340px;
  background:#000;
  overflow:hidden;
}
.page-hero-img{
  position:absolute;inset:0;
  background-size:cover;
  background-position:center;
  background-image:url("../images/gomiyashiki_hero.webp"); /* 差し替え用 */
}
.page-hero .hero-divider{
  height:auto;
  z-index:10;
  pointer-events:none;
  background-repeat:no-repeat;
  display:block;
}
.page-hero-title{
  position:absolute;
  top:50%;left:5%;
  transform:translateY(-50%);
  color:#fff;
  font-size:48px;
  letter-spacing:6px;
  font-weight:900;
  margin:0;
  text-shadow:0 3px 14px rgba(0,0,0,0.55);
  font-family:"じゅん 501",sans-serif;
}

/* ========== 導入文セクション ========== */
.gomiyashiki-intro{
  text-align:center;
  padding:60px 20px 80px;
  background:#fff;
}
.gomiyashiki-intro h2{
  font-size:32px;
  color:var(--brand-blue);
  letter-spacing:3px;
  line-height:1.7;
  margin:0 0 30px;
  font-family:"じゅん 501",sans-serif;
}
.gomiyashiki-intro p{
  font-size:16px;
  line-height:2;
  margin:0 0 16px;
  color:var(--text-body);
  text-align:left;
}
/* 2カラム（テキスト＋画像）の包含行 */
.gomiyashiki-intro-row{
  max-width:1000px;
  margin:0 auto;
}
/* 箇条書きリスト（butsudan-list と同じデザイン） */
.gomiyashiki-list{
  list-style:none;
  padding:0;
  margin:0;
}
.gomiyashiki-list li{
  font-size:16px;
  line-height:2;
  color:var(--brand-blue);
  padding-left:1em;
  text-indent:-1em;
  font-weight:700;
  font-family:"じゅん 501",sans-serif;
  text-align:left;
}
.gomiyashiki-list li::before{
  content:"・";
  color:var(--brand-blue);
}
.gomiyashiki-img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:10px;
  display:block;
}

/* ========== 生前整理が選ばれる理由（画像左／テキスト右） ========== */
.gomiyashiki-merit{
  background:#fff;
  padding:40px 20px 80px;
}
.gomiyashiki-merit h2{
  font-size:28px;
  color:var(--brand-blue);
  letter-spacing:3px;
  text-align:center;
  margin:0 0 40px;
  font-family:"じゅん 501",sans-serif;
  line-height:1.6;
}
.gomiyashiki-merit-row{
  max-width:1000px;
  margin:0 auto;
}
.gomiyashiki-merit p{
  font-size:16px;
  line-height:2;
  margin:0 0 16px;
  color:var(--text-body);
}
.gomiyashiki-merit-list{
  list-style:none;
  padding:0;
  margin:0;
}
.gomiyashiki-merit-list li{
  font-size:16px;
  line-height:2;
  color:var(--brand-blue);
  padding-left:1em;
  text-indent:-1em;
  font-weight:700;
  font-family:"じゅん 501",sans-serif;
}
.gomiyashiki-merit-list li::before{
  content:"・";
  color:var(--brand-blue);
}
.gomiyashiki-merit-img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:10px;
  display:block;
}

/* ========== 作業事例（2列画像ギャラリー） ========== */
.gomiyashiki-works{
  background:#fff;
  padding:40px 20px 80px;
}
.gomiyashiki-works h2{
  font-size:28px;
  color:var(--brand-blue);
  letter-spacing:3px;
  text-align:center;
  margin:0 0 40px;
  font-family:"じゅん 501",sans-serif;
  line-height:1.6;
}
.gomiyashiki-works-grid{
  max-width:1000px;
  margin:0 auto;
}
.gomiyashiki-works-item{
  width:100%;
  aspect-ratio:3/4;
  border-radius:10px;
  overflow:hidden;
  background:#eaf1f4;
}
.gomiyashiki-works-item.landscape{
  aspect-ratio:4/3;
}
.gomiyashiki-works-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* ========== 料金表セクション ========== */
.price-section{
  background:#fff;
  padding:20px 20px 80px;
}
.price-section h2{
  font-size:28px;
  color:var(--brand-blue);
  letter-spacing:3px;
  text-align:center;
  margin:0 0 40px;
  font-family:"じゅん 501",sans-serif;
}
.price-table-wrap{
  max-width:760px;
  margin:0 auto;
}
.price-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  background:#fff;
  border:1px solid #b8d3df;
  border-radius:8px;
  overflow:hidden;
}
.price-table thead th{
  background:#cfe6ee;
  color:var(--text-dark);
  font-weight:700;
  font-size:16px;
  letter-spacing:1px;
  padding:16px 12px;
  text-align:center;
  border-bottom:1px solid #b8d3df;
  font-family:"じゅん 501",sans-serif;
}
.price-table tbody td{
  padding:14px 12px;
  text-align:center;
  font-size:16px;
  color:var(--text-dark);
  border-bottom:1px solid #e0e8eb;
  font-family:"じゅん 501",sans-serif;
}
.price-table tbody tr:last-child td{
  border-bottom:none;
}
.price-table tbody tr:nth-child(even) td{
  background:#f5fafc;
}
.price-table thead th:first-child,
.price-table tbody td:first-child{
  border-right:1px solid #e0e8eb;
}

/* ========== 共通ラッパー：bg07.png パターン背景 ==========
   .qualifications-section と .reasons-section をまとめてラップし、
   bg07.png の青系パターン背景を地続きで見せる
   ============================================================ */
.sha-blue{
  background-image:url("../images/bg07.png");
  background-size:contain;
  background-repeat:repeat;
}

/* ========== 3つの資格セクション ========== */
.qualifications-section{
  background:#eff8fd;
  padding:80px 20px; /* 上下80px：他セクションと同じパディングで上下に余白確保 */
  margin:60px 0 0;   /* 上のみ余白（下は直後の sha-blue と地続きにする） */
}
.qualifications-section h2{
  font-size:28px;
  color:var(--brand-blue);
  letter-spacing:3px;
  text-align:center;
  margin:0 0 16px;
  font-family:"じゅん 501",sans-serif;
  line-height:1.6;
}
.qualifications-section .lead-text{
  font-size:16px;
  color:var(--text-body);
  text-align:center;
  margin:0 0 50px;
}
.qual-card{
  text-align:center;
}
.qual-card-img{
  height:180px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:24px;
}
.qual-card-img img{
  max-width:100%;
  max-height:100%;
  height:auto;
  object-fit:contain;
}
.qual-card h3,
.qualifications-section > .container > h3{
  font-size:22px;
  color:var(--brand-blue);
  letter-spacing:2px;
  text-align:center;
  margin:0 0 16px;
  font-family:"じゅん 501",sans-serif;
  line-height:1.6;
}
.qualifications-section > .container > h3{
  margin:50px 0 0;     /* 上のカード列との余白50px、下は .certs-grid が担当 */
}
.qual-card p{
  font-size:13px;
  line-height:1.9;
  color:var(--text-body);
  text-align:left;
  margin:0;
}

/* 認定証4枚グリッド（qualifications-section 内、h3 の直後） */
.certs-grid{
  max-width:920px;
  margin:30px auto 0;
}
.certs-grid .col{
  display:flex;
  align-items:center;
  justify-content:center;
}
.cert-img{
  max-width:100%;
  height:auto;
  display:block;
}
/* 上2枚（cert01・cert02）は幅を2/3に縮小 */
.certs-grid .col:nth-child(-n+2) .cert-img{
  max-width:66.6667%;
  margin-left:auto;
  margin-right:auto;
}

/* ========== お仏壇供養セクション ========== */
.butsudan-section{
  background:#fff;
  padding:60px 20px 80px;
}
.butsudan-section h2{
  font-size:28px;
  color:var(--brand-blue);
  letter-spacing:3px;
  text-align:center;
  margin:0 0 40px;
  font-family:"じゅん 501",sans-serif;
}
.butsudan-intro{
  max-width:900px;
  margin:0 auto 60px;
}
.butsudan-intro p{
  font-size:16px;
  line-height:1.95;
  color:var(--text-body);
  margin:0 0 16px;
}
.butsudan-list{
  list-style:none;
  padding:0;
  margin:0;
}
.butsudan-list li{
  font-size:16px;
  line-height:2;
  color:var(--brand-blue);
  padding-left:1em;
  text-indent:-1em;
  font-weight:700;
  font-family:"じゅん 501",sans-serif;
}
.butsudan-list li::before{
  content:"・";
  color:var(--brand-blue);
}
.butsudan-img{
  width:100%;
  height:auto;
  border-radius:10px;
  display:block;
}
.butsudan-price-title{
  font-size:22px;
  color:var(--brand-blue);
  letter-spacing:2px;
  text-align:center;
  margin:0 0 30px;
  font-family:"じゅん 501",sans-serif;
}
.butsudan-notes{
  max-width:760px;
  margin:30px auto 0;
}
.butsudan-notes p{
  font-size:14px;
  line-height:1.9;
  color:var(--text-body);
  margin:0 0 12px;
}
.butsudan-notes p:last-child{margin-bottom:0;}
.butsudan-note-free{
  color:var(--brand-blue) !important;
  font-weight:700;
}

/* ========== 火葬式セクション ========== */
.kaso-section{
  background:#eff8fd;            /* 3つの資格セクションと同じ水色 */
  padding:80px 20px;
  margin:60px 0;                 /* 前後セクションとの余白 */
}
.kaso-section h2{
  font-size:28px;
  color:var(--brand-blue);
  letter-spacing:3px;
  text-align:center;
  margin:0 0 40px;
  font-family:"じゅん 501",sans-serif;
  line-height:1.6;
}
.kaso-intro{
  max-width:900px;
  margin:0 auto 60px;
}
.kaso-intro p{
  font-size:16px;
  line-height:1.95;
  color:var(--text-body);
  margin:0 0 16px;
}
.kaso-list{
  list-style:none;
  padding:0;
  margin:0;
}
.kaso-list li{
  font-size:16px;
  line-height:2;
  color:var(--brand-blue);
  padding-left:1em;
  text-indent:-1em;
  font-weight:700;
  font-family:"じゅん 501",sans-serif;
}
.kaso-list li::before{
  content:"・";
  color:var(--brand-blue);
}
.kaso-img{
  width:100%;
  height:auto;
  border-radius:10px;
  display:block;
}
.kaso-price-title{
  font-size:22px;
  color:var(--brand-blue);
  letter-spacing:2px;
  text-align:center;
  margin:0 0 30px;
  font-family:"じゅん 501",sans-serif;
}
.kaso-notes{
  max-width:760px;
  margin:30px auto 0;
}
.kaso-notes p{
  font-size:14px;
  line-height:1.9;
  color:var(--text-body);
  margin:0 0 12px;
}
.kaso-notes p:last-child{margin-bottom:0;}
.kaso-note-free{
  color:var(--brand-blue) !important;
  font-weight:700;
}
/* 火葬式料金表のプラン説明行（2列結合） */
.kaso-section .price-table .plan-desc td{
  background:#f5fafc;
  text-align:left;
  font-size:14px;
  color:var(--text-body);
  line-height:1.8;
  padding:12px 18px;
  font-weight:400;
  border-right:none;
}

/* ========== 画像ループスライダー（gallery-section） ========== */
.gallery-section{
  background:#fff;
  padding:60px 0;
  overflow:hidden;
}
.gallery-slider{
  position:relative;
}
.gallery-viewport{
  overflow:hidden;
}
.gallery-track{
  display:flex;
  gap:clamp(12px, 1.25vw, 20px);
  width:max-content;
  will-change:transform;
}
.gallery-item{
  flex:0 0 auto;
  width:clamp(220px, 22vw, 360px);
  aspect-ratio:4/3;
  border-radius:10px;
  overflow:hidden;
  background:#cfd8dd;
  box-shadow:0 4px 14px rgba(0,0,0,0.08);
}
.gallery-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
@media (max-width: 767.98px){
  .gallery-section{padding:40px 0;}
  .gallery-item{width:60vw;}
}

/* ========== reasons-section をこのページ専用に上書き ==========
   - common.css の bg03.webp（波装飾）と bg07.png（パターン）を解除
   - 背景は親 .sha-blue が担うので透明
   - 元の padding-top:15vw（波の高さ分の余白）も削除
   ============================================================ */
.reasons-section{
  background-image:none;
  background-color:transparent;
  padding-top:0;
}

/* ========== タブレット (≤991.98px) ========== */
@media (max-width: 991.98px){
  .page-hero{height:38vh;min-height:280px;}
  .page-hero-title{font-size:36px;letter-spacing:4px;}
  .gomiyashiki-intro h2{font-size:24px;}
  .price-section h2,
  .qualifications-section h2{font-size:24px;}
}

/* ========== スマホ (≤767.98px) ========== */
@media (max-width: 767.98px){
  .page-hero{height:32vh;min-height:220px;}
  .page-hero-title{font-size:24px;letter-spacing:3px;left:6%;}
  .gomiyashiki-intro{padding:40px 20px 50px;}
  .gomiyashiki-intro h2{font-size:20px;letter-spacing:2px;}
  .gomiyashiki-intro p{font-size:14px;line-height:1.9;}
  .gomiyashiki-list li{font-size:14px;line-height:1.9;}
  /* 生前整理が選ばれる理由 */
  .gomiyashiki-merit{padding:30px 20px 50px;}
  .gomiyashiki-merit h2{font-size:20px;letter-spacing:2px;margin-bottom:30px;}
  .gomiyashiki-merit p{font-size:14px;line-height:1.9;}
  .gomiyashiki-merit-list li{font-size:14px;line-height:1.9;}
  /* 作業事例（2列ギャラリー） */
  .gomiyashiki-works{padding:30px 16px 60px;}
  .gomiyashiki-works h2{font-size:20px;letter-spacing:2px;margin-bottom:30px;}
  .qualifications-section .lead-text{font-size:14px;}
  .price-section{padding:10px 16px 60px;}
  .price-section h2{font-size:22px;}
  .price-table thead th{font-size:14px;padding:12px 8px;}
  .price-table tbody td{font-size:13px;padding:12px 8px;}
  .qualifications-section{padding:50px 16px;margin:40px 0 0;}
  .qualifications-section h2{font-size:20px;}
  .qual-card{margin-bottom:30px;}
  .qual-card-img{height:140px;}
  .qual-card h3{font-size:20px;}
  .certs-grid{margin-top:40px;}
  /* お仏壇供養 */
  .butsudan-section{padding:40px 16px 60px;}
  .butsudan-section h2{font-size:20px;letter-spacing:2px;margin-bottom:30px;}
  .butsudan-intro p,
  .butsudan-list li{font-size:14px;line-height:1.9;}
  .butsudan-price-title{font-size:18px;margin-bottom:24px;}
  .butsudan-notes{margin-top:20px;}
  .butsudan-notes p{font-size:13px;line-height:1.85;}
  /* 火葬式 */
  .kaso-section{padding:50px 16px;margin:40px 0;}
  .kaso-section h2{font-size:20px;letter-spacing:2px;margin-bottom:30px;}
  .kaso-intro p,
  .kaso-list li{font-size:14px;line-height:1.9;}
  .kaso-price-title{font-size:18px;margin-bottom:24px;}
  .kaso-notes{margin-top:20px;}
  .kaso-notes p{font-size:13px;line-height:1.85;}
  .kaso-section .price-table .plan-desc td{font-size:13px;padding:10px 12px;}
}