@charset "UTF-8";

/* =========================================================
   index.css - トップページ専用スタイル
   ========================================================= */

/* ===== ファーストビュー（仮スタイル・後で作り込み） ===== */
.fv {
    /* 下部の訴求カード帯の高さ。768px以上ではこの分だけ .fv に
       padding-bottom を入れ、中央寄せのキャッチコピーを上に逃がして
       帯との重なりを防ぐ。ベース（〜767px）はパディングを入れない。 */
    --fv-marquee-height: 112px;

    position: relative;
    height: var(--fv-height, 100svh);
    min-height: 667px;
    max-height: 720px;
    overflow: hidden;
    display: flex;
    align-items: center;
    /* 背景は body の共通背景（水滴＋水色グラ）に任せるため、ここでは持たない */
    text-align: center;
}

/* FV左上ロゴ */
.fv__logo {
    position: absolute;
    top: 1.25rem;
    left: 1.25rem;
    z-index: 2;
    display: inline-block;
}

.fv__logo-img {
    display: block;
    width: auto;
    height: 3rem;
}

@media (min-width: 768px) {

    /* ハンバーガー（top:1.5rem / height:52px）と上下の位置を揃える。
       ロゴ画像も 52px なので、top を合わせれば上端・下端とも一致する。 */
    .fv__logo {
        top: 1.5rem;
        left: 2rem;
    }

    .fv__logo-img {
        height: 3.5rem;
    }
}

/* 左上の蛇口装飾
   横：左端寄せ。画面左半分に収めつつ、320pxで頭打ち。
   縦：FVの上から30%の位置に画像の中心を置く。
   FV内で最背面（背景グラデーションのすぐ上）に置く。 */
.fv__deco {
    display: none;
    /* いったん非表示 */
    position: absolute;
    top: 30%;
    left: 0;
    transform: translateY(-50%);
    z-index: 0;
    width: 35%;
    max-width: 320px;
    height: auto;
    opacity: 0.9;
    pointer-events: none;
}

/* キャッチコピー画像は蛇口イラストより前面に。
   幅は画像側で決めるため、ここでは max-width を設けない。 */
.fv__inner {
    position: relative;
    z-index: 1;
    width: 100%;
}

/* キャッチコピー画像（h1の中身）。文字もイラストもすべて画像に含まれる。 */
.fv__title {
    margin: 0;
    line-height: 0;
}

.fv__catch-img {
    display: block;
    width: 90%;
    max-width: 960px;
    height: auto;
    margin-inline: auto;
}

/* FV高さ：画面幅に応じて上限を段階的に引き上げ */

/* 475px未満（小さい端末）：全体を低くする。
   ※ max-height だけ下げても min-height(667px) が優先されて効かないため、
     min-height も一緒に下げる。 */
@media (max-width: 474px) {
    .fv {
        min-height: 520px;
        max-height: 560px;
    }
}

@media (min-width: 576px) {
    .fv {
        max-height: 813px;
    }
}

@media (min-width: 768px) {
    .fv {
        --fv-marquee-height: 124px;
        min-height: 812px;
        max-height: 900px;
        padding-bottom: var(--fv-marquee-height);
    }
}

@media (min-width: 1024px) {
    .fv {
        max-height: 1080px;
    }
}

/* =========================================================
   FV下部の訴求カードマーキー（自動横流れ）
   同じ列を2セット並べ、-50%平行移動を無限ループ
   （会社概要の .char-marquee と同方式。あちらは画像、こちらはテキストカード）
   ベース：下から 2rem 浮かせる。768以上：下端にぴったり。
   ========================================================= */
.fv-marquee {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
    width: 100%;
    margin-bottom: 2rem;
    padding-block: 1rem;
    overflow: hidden;
}

@media (min-width: 768px) {
    .fv-marquee {
        margin-bottom: 0;
    }
}

.fv-marquee__track {
    display: flex;
    align-items: center;
    width: max-content;
    gap: 0.75rem;
    animation: fvMarquee 30s linear infinite;
}

@media (min-width: 768px) {
    .fv-marquee__track {
        gap: 1rem;
    }
}

/* 角丸長方形のカード（水色背景の上に白で抜く）
   左にイラスト、右にテキストの横並び。
   ベースは帯を控えめにし、768以上で元の大きさに戻す。 */
