/* =====================
   Special Feature（特集：防災事業）
===================== */

.sp-section{
    container-type:inline-size;
    width:90%;
    max-width:1600px;
    margin:0 auto;
}

.sp-inner{
    padding:6.0cqw 0 2cqw;   /* 1つ目はvideoとの間隔、３つ目はテキストとの間隔（ここで調整） */
}


/* ---------- 見出し ---------- */

.sp-heading{
    width:46.9cqw;
    margin-left:25.2cqw;
}

.sp-title{
    font-size:4.69cqw;
    line-height:1;
    text-align:center;
    color:#ececeb;
    padding-left:1.7cqw;
    position:relative;   /* ← 追加 */
    top:1.0cqw;          /* ← 追加：大きいほど下がる */
}


.sp-line{
    height:max(2px,0.16cqw);
    background:#c8c8c8;
    margin-top:0.9cqw;
}

.sp-subtitle{
    text-align:center;
    font-size:1.58cqw;
    font-weight:700;
    line-height:1.5;
    margin-top:0.65cqw;
    color:#000;
}

.sp-lead{
    text-align:center;
    padding-left:2.8cqw;
    font-size:1.46cqw;
    line-height:1.82;
    margin-top:0.94cqw;
    color:#000;
    white-space:nowrap;
}


/* ---------- 本体 ---------- */

.sp-main{
    position:relative;
    height:calc(50.8cqw + 6cqw);
    margin-top:0.86cqw;
}

.sp-info{
    display:contents;    /* 中の要素は.sp-mainを基準に配置 */
}

.sp-poster{
    position:absolute;
    top:0;
    left:12cqw;
    width:39.2cqw;
}

.sp-poster img{
    width:100%;
    display:block;
    transition:.3s;
}

.sp-poster:hover img{
    opacity:.85;
}

.zoomable {
  cursor: pointer;
  transition: transform 0.3s ease;
  position: relative; /* 拡大時に他の要素の上に重ねる */
}

.zoomable.is-zoomed {
  transform: scale(1.2); /* 20%拡大 */
  z-index: 10;
}

.sp-logo{
    position:absolute;
    top:3.28cqw;
    left:61.8cqw;
    width:27cqw;
}

.sp-piyo{
    position:absolute;
    top:13.85cqw;
    left:62.5cqw;
    width:7.3cqw;
}

.sp-piyo-name{
    position:absolute;
    top:19.2cqw;
    left:71.1cqw;
    font-size:max(10px,0.75cqw);
    white-space:nowrap;
    color:#000;
}

.sp-catch{
    position:absolute;
    top:23.7cqw;
    left:57cqw;
    font-size:1.5cqw;
    line-height:2.2cqw;
    white-space:nowrap;
    color:#000;
}

.sp-list{
    position:absolute;
    top:25.9cqw;
    left:63.5cqw;
    list-style:none;
    font-size:1.48cqw;
    line-height:2.16cqw;
    white-space:nowrap;
    color:#00080c;
}

.sp-list li::before{
    content:"■";
    margin-right:0.2em;
}

.sp-note{
    position:absolute;
    top:36.7cqw;
    left:56.4cqw;
    font-size:1.48cqw;
    line-height:2.16cqw;
    white-space:nowrap;
    color:#000;
}

.sp-btn{
    position:absolute;
    top:46.04cqw;
    left:64.4cqw;
    width:max(20.7cqw,185px);
    height:max(3.23cqw,75px);
    background:#01628f;
    color:#fff;
    text-decoration:none;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:max(1.5cqw,14px);
    white-space:nowrap;
    transition:.3s;
}

.sp-btn:hover{
    background:#288abb;
}


/* =====================
   スマホ・タブレット（縦積み）
===================== */

@media(max-width:768px){

    .sp-inner{
        padding:10vw 0 8vw;
    }

    .sp-heading{
        width:78.85%;
        margin:0 auto;
    }

    .sp-title{
        font-size:max(36px,4.69cqw);
        padding-left:0;
    }

    .sp-subtitle{
        font-size:max(14px,1.58cqw);
        margin-top:2vw;
    }

    .sp-lead{
        width:78.85%;
        margin:4vw auto 0;
        padding-left:0;
        text-align:left;
        font-size:max(14px,1.46cqw);
        line-height:1.8;
        white-space:normal;
    }

    .sp-lead br{
        display:none;
    }

    .sp-main{
        height:auto;
        margin-top:6vw;
        padding-bottom:10vw;
        display:flex;
        flex-direction:column;
        align-items:center;
    }

    .sp-info{
        display:block;
        width:78.85%;
        margin-top:6vw;
    }

    .sp-poster,
    .sp-logo,
    .sp-piyo,
    .sp-piyo-name,
    .sp-catch,
    .sp-list,
    .sp-note,
    .sp-btn{
        position:static;
    }

    .sp-poster{
        width:78.85%;
    }

    .sp-logo{
        width:60%;
        display:block;
        margin:0 auto;
    }

    .sp-piyo{
        width:18%;
        display:inline-block;
        vertical-align:middle;
        margin-top:3vw;
    }

    .sp-piyo-name{
        display:inline-block;
        vertical-align:middle;
        margin-left:2vw;
    }

    .sp-catch{
        font-size:max(11px,1.5cqw);
        line-height:1.8;
        margin-top:5vw;
        white-space:normal;
    }

    .sp-list{
        font-size:max(11px,1.48cqw);
        line-height:1.8;
        margin:1vw 0 0 6%;
        white-space:normal;
    }

    .sp-note{
        font-size:max(11px,1.48cqw);
        line-height:1.8;
        margin-top:6vw;
        white-space:normal;
    }

    .sp-note br{
        display:none;
    }

    .sp-btn{
        width:clamp(150px,24.74vw,190px);
        height:clamp(42px,6vw,46px);
        font-size:clamp(14px,1.82vw,14px);
        margin:6vw auto 0;
    }
}