/* ==========================
VOICE PAGE
========================== */

.voice-page{
    background:#FDF8F4;
}

.voice-page section{
    padding:120px 0;
}

/* ==========================
HERO
========================== */

.voice-hero{

    position:relative;

    height:70vh;

    min-height:560px;

    display:flex;

    align-items:center;

    overflow:hidden;
}

.voice-hero-video{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;
}

.voice-hero-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        90deg,
        rgba(0,0,0,.55),
        rgba(0,0,0,.25)
    );
}

.voice-hero-content{

    position:relative;

    z-index:2;

    color:#fff;

    max-width:720px;
}

.voice-hero-en{

    display:block;

    margin-bottom:20px;

    letter-spacing:.35em;

    font-size:13px;

    font-weight:700;
}

.voice-hero h1{

    font-family:'Shippori Mincho',serif;

    font-size:clamp(38px,4vw,55px);

    line-height:1.6;

    margin-bottom:25px;
}

.voice-hero p{

    line-height:2.2;
}


/* ==========================
SP
========================== */

@media(max-width:768px){

    .voice-grid{

        grid-template-columns:1fr;
    }

    .voice-page section{

        padding:80px 0;
    }

    .voice-hero{

        min-height:500px;
    }

    .voice-hero h1{

        font-size:34px;
    }

    .voice-card{

        padding:30px;
    }
}

/* ========================================
SP
======================================== */

.voice-cta{
    background:#FAF7F2;
    padding:0px 20px 60px 20px;
    text-align:center;
}

/* CTAボックス本体 */
.voice-cta .container{
    background:#fff;
    max-width:900px;
    margin:0 auto;
    padding:80px 60px;
    border-radius:40px;
    position:relative;

    box-shadow:
        0 30px 80px rgba(0,0,0,.06);

    overflow:hidden;
}

/* 上品な装飾ライン */
.voice-cta .container::before{
    content:"";
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    width:140px;
    height:3px;
    background:linear-gradient(90deg,#E8B8A0,#D5A28A,#E8B8A0);
    border-radius:50px;
}

/* タイトル */
.voice-cta h2{
    font-family:'Shippori Mincho',serif;
    font-size:clamp(24px,3vw,36px);
    font-weight:500;
    line-height:1.8;
    color:#4A433F;
    margin-bottom:18px;
}

/* 説明文 */
.voice-cta p{
    font-size:15px;
    color:#7A6F67;
    line-height:2;
    margin-bottom:40px;
}

/* ボタン */
.cta-btn{
    display:inline-block;
    padding:18px 52px;
    background:linear-gradient(135deg,#D5A28A,#E8B8A0);
    color:#fff;
    border-radius:999px;
    font-weight:600;
    letter-spacing:.08em;
    text-decoration:none;

    box-shadow:0 18px 45px rgba(213,162,138,.25);
    transition:.4s ease;
}

.cta-btn:hover{
    transform:translateY(-5px);
    box-shadow:0 25px 60px rgba(213,162,138,.35);
}

/* 背景のうっすら装飾（高級感） */
.voice-cta .container::after{
    content:"";
    position:absolute;
    right:-60px;
    bottom:-60px;
    width:180px;
    height:180px;
    background:radial-gradient(circle,rgba(232,184,160,.25),transparent 70%);
    border-radius:50%;
}

/* SP */
@media(max-width:768px){

    .voice-cta .container{
        padding:50px 24px;
        border-radius:28px;
    }

    .cta-btn{
        width:100%;
        max-width:320px;
        padding:16px 0;
    }
}
/* ========================================
VOICE
======================================== */

.voice-section{

    background:#FDF8F4;

}

.voice-grid{

    display:grid;

    grid-template-columns:
    repeat(2,1fr);

    gap:40px;
}

/* card */

.voice-card{

    background:#fff;

    border-radius:32px;

    overflow:hidden;

    box-shadow:
    0 20px 60px rgba(0,0,0,.05);

    transition:.4s;
}

.voice-card:hover{

    transform:translateY(-8px);
}

.voice-images{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:6px;

    padding:6px;
}

.voice-images img{

    width:100%;

    height:260px;

    object-fit:cover;

    border-radius:18px;
}

.voice-content{

    padding:30px;
}

.voice-tag{

    display:inline-block;

    padding:6px 14px;

    background:#F7EEE7;

    border-radius:999px;

    color:#B8846A;

    font-size:12px;

    margin-bottom:15px;
}

.voice-content h3{

    font-family:'Shippori Mincho',serif;

    color:#4A433F;

    font-size:26px;

    margin-bottom:15px;
}

.voice-content p{

    color:#666;

    line-height:2;

    margin-bottom:20px;
}

.voice-keywords{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

    margin-bottom:25px;
}

.voice-keywords span{

    font-size:12px;

    color:#9B7B68;
}

.voice-more{

    border:none;

    background:none;

    color:#B8846A;

    font-weight:600;

    cursor:pointer;

    font-size:14px;

    padding:0;
}

.voice-more:hover{

    opacity:.7;
}

/* ========================================
MODAL
======================================== */

.voice-modal{

    position:fixed;

    inset:0;

    z-index:9999;

    display:none;
}

.voice-modal.active{

    display:block;
}

.voice-modal-overlay{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.6);
}

.voice-modal-content{

    position:absolute;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    width:min(900px,90%);

    max-height:85vh;

    overflow:auto;

    background:#fff;

    padding:50px;

    border-radius:30px;
}

.voice-modal-close{

    position:absolute;

    right:20px;

    top:20px;

    border:none;

    background:none;

    font-size:30px;

    cursor:pointer;
}

.voice-modal-content h3{

    font-family:'Shippori Mincho',serif;

    margin-bottom:25px;
}

.voice-modal-content p{

    line-height:2.4;

    color:#555;
}

/* ========================================
SP
======================================== */

@media(max-width:768px){

    .voice-grid{

        grid-template-columns:1fr;
    }

    .voice-images img{

        height:200px;
    }

    .voice-content{

        padding:25px;
    }

    .voice-modal-content{

        padding:35px 25px;
    }
}