.fv-marquee__card {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    /* 左はイラストが余白を持つ前提で控えめにする */
    padding: 0.45rem 1rem 0.45rem 0.55rem;
    background-color: var(--color-white);
    border: 2px solid var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

@media (min-width: 768px) {
    .fv-marquee__card {
        gap: 0.75rem;
        padding: 0.6rem 1.6rem 0.6rem 0.85rem;
    }
}

/* 左のイラスト（高さ基準で揃え、横幅は画像の比率に任せる） */
.fv-marquee__illust {
    flex-shrink: 0;
    display: block;
    width: auto;
    height: 2.5rem;
    object-fit: contain;
}

@media (min-width: 768px) {
    .fv-marquee__illust {
        height: 4.25rem;
    }
}

/* 画像が見つからない場合のプレースホルダー。
   ※ 本番イラストと高さを揃え、差し替えても帯の高さが変わらないようにする。 */
.fv-marquee__illust--placeholder {
    display: grid;
    place-items: center;
    width: 2.5rem;
    color: var(--color-secondary);
    background-color: var(--color-bg-light);
    border: 1.5px dashed var(--color-secondary);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
}

@media (min-width: 768px) {
    .fv-marquee__illust--placeholder {
        width: 4.25rem;
        font-size: 1.2rem;
    }
}

.fv-marquee__text {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.02em;
    white-space: nowrap;
    color: var(--color-primary);
}

@media (min-width: 768px) {
    .fv-marquee__text {
        font-size: 1.3rem;
    }
}

@keyframes fvMarquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* アニメーションを控えたいユーザーへの配慮
   ※ char-marquee のように flex-wrap で折り返すと、高さ固定の帯からはみ出すため
     ここでは停止のみ（先頭のカードが並んだ状態で止まる）。 */
@media (prefers-reduced-motion: reduce) {
    .fv-marquee__track {
        animation: none;
    }
}

/* =========================================================
   セクション見出し（コピー型）
   ページ名ではなく、問いかけ・語りかけのコピー見出し
   ========================================================= */
.section-title--copy .section-title__ja {
    font-size: 1.35rem;
    line-height: 1.5;
    color: var(--color-primary-dark);
}

@media (min-width: 768px) {
    .section-title--copy .section-title__ja {
        font-size: 1.7rem;
    }
}

/* 見出し左にイラストを横並び */
.section-title--icon {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.section-title__icon {
    flex-shrink: 0;
    width: 56px;
    height: auto;
}

/* =========================================================
   ABOUT (会社概要 誘導)
   ========================================================= */

.home-about {
    /* 背景は body の共通背景に任せる（旧：白→クリームのグラデーション） */
}

/* 会社概要の見出し（一体型画像）は左寄せ */
.home-about .section-title {
    text-align: left;
    margin-bottom: 2rem;
}

@media (min-width: 576px) {
    .home-about .section-title {
        margin-bottom: 2.5rem;
    }
}

@media (min-width: 768px) {
    .home-about .section-title {
        margin-bottom: 3rem;
    }
}

.home-about .section-title__heading-img {
    margin-inline: 0;
}

.home-about__inner {
    max-width: var(--section-width-lg);
}

/* 本文＋ボタンの左カラムと、円形回転バッジの右カラム。
   ベースは縦並び、576以上で横並び。 */
.home-about__body {
    margin-bottom: 2.5rem;
}

@media (min-width: 576px) {
    .home-about__body {
        display: flex;
        align-items: flex-start;
        gap: 2.5rem;
    }

    /* 本文の最大幅をカラム側で持つことで、
       右寄せしたボタンの右端が本文の右端と揃う。
       ※ max-width で伸長が止まるため、左寄せを auto で固定する。 */
    .home-about__text-col {
        flex: 1 1 0;
        min-width: 0;
        max-width: var(--section-width-sm-plus);
        margin-inline-end: auto;
    }
}

.home-about__text {
    /* body の継承（--body-font-size-sp / -pc）を上書きし、
       1.15rem 〜 1.2rem の間で画面幅に応じて可変させる。
       ※ 2vw は既存の --body-font-size-pc と同じ係数。
         〜767px では下限（1.15rem）に張り付き、
         960px あたりで上限（1.2rem）に到達する。 */
    font-size: clamp(1.15rem, 2vw, 1.2rem);
    text-align: left;
    color: var(--color-text);
}

/* 本文中のキーワード（宮崎市上下水道指定店）。
   水色背景に直置きなので白に上書きし、波線も同色に揃える。 */
.home-about__text .keyword {
    color: var(--color-white);
    text-decoration-color: var(--color-white);
}

/* =========================================================
   エンブレム（emblem.png）
   ベース：本文カラム内に float で右上配置
   576以上：右カラムとして横並び
   ========================================================= */
.home-about__badge {
    display: block;
    width: 180px;
    height: auto;
    margin-top: var(--spacing-lg);
    margin-inline: auto;
    opacity: 0.9;
    pointer-events: none;
}

@media (min-width: 576px) {
    .home-about__badge {
        flex: 0 0 auto;
        width: 30%;
        max-width: 220px;
        margin-top: 0;
        margin-inline: 0;
    }
}

/* --- エンブレムの2箇所分け制御 ---
   ・--float ：本文カラム内に float で右上配置。ベース（〜575px）でのみ表示。
   ・--body  ：本文の右カラム（flex）として並ぶ。576px以上でのみ表示。 */

/* 本文カラム内 float：ベースで右上に float し、本文を回り込ませる。 */
.home-about__badge--float {
    float: right;
    width: 92px;
    margin: 0 0 0.25rem 0.5rem;
}

@media (min-width: 576px) {
    .home-about__badge--float {
        display: none;
    }
}

/* 本文内エンブレム（右カラム）：ベースでは非表示（float側に譲る） */
.home-about__badge--body {
    display: none;
}

@media (min-width: 576px) {
    .home-about__badge--body {
        display: block;
    }
}

/* ボタン：ベースは中央、576以上は右寄せ。 */
.home-about__more {
    margin-top: var(--spacing-md);
    text-align: center;
}

@media (min-width: 576px) {
    .home-about__more {
        text-align: right;
    }
}

/* =========================================================
   会社概要下部の横長画像
   ※ 旧キャラクターマーキー帯（.char-marquee）を廃止して差し替えた。
     JS側の is-waiting（画像ロード待ち）処理も不要になっている。
   ========================================================= */
/* ベース（〜767px）：左右の余白を持たず、
   親（.section）の padding-inline をネガティブマージンで打ち消す。
   ※ .section の値：〜575px: 1.25rem / 576〜767px: 2rem
     ここを変えるなら .section 側と必ず揃える。
   ※ 768px以上はネガティブマージンを解除し、
     最大幅（--section-width-lg）で頭打ち・中央寄せに戻す。 */
.home-about__band {
    width: auto;
    margin-top: var(--spacing-lg);
    margin-inline: -1.25rem;
}

@media (min-width: 576px) {
    .home-about__band {
        margin-inline: -2rem;
    }
}

@media (min-width: 768px) {
    .home-about__band {
        width: 100%;
        max-width: var(--section-width-lg);
        margin-inline: auto;
    }
}

.home-about__band-img {
    display: block;
    width: 100%;
    height: auto;
}

/* 画像未設置の間だけ出るプレースホルダー。
   assets/images/about-band.webp を置けば PHP側の分岐で自動的に消える。
   ※ 横長画像の想定比率が未定なので、仮で 4:1 の箱を置いている。 */
.home-about__band-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    aspect-ratio: 4 / 1;
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-secondary);
    background-color: color-mix(in srgb, var(--color-white) 55%, transparent);
    border: 2px dashed var(--color-secondary);
    border-radius: var(--radius-md);
}

