/*=======================
  Gold Plating Page Style
  file: /css/gold.css
=======================*/
/* ────────── 共通 ────────── */
#gold-page .pageInner{max-width:1080px;margin:0 auto;padding:60px 20px;font-family:"Noto Sans JP",sans-serif}
#gold-page h2.mainTtl{font-size:32px;font-weight:700;text-align:center;margin:0 0 40px;position:relative}
#gold-page h2.mainTtl::after{content:"";display:block;width:60px;height:3px;background:#128253;margin:20px auto 0;border-radius:3px}
#gold-page .goldCnt{margin-bottom:80px}

/* ────────── ヒーロー ────────── */
.goldv{position:relative}
.goldv img{width:100%;height:auto;display:block;max-height:400px;object-fit:cover}
.goldv .txtBox{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;color:#fff;text-shadow:0 0 8px rgba(0,0,0,.4)}
.goldv .catch{font-size:56px;font-weight:800;letter-spacing:2px;margin:0;border-bottom:2px solid #fff;padding:0 0 12px 0}
.goldv .lead{font-size:26px;font-weight:500;margin:16px 0 0}
@media (max-width:768px){
  .goldv img{max-height:280px}
  .goldv .catch{font-size:32px;border-width:1px}
  .goldv .lead{font-size:16px;margin-top:10px}
}

/* ────────── メリットリスト ────────── */
.benefit-list{counter-reset:benefit;list-style:none;padding:0;margin:0 auto;max-width:860px;font-size:18px;line-height:1.7}
.benefit-list li{position:relative;padding-left:70px;margin-bottom:18px}
.benefit-list li::before{counter-increment:benefit;content:counters(benefit,decimal-leading-zero);position:absolute;left:0;top:0;width:50px;height:50px;background:#128253;color:#fff;font-weight:700;font-size:20px;line-height:50px;text-align:center;border-radius:50%}
@media (max-width:768px){
  .benefit-list{font-size:16px}
  .benefit-list li{padding-left:60px}
  .benefit-list li::before{width:42px;height:42px;line-height:42px;font-size:18px}
}

/* ────────── 比較テーブル ────────── */
.gold-table-wrapper{overflow-x:auto}
.gold-table{width:100%;border-collapse:collapse;font-size:15px}
.gold-table th,.gold-table td{border:1px solid #d5d5d5;padding:12px 10px;text-align:center}
.gold-table thead{background:#f8f8f8;font-weight:700}
.gold-table tbody tr:nth-child(even){background:#fafafa}

/* ────────── ベネフィットリスト ────────── */
.gold-benefits-list{margin:0 auto;max-width:720px;font-size:18px;list-style:none;padding:0}
.gold-benefits-list li{position:relative;padding-left:70px;margin-bottom:18px;line-height:1.6}
.gold-benefits-list li span{position:absolute;left:0;top:0;width:50px;height:50px;line-height:50px;text-align:center;background:#128253;color:#fff;font-size:20px;font-family:'Ubuntu',sans-serif;border-radius:50%}
@media (max-width:768px){
  .gold-benefits-list{font-size:16px}
  .gold-benefits-list li{padding-left:60px}
  .gold-benefits-list li span{width:42px;height:42px;line-height:42px;font-size:18px}
}

/* ────────── プロセス ────────── */
.process-list{list-style:decimal inside;font-size:16px;max-width:780px;margin:0 auto 20px;padding-left:0;line-height:1.8}
.note{font-size:14px;color:#666;text-align:center}

/* ────────── FAQ アコーディオン ────────── */
.faq-accordion {
    max-width: 780px;
    margin: 0 auto;
}

.faq-item {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    margin-bottom: 15px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.faq-question {
    background: #f8f8f8;
    padding: 16px 20px;
    position: relative;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.3s;
}

.faq-question:hover {
    background: #edf8f3;
}

.faq-question .q {
    margin: 0;
    font-weight: 700;
    font-size: 16px;
    color: #333;
}

.accordion-icon {
    position: relative;
    width: 20px;
    height: 20px;
}

.accordion-icon:before,
.accordion-icon:after {
    content: '';
    position: absolute;
    background-color: #128253;
    transition: transform 0.3s ease;
}

.accordion-icon:before {
    top: 9px;
    left: 0;
    width: 100%;
    height: 2px;
}

.accordion-icon:after {
    top: 0;
    left: 9px;
    width: 2px;
    height: 100%;
}

.faq-item.active .accordion-icon:after {
    transform: rotate(90deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: #fff;
}

.faq-item.active .faq-answer {
    max-height: 300px;
    transition: max-height 0.5s ease;
}

.faq-answer .a {
    padding: 16px 20px;
    margin: 0;
    color: #444;
    font-size: 15px;
    line-height: 1.6;
}

@media (max-width:768px) {
    .faq-question .q {
        font-size: 15px;
        padding-right: 15px;
    }
    
    .faq-answer .a {
        font-size: 14px;
        padding: 12px 16px;
    }
}

/* ────────── アロイ記事 ────────── */
.alloy{max-width:780px;margin:0 auto 40px;font-size:16px;line-height:1.8}
.alloy h3{font-size:22px;font-weight:700;margin:0 0 10px;color:#128253;border-left:6px solid #128253;padding-left:10px}
@media (max-width:768px){
  #gold-page h2.mainTtl{font-size:26px}
  .alloy h3{font-size:20px}
}

/* ────────── スムーススクロール (anchor) ────────── */
html{scroll-behavior:smooth}