/*
--------------------------------------------------------------
 front.css  … トップページ(front-page.php)専用スタイル
--------------------------------------------------------------
 読み込み順: theme-legacy.css -> style.css -> このファイル -> theme-final.css
 ・トップ独自のレイアウト(メインビジュアル/ヒーロー帯/品目リスト/
   実績リスト/買取方法/遺品整理)を定義。
 ・旧デザインのカテゴリカード等は theme-legacy.css に退避済み。
--------------------------------------------------------------
*/

/* ===== メインビジュアル ===== */
main .main-visual{
    display:block;
    position:relative;
    padding:0;
    background:var(--navy-deep);
    overflow:hidden;
}

main .main-visual h1{width:100%;margin:0;}

main .main-visual picture{
    display:block;
    width:100%;
}

main .main-visual-img{
    display:block;
    width:100%;
    height:auto;
    max-height:none;
    object-fit:contain;
}

main .main-visual nav{
    position:absolute;
    right:clamp(18px, 5vw, 72px);
    bottom:clamp(18px, 4vw, 52px);
}

main .main-visual .footer-nav{margin:0;display:flex;gap:10px;}
main .main-visual .footer-nav img{width:48px;height:48px;filter:drop-shadow(0 3px 5px rgba(0,0,0,.4));}

/* ===== ヒーローお問い合わせ帯 ===== */
main .hero-contact{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:28px;
    padding:24px clamp(22px, 6vw, 82px);
    color:#fff;
    background:linear-gradient(135deg, var(--navy-deep), var(--navy));
    border-top:1px solid var(--gold);
}

main .hero-contact-copy{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;text-align:center;}
main .hero-contact strong{font-family:var(--font-serif);color:var(--gold-light);font-size:clamp(18px, 2.2vw, 26px);}
main .hero-contact span{font-size:14px;color:#d9dfef;}
main .hero-contact a{display:inline-flex;align-items:center;gap:8px;color:#fff;font-size:clamp(20px, 2.6vw, 30px);font-weight:700;letter-spacing:.04em;white-space:nowrap;}
main .hero-contact a:hover{color:var(--gold-light);}
main .hero-contact a svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
main .hero-contact p{margin:0;color:#c5cee3;font-size:13px;white-space:nowrap;text-align:center;}

main .main-visual > nav{
    position:static;
    display:flex;
    justify-content:flex-end;
    padding:0 clamp(22px, 6vw, 82px) 22px;
    background:linear-gradient(135deg, var(--navy-deep), var(--navy));
}

/* ===== ファーストビュー CTA(LINE / メール) ===== */
main .main-visual-cta{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
    padding:18px clamp(16px, 4vw, 40px) clamp(18px, 3.5vw, 32px);
    background:linear-gradient(to top, rgba(7,19,49,.82) 0%, rgba(7,19,49,.45) 60%, transparent 100%);
}

main .main-visual-cta-buttons{
    display:flex;
    align-items:stretch;
    justify-content:center;
    gap:14px;
    flex-wrap:wrap;
    width:100%;
    max-width:720px;
}

main .cta-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    flex:1 1 280px;
    max-width:340px;
    min-height:68px;
    padding:10px 22px;
    border-radius:2px;
    font-weight:700;
    line-height:1.4;
    text-decoration:none;
    box-shadow:0 6px 18px rgba(0,0,0,.35);
    transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}

main .cta-btn img{
    width:42px;
    height:42px;
    flex:0 0 auto;
    border-radius:50%;
    background:#fff;
}

main .cta-btn-text{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:2px;
}

main .cta-btn-main{
    font-size:18px;
    letter-spacing:.04em;
    line-height:1.3;
}

main .cta-btn-sub{
    font-size:12px;
    font-weight:400;
    letter-spacing:.03em;
    line-height:1.4;
    opacity:.9;
}

main .cta-btn-line{
    background:#0DC755;
    border:2px solid #0DC755;
    color:#fff;
}

main .cta-btn-line:hover{
    background:#0AB84E;
    border-color:#0AB84E;
    transform:translateY(-2px);
    box-shadow:0 10px 24px rgba(0,0,0,.4);
}

main .cta-btn-contact{
    background:#fff;
    border:2px solid var(--gold);
    color:var(--navy-deep);
}

main .cta-btn-contact .cta-btn-sub{
    color:var(--muted);
}

main .cta-btn-contact:hover{
    background:var(--gold-light);
    transform:translateY(-2px);
    box-shadow:0 10px 24px rgba(0,0,0,.4);
}

/* ===== 品目リスト(画像フルブリード+文字オーバーレイ) ===== */
main .items-section .item-list{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    background: transparent;
    border: 0;
}
main .items-section .item-list > li{
    width: auto;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 2px;
    background: var(--navy-deep);
    box-shadow: none;
}
main .items-section .item-list > li a{
    display: block;
    position: relative;
}
main .items-section .item-list .item-thumb{
    display: block;
    overflow: hidden;
}
main .items-section .item-list .item-thumb img{
    display: block;
    width: 100%;
    height: 190px;
    padding: 0;
    object-fit: cover;
    transition: transform .3s ease;
}
main .items-section .item-list > li p{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 34px 16px 12px;
    background: linear-gradient(to top, rgba(7,19,49,.88) 0%, rgba(7,19,49,.45) 60%, transparent 100%);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.6;
}
main .items-section .item-list > li p::after{
    content: "";
    display: block;
    width: 28px;
    height: 2px;
    margin-top: 6px;
    background: var(--gold);
}
main .items-section .item-list > li a:hover .item-thumb img,
main .items-section .item-list > li a:focus-visible .item-thumb img{
    transform: scale(1.06);
}

/* ===== 実績リスト ===== */
main .works-list{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
main .works-item{width:auto;height:auto;border:1px solid var(--line);border-radius:2px;box-shadow:none;}

/* ===== 買取方法 ===== */
main .methods-list{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start;}
main .methods-list > h2, main .methods-list > div:last-child{grid-column:1 / -1;}
main .methods-list .methods-item{width:auto;min-height:260px;padding:24px;background:var(--paper);}

main .methods-list .methods-item .method-icon{
    display:block;
    width:56px;
    height:56px;
    margin:0 0 18px;
    fill:none;
    stroke:var(--navy);
    stroke-width:1.35;
    stroke-linecap:round;
    stroke-linejoin:round;
}

/* ===== 遺品整理 ===== */
main .organize-section .organize-icon{
    display:block;
    width:84px;
    height:84px;
    flex:0 0 auto;
    fill:none;
    stroke:var(--navy);
    stroke-width:1.2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

/* ===== アクセシビリティ ===== */
.visually-hidden{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0, 0, 0, 0);
    white-space:nowrap;
    border:0;
    color:#100169;
}

/* ===== レスポンシブ ===== */
@media (max-width:700px){
    main .item-list{grid-template-columns:repeat(2, 1fr);}
    main .items-section .item-list{gap:12px;}
    main .items-section .item-list .item-thumb img{height:130px;}
    main .items-section .item-list > li p{padding:26px 12px 10px;font-size:13px;}
    main .works-list, main .methods-list{grid-template-columns:1fr;}
    main .hero-contact{display:flex;padding:24px 20px;text-align:center;}
    main .hero-contact-copy{display:flex;flex-direction:column;align-items:center;gap:4px;}
    main .hero-contact a{margin-top:8px;font-size:26px;}
    main .hero-contact p{margin-top:12px;white-space:normal;}
}