.home-about__band-placeholder i {
    font-size: 1.5rem;
}

@media (min-width: 768px) {
    .home-about__band-placeholder {
        font-size: 1rem;
    }

    .home-about__band-placeholder i {
        font-size: 2rem;
    }
}

/* =========================================================
   SERVICE (事業内容 誘導)
   波マスク画像をジグザグに配置
   ========================================================= */

.home-service {
    /* イラストを写真に対してどれだけ小さく見せるか（576px以上で適用）。
       1 ＝ 写真と同じ高さまで / 0.7 ＝ 一回り小さい */
    --illust-scale: 0.7;

    position: relative;
    /* 背景は body の共通背景に任せる */
}

.home-service__inner {
    max-width: var(--section-width-lg);
}

/* 事業内容の見出し（一体型画像）は右寄せ */
.home-service .section-title {
    margin-bottom: 2rem;
}

@media (min-width: 576px) {
    .home-service .section-title {
        margin-bottom: 2.5rem;
    }
}

@media (min-width: 768px) {
    .home-service .section-title {
        margin-bottom: 3rem;
    }
}

.home-service .section-title__heading-img {
    margin-inline: auto 0;
}

/* clip-path定義用SVG（非表示） */
.home-service__defs {
    position: absolute;
    width: 0;
    height: 0;
}

.home-service__list {
    /* 各itemの番号バッジ用カウンター（1始まり） */
    counter-reset: service-num;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    margin-bottom: var(--spacing-lg);
}

.home-service__item {
    /* 各itemごとに番号を1つ進める */
    counter-increment: service-num;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 340px;
    /* 写真下端に半分はみ出すカプセル（.home-service__name）の
       下半分を受ける余白。次の項目やイラストと重ならないようにする。 */
    padding-bottom: 1.5rem;
}

/* カード全体のリンク
   ※ link 自身に transform / z-index をかけると重ね合わせコンテキストが生まれ、
     写真（thumb）も一緒にイラストより前面に上がってしまう。
     そのため link は z-index:auto のままにし、
     持ち上がり（translateY）は thumb / name に個別にかける。 */
.home-service__link {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
}

/* 写真・番号バッジを持ち上げる（link 自体は動かさない）。
   カプセル（name）は基準の transform が translate(-50%,50%) で異なるため、
   このまとめルールに含めるとズレ量が上書きされて飛ぶので、name は別途指定する。 */
.home-service__link:hover .home-service__thumb,
.home-service__link:hover::before {
    transform: translateY(-4px);
}

/* カプセル：基準の translate(-50%,50%) を保ったまま 4px 持ち上げ、同時に青塗りに反転 */
.home-service__link:hover .home-service__name {
    transform: translate(-50%, calc(50% - 4px));
    color: var(--color-white);
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

/* サービス隣のイラスト（画像の反対側に配置）
   ベース（〜575px）：リンクを基準に絶対配置し、画像の下隅から少し外に飛び出す。
   liはイラスト分の高さを食わない（absoluteでフロー外）。
   左にイラストの回（odd）=左下、右にイラストの回（even）=右下。 */
.home-service__illust {
    position: absolute;
    bottom: 0;
    z-index: 2;
    width: 104px;
    max-width: 40%;
    pointer-events: none;
}

/* odd（画像右寄せ）：イラストは左下、角から少し外に飛び出す */
.home-service__item:nth-child(odd) .home-service__illust {
    left: 0;
    transform: translate(-25%, 25%);
}

/* even（画像左寄せ）：イラストは右下、角から少し外に飛び出す */
.home-service__item:nth-child(even) .home-service__illust {
    right: 0;
    transform: translate(25%, 25%);
}

/* イラスト背面の雲形装飾（写真と同じ #waveMask を薄い水色で敷く）
   イラスト画像の背後に置くため z-index:0。
   ※ ベース（〜575px）の .home-service__illust は position:absolute なので
     この疑似要素の基準になる。576px以上は下で position:relative にして基準化する。 */
.home-service__illust::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 0;
    width: 96%;
    aspect-ratio: 4 / 3;
    transform: translate(-50%, -50%);
    background-color: color-mix(in srgb, var(--color-primary-light) 45%, white);
    -webkit-clip-path: url(#waveMask);
    clip-path: url(#waveMask);
    opacity: 0.8;
    pointer-events: none;
}

.home-service__illust-img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
}

/* SP：左右に控えめにズラす（互い違い・右左右左） */
.home-service__item:nth-child(odd) {
    align-self: flex-end;
}

.home-service__item:nth-child(even) {
    align-self: flex-start;
}

/* 576以上：item内を横並びにし、写真6：イラスト4の比率で配置。
   画像はodd=右寄せなのでイラストは左、even=左寄せなのでイラストは右。 */
@media (min-width: 576px) {
    .home-service__item {
        max-width: none;
        flex-direction: row;
        align-items: stretch;
        gap: 1.5rem;
    }

    /* 写真6 ： イラスト4 の比率 */
    .home-service__link {
        flex: 6 1 0;
        width: auto;
        max-width: none;
        /* stretchで引き伸ばさず写真の高さに揃える。
           こうしないとリンク下端（カプセル位置）が写真下端より下にずれる。 */
        align-self: center;
    }

    .home-service__illust {
        flex: 4 1 0;
        width: auto;
        /* イラストは写真より大きくならないよう、幅の上限を固定する。
           （flex 6:4 だけだと、写真が max-width で頭打ちになった分
             イラスト側だけが広がってしまうため。） */
        max-width: 400px;
        min-height: 0;
        margin-top: 0;
        /* ベースの飛び出し（transform）を解除し、高さはlinkに合わせる。
           背面の雲形疑似要素の基準にするため position:relative。 */
        position: relative;
        transform: none;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* イラスト画像はlinkの高さに収める（縦基準・contain）。
       --illust-scale 分だけ写真より一回り小さく見せる。 */
    .home-service__illust-img {
        width: auto;
        max-width: calc(100% * var(--illust-scale));
        max-height: calc(100% * var(--illust-scale));
        height: auto;
        object-fit: contain;
    }

    /* ベースのodd/even別の飛び出しを打ち消す */
    .home-service__item:nth-child(odd) .home-service__illust,
    .home-service__item:nth-child(even) .home-service__illust {
        transform: none;
    }

    /* odd（画像右）：イラストを左に（row-reverseでイラストが先頭） */
    .home-service__item:nth-child(odd) {
        flex-direction: row-reverse;
    }

    /* even（画像左）：イラストを右に（通常row） */
    .home-service__item:nth-child(even) {
        flex-direction: row;
    }
}

/* サムネイル（波マスク） */
.home-service__thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    /* 画像未登録時のプレースホルダー（水色グラデ） */
    background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-sky-pale) 100%);
    -webkit-clip-path: url(#waveMask);
    clip-path: url(#waveMask);
    transition: transform var(--transition);
}

/* 写真左上の番号バッジ（水色の丸・白文字の単数字）
   ※ .home-service__thumb は波マスク(clip-path)で四隅がえぐれるため、
     バッジはマスクの外側に置く必要がある。
     そこで clip されない親 .home-service__link を基準に絶対配置し、
     写真左上より少し内側（波の谷を避ける位置）に重ねる。 */
.home-service__link::before {
    content: counter(service-num);
    position: absolute;
    top: 6%;
    left: 4%;
    z-index: 4;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    font-family: var(--font-en);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
    color: var(--color-white);
    background-color: var(--color-primary);
    border: 3px solid var(--color-cream-white);
    border-radius: 50%;
    box-shadow: var(--shadow-sm);
    pointer-events: none;
    transition: transform var(--transition);
}

@media (min-width: 768px) {
    .home-service__link::before {
        top: 8%;
        left: 6%;
        width: 2.75rem;
        height: 2.75rem;
        font-size: 1.4rem;
    }
}

/* サムネイルの縁取り（クリーム白）。
   clip-path は形を切るだけで輪郭線を描けず、border を付けても
   クリップされて消える。そこで同じ #waveMask を一回り大きく
   描いて背面に敷き、はみ出した分を縁に見せる。
   ※ .home-service__thumb 自身に clip-path が掛かるため、その子に置くと
     外側が切り取られて見えない。クリップされない親（link）に置く。
   ※ ::before は番号バッジで使用済みのため ::after を使う。
   線の太さは --thumb-outline で調整する。 */
.home-service__link::after {
    content: "";
    --thumb-outline: 5px;

    position: absolute;
    top: -3px;
    left: calc(var(--thumb-outline) * -1);
    z-index: -1;
    width: calc(100% + var(--thumb-outline) * 2);
    aspect-ratio: 4 / 3;
    background-color: var(--color-cream-white);
    -webkit-clip-path: url(#waveMask);
    clip-path: url(#waveMask);
    pointer-events: none;
    transition: transform var(--transition);
}

/* 写真と一緒に持ち上げる（縁が取り残されないように） */
.home-service__link:hover::after {
    transform: translateY(-4px);
}

.home-service__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-service__name {
    /* 写真の下端中央に半分はみ出して重ねる。
       基準は .home-service__thumb（position:relative）。
       ※ link は z-index:auto なので重ね合わせコンテキストを作らず、
         この z-index がイラスト（z-index:2）と直接比較される。 */
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 50%);
    z-index: 3;

    /* 白背景・青緑枠・青緑テキストのカプセル型（文字と枠は同色） */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    padding: 0.5rem 1.4rem;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.4;
    color: var(--color-primary);
    background-color: var(--color-white);
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-pill);
    text-align: center;
    transition: color var(--transition), background-color var(--transition), border-color var(--transition), transform var(--transition);
}

/* 768以上：ペア（画像＋イラスト）ごとに左右交互＋縦に段違いでジグザグ */
@media (min-width: 768px) {
    .home-service__list {
        gap: 0;
    }

    /* 横並びペアを潰さないよう幅制限を解除 */
    .home-service__item {
        max-width: none;
    }

    /* ペア内の画像側は少し大きく */
    .home-service__link {
        max-width: 420px;
    }

    .home-service__item:nth-child(odd) {
        align-self: flex-end;
    }

    .home-service__item:nth-child(even) {
        align-self: flex-start;
    }

    .home-service__name {
        font-size: 1.15rem;
        border-width: 3px;
    }
}

/* 1024以上：ズラし幅をもう少し大きく */
@media (min-width: 1024px) {
    .home-service__link {
        max-width: 460px;
    }
}

.home-service__more {
    text-align: center;
}

/* =========================================================
   WORKS (施工実績)
   ========================================================= */

/* レイアウト：ベースは縦積み、1024以上で inner左・タイトル右 の横並び */
.home-works__layout {
    max-width: var(--section-width-lg);
}

@media (min-width: 1024px) {
    .home-works__layout {
        display: flex;
        align-items: flex-start;
        gap: 2.5rem;
        max-width: var(--section-width-lg);
    }
}

.home-works__inner {
    width: 100%;
}

@media (min-width: 1024px) {
    .home-works__inner {
        order: 1;
        /* カード側を左へ */
        flex: 1 1 0;
        min-width: 0;
    }
}

/* 施工実績の見出し
   ベース：works-head-h.png（横長）/ 768以上：works-head-v.png（縦長・右側） */
.home-works {
    /* 背景は body の共通背景に任せる */

    /* 縦長タイトル画像の高さ。事例なしボックスの最低高と共有する */
    --works-title-v-height: 320px;
}

/* タイトル（クリーム背景・角丸）
   ベースは fit-content で画像幅に合わせ、中央寄せ。
   ※ 飾り枠（frame.svg）を重ねるため position:relative。
     枠は .home-works__title / .news__title 共通定義（下方）を参照。 */
.home-works__title {
    position: relative;
    width: fit-content;
    margin-inline: auto;
    margin-bottom: var(--spacing-md);
    padding: 1.25rem;
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
}

@media (min-width: 1024px) {
    .home-works__title {
        order: 2;
        /* タイトルを右へ */
        flex: 0 0 auto;
        margin-bottom: 0;
    }
}

.home-works__title-img-h {
    display: block;
    width: 100%;
    height: auto;
    max-width: 212px;
    margin-inline: auto;
}

@media (min-width: 576px) {
    .home-works__title-img-h {
        max-width: 240px;
    }
}

.home-works__title-img-v {
    display: none;
}

@media (min-width: 1024px) {
    .home-works__title-img-h {
        display: none;
    }

    .home-works__title-img-v {
        display: block;
        width: auto;
        height: auto;
        max-height: var(--works-title-v-height);
    }
}

/* 件数表示：768以上はカードが左カラムなので左寄せ。
   補足行（最新〇件表示中）も改行せず、件数の右に並べる。 */
.home-works__count {
    margin-bottom: 1.5rem;
    font-size: 1rem;
    line-height: 1;
}

/* 数字は白（水色背景に直置きのため）。
   ※ 共通の .list-count__num は一覧ページと共用なので
     home-works 配下に限定して上書きする。 */
.home-works__count .list-count__num {
    color: var(--color-teal-deep);
    font-size: 1.3rem;
}

/* ベース（改行表示）は line-height:1 だと詰まるので上に余白を入れる */
.home-works__count .list-count__note {
    margin-top: 0.5rem;
}

@media (min-width: 768px) {
    .home-works__count {
        text-align: left;
    }

    .home-works__count .list-count__note {
        display: inline;
        margin-top: 0;
    }
}

/* カードグリッド
   768以上はタイトルと横並びになり列幅が狭まるため、常に最大2列とする */
.home-works__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: var(--spacing-md);
}

@media (min-width: 576px) {
    .home-works__list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    .home-works__list {
        gap: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .home-works__list {
        gap: 2rem;
    }
}

/* ボタン：ベース中央、768以上はタイトルが右なので左寄せ。
   背面スタッフ画像がボタン上に伸びるため、上に余白を確保する。 */
.home-works__more {
    margin-top: 8rem;
    text-align: center;
}

/* 背面スタッフ画像はボタン中央から左に10pxずらす */
.home-works__more .illust-btn-stack__bg {
    transform: translateX(calc(-50% - 10px));
}

@media (min-width: 768px) {
    .home-works__more {
        text-align: left;
    }
}

/* 施工事例なしのボックス（親幅いっぱい）
   ※ 枠線・背景は .works-empty-framed（common.cssの8パーツフレーム）側で持つので
     ここではレイアウト（幅・余白・768以上の最低高）だけを持つ。 */
.home-works__empty {
    text-align: left;
    width: 100%;
    padding: var(--spacing-lg) 1.5rem;
    margin-bottom: var(--spacing-md);
}

@media (min-width: 576px) {
    .home-works__empty {
        text-align: center;
    }
}

/* 1024以上：右の縦長タイトル画像に高さ負けしないよう最低高を確保
   （縦書きタイトルが出るのは1024以上なので、それに合わせる） */
@media (min-width: 1024px) {
    .home-works__empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: var(--works-title-v-height);
    }
}

.home-works__empty-icon {
    color: var(--color-primary);
    margin-right: 0.5rem;
}

.home-works__empty-msg {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--color-title);
    margin-bottom: 0.5rem;
}

.home-works__empty-sub {
    font-size: 0.95rem;
    color: var(--color-text-light);
}

/* =========================================================
   FAQ (よくある質問 誘導)
   質問カード＋「A.回答を見る」で開くアコーディオン
   ========================================================= */

.home-faq {
    position: relative;
    /* 背景は body の共通背景に任せる（旧：--color-bg-cream） */
}

/* 背景のはてなマーク（白・ランダムにリピート）
   ※ 全ページ共通の水滴パターン（body）と二重になるため無効化。
     復活させる場合は下のコメントを外す。
   ------------------------------------------------------------------
.home-faq::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='%23ffffff'%3E%3Ctext x='26' y='55' font-family='sans-serif' font-size='55' font-weight='900' transform='rotate(-14 26 55)'%3E%3F%3C/text%3E%3Ctext x='150' y='40' font-family='sans-serif' font-size='36' font-weight='900' transform='rotate(18 150 40)'%3E%3F%3C/text%3E%3Ctext x='94' y='131' font-family='sans-serif' font-size='43' font-weight='900' transform='rotate(8 94 131)'%3E%3F%3C/text%3E%3Ctext x='194' y='162' font-family='sans-serif' font-size='50' font-weight='900' transform='rotate(-22 194 162)'%3E%3F%3C/text%3E%3Ctext x='36' y='209' font-family='sans-serif' font-size='38' font-weight='900' transform='rotate(12 36 209)'%3E%3F%3C/text%3E%3C/g%3E%3C/svg%3E");
    background-size: 240px 240px;
    background-repeat: repeat;
    opacity: 0.75;
}
   ------------------------------------------------------------------ */

/* 中身は背景より前面に（はてな背景復活時に必要なため残す） */
.home-faq__inner {
    position: relative;
    z-index: 1;
    max-width: var(--section-width-sm);
}

/* FAQの見出し（一体型画像）は中央寄せ */
.home-faq .section-title {
    margin-bottom: 2rem;
}

@media (min-width: 576px) {
    .home-faq .section-title {
        margin-bottom: 2.5rem;
    }
}

@media (min-width: 768px) {
    .home-faq .section-title {
        margin-bottom: 3rem;
    }
}

.home-faq .section-title__heading-img {
    margin-inline: auto;
}

@media (min-width: 768px) {
    .home-faq__inner {
        max-width: var(--section-width-sm-plus);
    }
}

@media (min-width: 1024px) {
    .home-faq__inner {
        max-width: var(--section-width-lg);
    }
}

.home-faq__intro {
    /* サイズは .home-about__text と揃える（変更時は両方を揃える）。 */
    font-size: clamp(1.15rem, 2vw, 1.2rem);
    max-width: var(--section-width-sm-plus);
    margin-inline: auto;
    margin-bottom: var(--spacing-md);
    text-align: left;
    color: var(--color-text);
}

@media (min-width: 576px) {
    .home-faq__intro {
        text-align: center;
    }
}

/* intro内のリンク（よくある質問一覧）は .keyword クラスで装飾。
   水色背景に直置きなので、ここだけ白に上書きし、波線も同色に揃える。 */
.home-faq__intro a.keyword {
    color: var(--color-white);
    text-decoration-color: var(--color-white);
}

/* ホバー時のみ色変化を上乗せする。 */
.home-faq__intro a:hover {
    color: var(--color-sky-pale);
    text-decoration-color: var(--color-sky-pale);
}

.home-faq__more {
    text-align: center;
}

/* 質問カードグリッド（ベースは1列、1024以上で2列）
   ※ 非展開時は隣り合うカードを高い方に揃える（グリッド既定の stretch）。
     どれかのカードが開いたら JS が .has-open を付与し、
     その行だけ揃えを解除（align-items:start）してカードを各自の高さに戻す。 */
.faq-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: var(--spacing-lg);
}

/* 開いているカードがある間は高さ揃えを解除（各カードは中身なりの高さ）。 */
.faq-cards.has-open {
    align-items: start;
}

@media (min-width: 1024px) {
    .faq-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }
}

/* 質問カード
   飾り枠（frame.svg）を border-image の9スライスで張る。
   四隅の飾りは固定され、上下左右の辺だけが伸縮するので、
   カードの縦横比が変わっても角が歪まない。
   ※ frame.svg は 180×126。slice の値（上下34 / 左右35）は
     その viewBox 内の px で、角の飾りを囲う範囲。
     ※ 上下を 30→34 にした理由は common.css の .works-card::before 参照。
   ※ .works-card ・セクションタイトル（index.css）と同じ枠。
     どれかを変えるなら他も揃える。
   ※ overflow:hidden は付けないこと（border-image が切られる）。 */
/* 質問カード本体。
   飾り枠は border-image を使わず、8パーツ（四隅4＋四辺4）の
   個別要素で組む（.faq-card__frame の中に JS が生成）。
   ※ 理由：iOS/iPadOS Safari で border-image を max-height アニメと
     組み合わせると、開閉中に枠の再描画が落ちてチラつく。
     background-image の切り出しならこのバグを回避でき、
     PCと同じ「四隅固定・四辺伸縮」の見た目を保てる。
   ※ frame.svg は 180×126。スライスは上下34 / 左右35（.works-card 等と同じ）。
     各パーツの切り出しもこの値に合わせてある。 */
.faq-card {
    /* 飾り枠の対角・描画サイズ（パーツ間で共有） */
    --frame-inset: 10px;
    --frame-corner: 35px;   /* 四隅の描画サイズ（正方形）。飾り全体が入る大きさにする。 */
    --frame-line: 1.05px;    /* 辺の線の太さ（linear-gradient で描くので sub-pixel 可） */
    --frame-line-color: #8f9e9d;  /* 辺の線の色（frame.svg の辺と同色） */
    --frame-band: 6px;      /* 線を置く帯の幅。線はこの中央に来る（帯自体は透明） */
    --frame-line-pos: -2px; /* 縁から帯の位置。帯の中央の線が四隅飾りの線と揃うよう調整 */

    position: relative;
    padding: 2rem;
    background-color: var(--color-cream-white);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-sm);
}

/* 飾り枠8パーツの入れ物。カードの縁から --frame-inset 分内側に置く。
   JS（index.js）がこの中に span×8 を生成する。クリックは吸わない。 */
.faq-card__frame {
    position: absolute;
    inset: var(--frame-inset);
    z-index: 1;
    pointer-events: none;
}

/* 共通：各パーツは地に強制で展開する。 */
.faq-card__frame span {
    position: absolute;
    background-repeat: no-repeat;
}

/* --- 四隅（固定サイズ） ---
   frame.svg の対応する角を、--frame-corner 角に縮めて切り出す。
   切り出し比率：左右35px・上下34px を --frame-corner に写すので、
   background-size = frame.svg 全体 × (--frame-corner / スライス値)。
     横：180 × (corner/35)／縦：126 × (corner/34)
   ※ 四隅は frame.svg を直接切り出すので飾りがそのまま出る。 */
.faq-card__frame span.c {
    width: var(--frame-corner);
    height: var(--frame-corner);
    background-image: url("../images/frame.svg");
    background-size:
        calc(180px * (var(--frame-corner) / 35))
        calc(126px * (var(--frame-corner) / 34));
}

.faq-card__frame span.tl { top: 0; left: 0; background-position: left top; }
.faq-card__frame span.tr { top: 0; right: 0; background-position: right top; }
.faq-card__frame span.bl { bottom: 0; left: 0; background-position: left bottom; }
.faq-card__frame span.br { bottom: 0; right: 0; background-position: right bottom; }

/* --- 四辺（伸縮） ---
   辺は「中央の直線」だけなので、画像ではなく
   linear-gradient で描く。こうすると線の太さを sub-pixel で指定でき、
   background や border の 1px 丸め（「1.5px未満で一気に細くなる」）を回避できる。
   ※ 帯（パーツ）は --frame-band 分の幅を取り、中央に --frame-line の線を置く。
     線以外は透明なので、帯を太くしても見た目は線だけ。
   ※ 長さ方向は角の間（100%-corner×2）を埋める。
   ※ これにより「四辺に角飾りが反復して出る」問題も回避（線のみなので）。 */
.faq-card__frame span.et,
.faq-card__frame span.eb {
    left: var(--frame-corner);
    width: calc(100% - var(--frame-corner) * 2);
    height: var(--frame-band);
    background-image: linear-gradient(
        to bottom,
        transparent calc(50% - var(--frame-line) / 2),
        var(--frame-line-color) calc(50% - var(--frame-line) / 2),
        var(--frame-line-color) calc(50% + var(--frame-line) / 2),
        transparent calc(50% + var(--frame-line) / 2)
    );
}

.faq-card__frame span.et { top: calc(var(--frame-line-pos) + 0.59px); }
.faq-card__frame span.eb { bottom: calc(var(--frame-line-pos) + 0.59px); }

.faq-card__frame span.el,
.faq-card__frame span.er {
    top: var(--frame-corner);
    height: calc(100% - var(--frame-corner) * 2);
    width: var(--frame-band);
    background-image: linear-gradient(
        to right,
        transparent calc(50% - var(--frame-line) / 2),
        var(--frame-line-color) calc(50% - var(--frame-line) / 2),
        var(--frame-line-color) calc(50% + var(--frame-line) / 2),
        transparent calc(50% + var(--frame-line) / 2)
    );
}

.faq-card__frame span.el { left: var(--frame-line-pos); }
.faq-card__frame span.er { right: var(--frame-line-pos); }

/* カード上部（Qバッジ＋質問・常に表示・タップで開閉） */
.faq-card__top {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1rem 0;
    cursor: pointer;
}

/* Qバッジ（オレンジの丸） */
.faq-card__q-badge {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    font-family: var(--font-en);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-white);
    background-color: var(--color-accent);
    border-radius: 50%;
}

.faq-card__question {
    flex: 1;
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.5;
    color: #4a4a4a;
}

@media (min-width: 768px) {
    .faq-card__question {
        font-size: 1.25rem;
    }
}

/* カード下部（ボタンと回答）
   ※ gap には transition を掛けない（即時切り替え）。
     gap のアニメは flex コンテナのレイアウトを毎フレーム再計算させ、
     親（.faq-card）の再レイアウトを誘発する。iOS/iPadOS Safari で
     その間 border-image（.faq-card::before）の再描画が落ち、
     枠が一瞬消える原因になる。
     高さの変化は .faq-card__answer の max-height が担うので、
     gap が即時で切り替わっても見た目の違和感は小さい。 */
.faq-card__bottom {
    padding: 0.25rem 0 1rem;
    background-color: var(--color-cream-white);
    display: flex;
    flex-direction: column;
    gap: 0;
}

.faq-card.is-open .faq-card__bottom {
    gap: 1rem;
}

/* 回答エリア（開閉） */
.faq-card__answer {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height var(--transition), opacity var(--transition);
}

.faq-card.is-open .faq-card__answer {
    opacity: 1;
}

.faq-card__answer-text {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    font-size: 1.05rem;
    line-height: 1.8;
    color: #4a4a4a;
    text-align: left;
    overflow-wrap: break-word;
}

/* Aバッジ（青の丸・Qバッジと同サイズで左ラインを揃える） */
.faq-card__a-badge {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    font-family: var(--font-en);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-white);
    background-color: var(--color-primary);
    border-radius: 50%;
}

/* 「回答を見る」ボタン（青緑の塗り・白文字） */
.faq-card__toggle {
    width: 100%;
    background-color: var(--color-teal-deep);
    padding: 0.85rem 1.25rem;
    border-radius: var(--radius-pill);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: background-color var(--transition), transform var(--transition);
}

/* ホバー：地を一段深くする */
.faq-card__toggle:hover {
    background-color: var(--color-teal-deep-hover);
}

.faq-card__toggle:active {
    transform: scale(0.98);
}

.faq-card__toggle-icon {
    font-size: 0.85rem;
    transition: transform var(--transition);
}

.faq-card.is-open .faq-card__toggle-icon {
    transform: rotate(180deg);
}

/* =========================================================
   NEWS (お知らせ)
   ========================================================= */

.news {
    /* 背景は body の共通背景に任せる（旧：--color-bg） */
    /* 下パディングは .section の値をそのまま使う（以前は半分に抜いていた）。 */
}

/* レイアウト：ベースは縦積み、768以上でタイトル左・inner右の横並び
   最大幅：576 → 1024（1024以上） */
.news__layout {
    max-width: var(--section-width-sm);
}

@media (min-width: 768px) {
    .news__layout {
        display: flex;
        align-items: flex-start;
        gap: 2.5rem;
        max-width: none;
    }
}

@media (min-width: 1024px) {
    .news__layout {
        max-width: var(--section-width-lg);
    }
}

/* タイトル：ベースは横長画像、768以上で縦長画像に切り替え
   クリーム背景・角丸。ベースは fit-content で画像幅に合わせ、中央寄せ。
   ※ 飾り枠（frame.svg）を重ねるため position:relative。
     枠は .home-works__title / .news__title 共通定義（下方）を参照。 */
.news__title {
    position: relative;
    width: fit-content;
    margin-inline: auto;
    margin-bottom: var(--spacing-md);
    padding: 1.25rem;
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
}

/* ベース：横長見出し画像 */
.news__title-img-h {
    display: block;
    width: 100%;
    height: auto;
    max-width: 212px;
    margin-inline: auto;
}

@media (min-width: 576px) {
    .news__title-img-h {
        max-width: 240px;
    }
}

.news__title-img {
    display: none;
}

@media (min-width: 768px) {
    .news__title {
        flex: 0 0 auto;
        margin-bottom: 0;
    }

    /* ベースの横長画像を非表示、縦長画像を表示 */
    .news__title-img-h {
        display: none;
    }

    .news__title-img {
        display: block;
        width: auto;
        height: auto;
        max-height: 280px;
    }
}

/* =========================================================
   セクションタイトルの飾り枠（frame.svg）
   施工事例（.home-works__title）とお知らせ（.news__title）の
   白い背景の上に重ねる。両方同じ形・同じ余白なので共用。

   .works-card::before / .faq-card::before と同じ手法（border-image の9スライス）。
   四隅の飾りは固定され、上下左右の辺だけが伸縮する。

   ※ frame.svg は 180×126。スライス値（上下34 / 左右35）と
     描画幅（34px / 35px）。
     ※ 上下を 30→34 にした理由は common.css の .works-card::before 参照。
   ※ カード類（.works-card / .faq-card）と同じ枠。どれかを変えるなら他も揃える。
   ※ --frame-inset で縁からの寄せ幅を調整する。
   ※ 親に overflow:hidden を付けないこと（border-image が切られる）。
   ※ クリックを吸わない（pointer-events:none）。 */
.home-works__title::before,
.news__title::before {
    content: "";
    --frame-inset: 6px;

    position: absolute;
    inset: var(--frame-inset);
    z-index: 1;
    border: 34px solid transparent;
    border-image: url("../images/frame.svg") 34 35 / 34px 35px / 0 stretch;
    pointer-events: none;
}

.news__inner {
    width: 100%;
}

@media (min-width: 768px) {
    .news__inner {
        flex: 1 1 0;
        min-width: 0;
    }
}

.news__body {
    margin-bottom: var(--spacing-md);
}

.news-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* 768以上：登醲が1件だけでも、2件分相当の高さを確保する。
   （タイトル2行想定の1件≈約7rem × 2 ＋ gap 0.75rem）
   ※タイトル行数で実高は前後するため、min-height で下限だけ押さえる。 */
@media (min-width: 768px) {
    .news-list {
        min-height: 14.75rem;
    }
}

.news-list__item {
    background-color: var(--color-white);
    border-radius: var(--radius-md);
    transition: transform var(--transition);
}

.news-list__item:hover {
    transform: translateY(-2px);
}

.news-list__link {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
        "date meta arrow"
        "title title arrow";
    align-items: center;
    gap: 0.75rem 1rem;
    padding: 1rem 1.25rem;
}

.news-list__date {
    grid-area: date;
    font-family: var(--font-en);
    font-size: 0.95rem;
    line-height: 1;
    color: var(--color-text-light);
    white-space: nowrap;
}

.news-list__meta {
    grid-area: meta;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.news-list__cat {
    padding: 0.2rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    color: var(--color-white);
    background-color: var(--color-secondary);
    border-radius: var(--radius-pill);
    white-space: nowrap;
}

/* お知らせ・施工事例ともにメインカラーで統一
   ※ NEWバッジ（.news-list__new）は目立たせるためアクセント（オレンジ）のまま。 */
.news-list__cat--news,
.news-list__cat--work {
    background-color: var(--color-primary);
}

.news-list__new {
    padding: 0.125rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--color-white);
    background-color: var(--color-accent);
    border-radius: var(--radius-xs);
}

.news-list__title {
    grid-area: title;
    font-size: 1rem;
    color: var(--color-text);
    /* 最大2行クランプ（3行目以降は…で省略） */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    line-height: 1.5;
}

@media (min-width: 768px) {
    .news-list__title {
        font-size: 1.05rem;
    }
}

.news-list__arrow {
    grid-area: arrow;
    color: var(--color-primary);
    transition: transform var(--transition);
}

.news-list__link:hover .news-list__arrow {
    transform: translateX(3px);
}

.news-empty {
    text-align: center;
    color: var(--color-text-light);
    padding-block: var(--spacing-md);
}

.news__more {
    margin-top: 8rem;
    text-align: center;
}

@media (min-width: 768px) {
    .news__more {
        text-align: right;
    }
}

/* 背面スタッフ画像の重ね合わせは .illust-btn-stack を使用（共通ブロック参照） */

.news__more-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 2rem;
    font-weight: 700;
    color: var(--color-primary-dark);
    background-color: var(--color-white);
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-pill);
    transition: background-color var(--transition), color var(--transition), transform var(--transition);
}

.news__more-btn:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
    transform: translateY(-2px);
}

.news__more-btn i {
    transition: transform var(--transition);
}

.news__more-btn:hover i {
    transform: translateX(3px);
}