/* 全体スタイル */
:root {
    --color-primary: #1a6da9;
    /* Company Blue */
    --color-service: #93c645;
    /* Service Green */
    --color-contact: #e5c22a;
    /* Contact Yellow */
    --color-text: #464654;
    --color-text-white: #ffffff;
    --color-bg-light: #f9f9f9;
    --color-border: #e5e5e5;

    --font-main: 'Noto Sans JP', sans-serif;
    --font-english: 'Noto Sans JP', sans-serif;

    --width-container: 1600px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.sp_on {
    display: none;
}

/* スマホだけ改行を有効にする */
@media (max-width: 768px) {
    .sp_on {
        display: inline;
    }
}

/* ベース：タイトル＋縦ライン */
.js-section-title {
    --line-height-scale: 0;
    /* 縦ライン用スケール */
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}

/* 縦ライン（初期は高さ0）*/
/* .js-section-title::before {
    content: "";
    display: inline-block;
    width: 2px;
    height: calc(1.8em * var(--line-height-scale));
    background-color: currentColor;
    transform-origin: bottom center;
} */

/* テキスト本体 */
.section__title-inner {
    display: inline-block;
}


body {
    font-family: var(--font-main);
    color: var(--color-text);
    line-height: 1.8;
    background-color: #fff;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
    transition: opacity 0.3s ease;
}

a:hover {
    opacity: 0.8;
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.container {
    max-width: var(--width-container);
    margin: 0 auto;
    padding: 0 20px;
}

.section {
    padding: 100px 0;
}

.section__header {
    margin-bottom: 30px;
    text-align: left;
}

.section__title {
    font-family: var(--font-english);
    font-size: 2.5rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 10px;
    line-height: 1.2;
}

.section__subtitle {
    font-size: 1.125rem;
    font-weight: 700;
    display: block;
    margin-bottom: 20px;
}

.section__subtitle::after,
.contact__sub::after {
    content: '';
    display: block;
    width: 1.125rem;
    height: 4px;
    margin-top: 1.125rem;
    margin-bottom: 1.125rem;
}

.philosophy.section .section__subtitle::after,
.works.section .section__subtitle::after,
.contact__title__wrap .contact__sub::after {
    background-color: var(--color-text);
}

.company.section .section__subtitle::after,
.service.section .section__subtitle::after,
.licenses.section .section__subtitle::after,
.contact.section .contact__sub::after {
    background-color: white;
}

.section__desc {
    font-size: 1rem;
    margin-top: 20px;
}

.text-white {
    color: var(--color-text-white);
}

/* ヘッダー */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 20px 0;
    background: transparent;
    transition:
        background-color 0.3s ease,
        color 0.3s ease,
        box-shadow 0.3s ease;
}

.header--on-hero {
    background: transparent;
    color: #fff;
    box-shadow: none;
}

.header--on-hero .header__item a {
    color: #fff;
}

.header--on-hero .header__hamburger {
    background: #fff;
}

.header--on-hero .header__hamburger span {
    background-color: var(--color-primary);
}

.header--scrolled {
    background-color: rgba(255, 255, 255, 0.5);
    color: var(--color-text);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.header--scrolled .header__item a {
    color: var(--color-text);
}

.header--scrolled .header__hamburger {
    background: var(--color-text);
}

.header--scrolled .header__hamburger span {
    background-color: #fff;
}

/* PCナビの文字色切り替え */
@media (min-width: 769px) {
    .header--on-hero .header__item a {
        color: #fff;
    }

    .header--scrolled .header__item a {
        color: var(--color-text);
        /* #464654 想定 */
    }
}

.header__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: var(--width-container);
    margin: 0 auto;
    padding: 0 20px;
}

.header__logo img {
    height: 63px;
}

.header__nav {
    display: none;
}

.header__list {
    display: flex;
    gap: 30px;
}

.header__item a {
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.05em;
}

.header__hamburger {
    display: block;
    width: 40px;
    height: 40px;
    background: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    z-index: 1001;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.header__hamburger span {
    display: block;
    width: 20px;
    height: 2px;
    background-color: var(--color-primary);
    transition: 0.3s;
}

/* メニュー展開中のハンバーガー（＝Xアイコン） */
.header__hamburger.is-open {
    background-color: #42424a;
    /* 濃いグレーの丸 */
}

/* 3本線をXに変形 */
.header__hamburger.is-open span {
    position: absolute;
    width: 22px;
    background-color: #fff;
}

.header__hamburger.is-open span:nth-child(1) {
    transform: rotate(45deg);
}

.header__hamburger.is-open span:nth-child(2) {
    opacity: 0;
}

.header__hamburger.is-open span:nth-child(3) {
    transform: rotate(-45deg);
}


/* ヒーローセクション */
.hero {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 600px;
    display: flex;
    align-items: flex-end;
    padding-bottom: 50px;
    overflow: hidden;
}

.hero__bg {
    position: absolute;
    inset: 0;
    /* top:0; right:0; bottom:0; left:0 と同じ */
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* ★ ここも追加 */
    z-index: -1;
}

/* ヒーロー背景：ズームアニメの初期状態 */
.js-hero-zoom img {
  transform: scale(1.3);
  transform-origin: center center;
}


.hero__bg picture,
.hero__bg img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.hero__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0.0) 0%,
            rgba(0, 0, 0, 0.0) 40%,
            rgba(0, 0, 0, 0.0) 100%);
}

.hero__content {
    width: 100%;
    max-width: var(--width-container);
    margin: 0 auto;
    padding: 0 40px;
    color: #fff;
    position: relative;
    z-index: 10;
}


.hero__catch {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 700;
    line-height: 1.6;
    margin-bottom: 16px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    letter-spacing: 0.05em;
}

.hero__sub {
    font-family: var(--font-english);
    font-size: 0.85rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    letter-spacing: 0.08em;
    opacity: 0.8;
    font-weight: 400;
}

.hero__scroll {
    position: absolute;
    bottom: 0;
    right: 40px;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    z-index: 10;
}

.hero__scroll-text {
    writing-mode: vertical-rl;
    font-size: 1.125rem;
    letter-spacing: 0.2em;
    font-family: var(--font-english);
    font-weight: 500;
}

.hero__scroll-line {
    display: block;
    width: 1px;
    height: 294px;
    background-color: #fff;
    animation: scrollLine 1.5s ease-in-out infinite;
}

@keyframes scrollLine {
    0% {
        transform: scaleY(1);
        transform-origin: top;
        opacity: 1;
    }

    50% {
        transform: scaleY(0);
        transform-origin: top;
        opacity: 0.5;
    }

    50.1% {
        transform: scaleY(0);
        transform-origin: bottom;
    }

    100% {
        transform: scaleY(1);
        transform-origin: bottom;
        opacity: 1;
    }
}

.hero__contact-btn {
    position: relative;
    display: flex;
    margin-left: auto;
    margin-top: 0;
    margin-right: 0;
    width: fit-content;
    background-color: #ef752a;
    color: #fff;
    padding: 30px 40px 30px 40px;
    border-top-left-radius: 55px;
    border-bottom-left-radius: 55px;
    border-bottom-right-radius: 55px;
    align-items: center;
    gap: 20px;
    z-index: 100;
    transition: transform 0.3s ease;
    overflow: hidden;
}

.hero__contact-btn::after {
    content: "";
    position: absolute;
    right: -10px;
    /* 右側にはみ出す感じで配置 */
    bottom: 0;
    width: 137px;
    /* ボタン幅 336px に対してちょい大きめ */
    height: 93px;
    background-image: url("../images/contact/bgimage-orange.png");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: contain;
    opacity: 1;
    pointer-events: none;
    z-index: -1;
}

.hero__contact-btn:hover {
    transform: translateX(-10px);
    opacity: 1;
}

.hero__contact-text {
    display: flex;
    flex-direction: column;
}

.hero__contact-text .en {
    font-family: var(--font-english);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
    padding-right: 20px;
}

.hero__contact-text .jp {
    font-size: 0.75rem;
    margin-top: 5px;
}

.hero__contact-icon {
    width: 40px;
    height: 40px;
    background-color: #fff;
    color: #ef752a;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
}

/* 企業理念 */
.philosophy {
    background-color: #fff;
    padding-bottom: 160px;
}

.philosophy__text {
    margin-bottom: 60px;
    font-size: 1rem;
    line-height: 2.75;
}

.philosophy__slider-wrapper {
    width: 100%;
    margin-bottom: 60px;
    overflow: hidden;
}

/* カードを横並び + 間隔160px */
.philosophy__slider {
    display: flex;
    gap: 160px;
}

/* カード1枚の幅を660pxに固定 */
.philosophy__slide {
    width: 660px;
    height: 654px;
    flex: 0 0 660px;
}

/* スライド全体の枠 */
.philosophy__slide.card-design {
    position: relative;
    /* ボタンを絶対配置する基準 */
    border-radius: 20px;
    overflow: visible;
    /* ボタンが下にはみ出しても見えるように */
    margin-bottom: 80px;
    /* はみ出したぶん下に余白 */
}

/* 画像 */
.philosophy__slide.card-design .img-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* ▼ カスタムボタン全体 ▼ */
.btn-slide-custom {
    position: absolute;
    left: 53%;
    bottom: -54px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    text-decoration: none;
    z-index: 10;
    /* filter: drop-shadow(0px 6px 18px rgba(0,0,0,0.12)); */
}

/* 左側の白い丸（アイコン） */
.btn-slide-custom .icon-circle {
    width: 108px;
    height: 108px;
    background: #fff;
    /* border: 2px solid #333; */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    /* 帯より手前 */
}

/* PNGアイコンのサイズ（※ここを使う） */
.btn-slide-custom .icon-circle img {
    width: 108px;
    height: auto;
    display: block;
}

/* 右側のオレンジの帯（テキスト） */
.btn-slide-custom .text-pill {
    position: relative;
    display: inline-block;
    width: 448px;
    background-color: #ed7d31;
    text-align: right;
    color: #fff;
    font-weight: bold;
    font-size: 16px;
    padding: 12px 25px 12px 180px;
    /* ★ 左側を広くしてアイコン下に潜らせる */
    border-radius: 50px;
    margin-left: -135px;
    /* ★ 帯を左に大きめにずらす（ここが突き出し量） */
    z-index: 1;
    white-space: nowrap;
}

/* ホバー時の動き（おまけ） */
.btn-slide-custom:hover .text-pill {
    background-color: #d66b22;
    /* 少し濃くする */
}

.philosophy__footer {
    display: flex;
    justify-content: flex-end;
    /* Right align */
    padding-right: 5%;
}

.btn-view-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    /* テキストとアイコンの間 */
    padding: 15px 40px;
    background-color: var(--color-service);
    /* Green */
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 999px;
    /* しっかり丸いピル型 */
    text-decoration: none;
    transition: opacity 0.3s;
}

.btn-view-more:hover {
    opacity: 0.9;
}

/* 右側の白い丸アイコン */
.btn-view-more__icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    color: var(--color-service);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    /* ▶ の大きさ調整用 */
}



/* 会社概要 */
.company {
    background-color: var(--color-primary);
    color: #fff;
    position: relative;
    padding-top: 175px;
    padding-bottom: 100px;
}

/* Companyセクション上部のビル群シルエット */
.company::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    /* セクション中央基準で横いっぱいに */
    width: 100vw;
    /* 画面幅いっぱいに広げる */
    height: 177px;
    /* 画像の高さに合わせて調整 */

    background-image: url("../images/common/bg-bluebill2.svg");
    background-repeat: repeat-x;
    /* 横方向にパターンとして繰り返す */
    background-position: center bottom;
    background-size: 1598px 177px;
    /* 高さを固定して比率維持 */
    background-color: white;

    pointer-events: none;
    /* クリック邪魔しないように */
}

.company .section__title {
    padding-top: 160px;
}

.company .section__desc {
    padding-bottom: 1.875rem;
}

.company__image {
    margin-bottom: 60px;
    margin-right: 0;
    margin-left: calc(50% - 50vw);
    width: 94.3125vw;
    border-top-right-radius: 60px;
    border-bottom-right-radius: 60px;
    overflow: hidden;
}

.company__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 会社イメージ：SPレイアウト */
@media (max-width: 767px) {
    .company__image {

        /* 404×244 の比率（≈1.65:1） */
        width: min(94.3125vw, 404px);
        aspect-ratio: 404 / 244;

        border-top-right-radius: 30px;
        border-bottom-right-radius: 30px;
        overflow: hidden;
    }

    .company__image picture,
    .company__image img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
    }
}

.company__content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 85px;
    align-items: start;
}

.company__col-title {
    font-family: var(--font-english);
    font-size: 1.125rem;
    margin-bottom: 22px;
}

.company__info .company__col-title {
    margin-bottom: 30px;
    font-family: var(--font-english);
    font-size: 1.125rem;
    margin-bottom: 0;
    border-bottom: 2px solid rgba(255, 255, 255, 1);
    padding-bottom: 15px;
}

/* 会社概要リスト（右カラム） */
.company__list {
    display: flex;
    flex-direction: column;
    /* gap: 20px; */
}

.company__row {
    display: flex;
    align-items: baseline;
    border-bottom: 2px solid rgba(255, 255, 255, 1);
    padding: 22px 0;
}

.company__row dt {
    width: 140px;
    flex-shrink: 0;
}

.company__row dd {
    flex-grow: 1;
    line-height: 1.6;
}

.company__row dd hr {
    margin: .875rem 0;
    padding: 0;
    border: 0;              /* 既定の立体っぽい線を消す */
    height: 0;              /* 高さリセット */

    border-top: 2px solid var(--color-text-white);
}

/* HISTORY タイムライン全体 */
.company__history {
    position: relative;
    max-width: 604px;
}

/* 矢印の左側「＼」 */
.company__history::before,
.company__history::after {
    content: "";
    position: absolute;
    bottom: 0;
    /* タイムラインの一番下あたり */
    width: 12px;
    border-bottom: 2px solid #fff;
}

/* 「＼」 */
.company__history::before {
    transform: translateX(-50%) rotate(45deg);
    left: 5px;
    /* 縦ラインの位置に合わせる */
}

/* 「／」 */
.company__history::after {
    transform: translateX(-50%) rotate(-45deg);
    left: 13px;
    /* 縦ラインの位置に合わせる */
}

/* dl 本体：縦ライン＆矢印もここで描画 */
.company__history-list {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 37px;
    margin: 0;
    padding: 8px 0 0 0;
}

/* 左の縦ライン */
.company__history-list::before {
    content: "";
    position: absolute;
    left: 8px;
    /* タイムラインのX位置 */
    top: 0;
    bottom: -1px;
    /* 矢印ぶんの余白 */
    width: 2px;
    background: #ffffff;
}

/* 各行（年＋本文のセット） */
.history__row {
    position: relative;
    padding-left: 40px;
    /* 左にライン＆丸ピンぶんの余白 */
    font-size: 1.125rem;
}

/* 左の丸ピン（ドット） */
.history__row::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 0.55em;
    /* 年の文字高さに合わせて調整 */
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
}

/* 年月 */
.history__row dt {
    /* font-weight: 700; */
    margin-bottom: 4px;
}

/* 本文（頭に「・」をつける） */
.history__row dd {
    line-height: 1.8;
}


@media (max-width: 767px) {
    .company::before {
        /* 左右 1px ずつはみ出す */
        width: calc(100vw + 2px);
        left: 50%;
        transform: translateX(calc(-50% - 1px));
        /* 左に1pxずらす */
    }

    .company__content {
        display: flex;
        flex-direction: column;
        gap: 40px;
    }

    .company__info {
        order: 2;
    }

    .company__history {
        order: 1;
    }


    /* ヒーロー下コンタクトボタン（SP） */
    .hero__contact-btn {
        /* 中央寄せ */
        margin: 0 auto;
        /* 画面幅 428px に対して 336px の比率 → 336/428 */
        width: min(calc(100vw * 336 / 428), 21rem);
        /* 21rem = 336px */
        padding: 1.5rem 1.5rem;
        /* 15px 24px */
        border-radius: 3rem;
        /* 全角丸（48px相当） */
        transform: translateY(-50%);

        display: flex;
        align-items: center;
        justify-content: flex-start; /* 左寄せスタート */
        gap: 0;                      /* gap には頼らない */
    }

    .hero__contact-text {
        flex: 1 1 auto;
    }

    .hero__contact-btn:hover {
        transform: translateY(-50%);
    }

    .hero__contact-btn::after {
        right: -10px;
        /* 右側にはみ出す感じで配置 */
        bottom: -12px;
        width: 136px;
        /* ボタン幅 336px に対してちょい大きめ */
    }

    .hero__contact-text .en {
        /* だいたい 18〜20px くらいで可変 */
        font-size: clamp(1.125rem, 4.5vw, 1.25rem);
        /* 18px〜20px */
    }

    .hero__contact-text .jp {
        /* 11〜12px くらいで可変 */
        font-size: clamp(0.6875rem, 3.2vw, 0.75rem);
        /* 11px〜12px */
        margin-top: 0.3125rem;
        /* 5px */
    }

    .hero__contact-icon {
        flex: 0 0 40px;   /* 直径 40px を想定して固定 */
        margin-left: auto;/* テキストの右端から自動で一番右へ */
    }
}



/* 事業内容 */
.service {
    background-color: var(--color-primary);
    /* Blue background behind */
    color: #fff;
    padding: 0;
    /* Remove padding from wrapper */
}

/* 既存のPCレイアウト用（必要ならそのまま流用） */
.service__slider {
    position: relative;
}

.service__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
}

/* PCではスライドUIは非表示 */
.service__controls,
.service__pager {
    display: none;
}

.service__inner {
    background-color: var(--color-service);
    /* Green card */
    margin-left: 40px;
    /* Left margin */
    border-top-left-radius: 60px;
    border-bottom-left-radius: 60px;
    padding: 100px 0;
}

.service__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 40px;
    text-align: center;
}

.service__item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.service__img {
    width: 322px;
    height: 322px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 20px;
    /* border: 5px solid rgba(255, 255, 255, 0.3); */
}

.service__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.service__name {
    font-size: 1.25rem;
    font-weight: 700;
}

.service__name__sub {
    font-size: 14px;
}

.service__business-list {
    margin-top: 2rem;
    font-size: 0.875rem;
    line-height: 2;
    letter-spacing: 0.08em;
}

.service__business-list__items {
    list-style: disc;
    padding-left: 2.5rem;
}

.section__business-list_subtitle {
    font-size: 1.125rem;
    font-weight: 700;
    display: block;
    margin-bottom: 20px;
}

/* =========================
    SERVICE - SP レイアウト
   ========================= */
@media (max-width: 767px) {

    /* 要望：SP では左マージン 0 */
    .service__inner {
        margin-left: 0;
        /* border-radius: 0; */
        padding: 60px 0 70px;
    }

    .service {
        padding: 60px 0;
    }

    /* ▼ スライダー全体を 100vw にする ▼ */
    .service__slider {
        width: 100vw;
        margin-left: 50%;
        transform: translateX(-50%);
        /* container の padding を無視して中央寄せ */
        overflow: hidden;
    }

    /* 横スクロール＋1枚ずつ */
    .service__grid {
        display: flex;
        flex-wrap: nowrap;
        gap: 16px;
        padding: 0 10vw 24px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }

    .service__grid::-webkit-scrollbar {
        display: none;
    }

    /* 1枚のカード：アニメ用の初期状態 */
    .service__item {
        flex: 0 0 80vw;
        min-width: 80vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        scroll-snap-align: center;

        opacity: 0.6;
        transform: scale(0.95);
        transition: opacity 0.4s ease, transform 0.4s ease;
    }

    /* アクティブなスライドの見せ方（アニメのゴール） */
    .service__item.is-active {
        opacity: 1;
        transform: scale(1);
    }

    /* 画像は正円で中央配置 */
    .service__img {
        width: 260px;
        height: 260px;
        border-radius: 50%;
        overflow: hidden;
        margin: 2.5rem auto 1.5rem;
    }

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

    /* ▼ 矢印＋ページャー ▼ */

    .service__controls {
        display: flex;
        align-items: center;
        justify-content: center;
        /* 全体を画面中央寄せ */
        margin-top: 24px;
    }

    /* 真ん中の pill ボタンを画面中央に・最小幅 110px */
    .service__controls-main {
        display: inline-flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 20px;
        background-color: #fff;
        border-radius: 999px;
        min-width: 110px;
        /* ←指定どおり */
        position: relative;
    }

    .service__btn {
        width: 24px;
        height: 24px;
        border: none;
        background: transparent;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        /* ← ご指定どおり 18px */
        line-height: 1;
        color: var(--color-service);
        /* SERVICE セクションのグリーン */
        padding: 0;
    }

    /* 旧 ::before 矢印を無効化しておく（残っていても見えないように） */
    .service__btn::before {
        content: none;
    }

    .service__controls-divider {
        width: 1px;
        height: 18px;
        background-color: var(--color-service);
        opacity: 0.25;
    }

    /* ページャー：幅64px・フォントサイズ12px */
    .service__pager {
        width: 64px;
        padding: 4px 0;
        border-radius: 999px;
        background-color: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--color-service);
        font-size: 12px;
        position: absolute;
        right: 30px;
        bottom: 4px;
    }

    .service__pager-separator {
        margin: 0 4px;
    }

    .service__business-list {
        line-height: 1.75;
    }
}




/* 許認可・資格 */
.licenses {
    background-color: var(--color-primary);
    color: #fff;
}


.licenses__list {
    margin-top: 5rem;
    margin-bottom: 60px;
    padding: 0 16rem 0 13rem;
}

.licenses__item {
    display: flex;
    justify-content: space-between;
    padding: 15px 0;
    position: relative;
}

.licenses__item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    /* Full screen width */
    height: 2px;
    background-color: rgba(255, 255, 255, 1);
}

.licenses__banner {
    /* background-color: #fff; */
    color: var(--color-text-whitee);
    padding: 30px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.licenses__box {
    display: flex;
    align-items: center;
    gap: 78px;
}

.licenses__box img {
    width: 231px;
}

.licenses__text {
    line-height: 2.5;
}

.licenses__text .licenses__title {
    font-size: 1.375rem;
    font-weight: 700;
    margin-bottom: 1.375rem;
}

@media (max-width: 768px) {
    .licenses__list {
        padding: initial;
    }

    .licenses__banner {
        display: block;
        /* 一旦フレックス解除して1カラムに */
        padding: 40px 20px;
    }

    .licenses__box {
        flex-direction: column;
        /* 画像→テキストを縦並びに */
        align-items: center;
        /* 中央寄せ */
        text-align: left;
        /* テキスト本体は左寄せ */
        gap: 24px;
    }

    .licenses__box img {
        width: 70%;
        max-width: 260px;
        margin: 0 auto;
        display: block;
    }

    .licenses__text {
        line-height: 2;
        font-size: 0.9rem;
    }

    .licenses__text .licenses__title {
        display: block;
        text-align: center;
        /* 見出しだけ中央寄せ */
        line-height: 1.6;
        margin-bottom: 1.2rem;
    }
}

/* お問い合わせ */
.contact {
    padding: 100px 0;
    background: #fff;
}

.contact .container {
    background-color: var(--color-contact);
    border-radius: 40px 40px 0 40px;
    /* TL TR BR(0) BL */
    padding: 80px;
    color: #fff;
    position: relative;
    overflow: hidden;
}

/* ラクダの背景シルエット */
.contact .container::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: calc(682px * .9);
    height: calc(473px * .9);
    background-image: url("../images/contact/bgimage.png");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: contain;
    opacity: 1;
    pointer-events: none;
}

/* 中身を左右に並べる */
.contact__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    position: relative;
    z-index: 1;
    /* ラクダより前に出す */
}

/* 左側テキストエリア */
.contact__info {
    max-width: 520px;
}

.contact__title {
    font-family: var(--font-english);
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    margin-bottom: 10px;
}

.contact__sub {
    font-size: 1.125rem;
    margin-bottom: 12px;
}

.contact__desc {
    margin-top: 24px;
    margin-bottom: 16px;
}

.contact__tel {
    font-size: 2.375rem;
    font-weight: 700;
    margin: 20px 0;
}

.contact__tel span {
    font-size: 1.5rem;
}

/* 右側のボタンエリア */
.contact__action {
    flex-shrink: 0;
}

.btn-contact-large {
    display: inline-flex;
    align-items: center;
    gap: 24px;
    background-color: #fff;
    color: var(--color-contact);
    padding: 20px 60px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 1.05rem;
    text-decoration: none;
    /* box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18); */
}

/* 左側テキストのまとまり */
.btn-contact-large__label {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.4;
}

/* CONTACT FORM（英字） */
.btn-contact-large__en {
    font-family: var(--font-english);
    font-size: 1.3rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}

/* お問い合わせフォーム（日本語） */
.btn-contact-large__ja {
    font-size: 0.875rem;
}

.btn-contact-large__icon {
    background: var(--color-contact);
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}

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

    /* セクションの余白を少しタイトに */
    .contact {
        padding: 60px 0;
    }

    .contact .container {
        width: calc(100vw * 0.789);
        max-width: none;
        margin: 0 auto;
        padding: 48px 28px;
        border-radius: 32px 32px 0 32px;
        max-width: 360px;
        margin: 0 auto;
    }

    /* ラクダの配置をSP用に調整 */
    .contact .container::after {
        right: -40px;
        bottom: 0;
        width: 360px;
        height: 260px;
        background-position: center bottom;
        background-size: contain;
        opacity: 0.9;
    }

    /* 中身を縦並びに */
    .contact__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 40px;
    }

    .contact__info {
        max-width: 100%;
    }

    .contact__title {
        font-size: 2.1rem;
    }

    .contact__sub {
        font-size: 1rem;
    }

    .contact__desc {
        font-size: 0.9rem;
        line-height: 2;
    }

    .contact__tel {
        font-size: 2rem;
        margin-top: 24px;
        white-space: nowrap;
    }

    .contact__tel span {
        font-size: 1.25rem;
    }

    /* ボタンは下部中央寄せ */
    .contact__action {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .btn-contact-large {
        display: inline-flex;
        align-items: center;
        justify-content: space-between;
        width: calc(100% * 325 / 369);
        /* ≒ 88.1% */
        max-width: 325px;
        /* カンプ値の上限 */
        padding: 14px 24px;
        gap: 16px;
        border-radius: 999px;
    }

    .btn-contact-large__en {
        font-size: 1rem;
        letter-spacing: 0.06em;
        margin-bottom: 4px;
    }

    .btn-contact-large__ja {
        font-size: 0.625rem;
    }

    .btn-contact-large__icon {
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
    }
}



/* フッター */
.footer {
    background-color: #f0f0f0;
    padding: 60px 0 20px;
    color: #666;
    font-size: 1rem;
}

/* ロゴ・住所・バッジの横並びエリア */
.footer__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    margin-bottom: 40px;
}

/* 左：ロゴ */
.footer__logo img {
    height: 326px;
    /* 画像に合わせて調整：大きすぎればここを下げる */
    width: auto;
}

/* 中央：住所 */
.footer__info {
    flex: 1;
}

.address__title {
    font-family: var(--font-english);
    font-size: 1.1rem;
    letter-spacing: 0.1em;
    margin-bottom: 4px;
}

.address__sub {
    margin: 0;
}

/* ADDRESS の下のライン */
.address__sub::after {
    content: "";
    display: block;
    margin-top: 15px;
    margin-bottom: 21px;
    width: 15px;
    height: 2px;
    background: var(--color-text);
}

/* 住所の各行の余白 */
.footer__info p {
    margin: 0 0 6px;
}

/* Google Map 行 */
.map {
    padding-top: 3rem;
}

/* リンクとピンアイコン */
.map a {
    position: relative;
    padding-left: 22px;
    color: inherit;
    text-decoration: underline;
    font-size: .875rem;
}

.map a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 17px;
    height: 23px;
    background-image: url('../images/common/icon-map.svg');
    background-size: contain;
    background-repeat: no-repeat;
    display: block;
    /* border-radius: 50%; */
    /* border: 1px solid currentColor; */
}

/* 右：バッジ */
.footer__badge {
    display: flex;
    flex-direction: column;
    ;
}

.footer__badge img {
    width: 150px;
    height: auto;
    padding-bottom: 100%;
}

/* 下段：Google Map＋コピーライト */
.footer__bottom {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: 0.75rem;
}

/* Google Map リンク */
.footer__bottom .map {
    margin: 0;
}

.footer__bottom .map a {
    position: relative;
    padding-left: 22px;
    color: inherit;
    text-decoration: underline;
}

/* 簡易ピンアイコン */
.footer__bottom .map a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid currentColor;
}

/* コピーライト右寄せ */
.footer__copyright {
    margin: 0;
    text-align: right;
    font-size: 0.875rem;
}

@media (max-width: 768px) {
    .footer {
        padding: 40px 0 24px;
        font-size: 0.9rem;
    }

    /* 上段を縦並びに */
    .footer__inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 24px;
        margin-bottom: 24px;
    }

    .footer__logo img {
        height: 220px;
    }

    .footer__info {
        flex: none;
    }

    .address__title {
        font-size: 1rem;
        letter-spacing: 0.16em;
    }

    .address__sub::after {
        margin: 15px auto 21px;
        /* 中央にくるように */
    }

    .footer__info p {
        margin: 0 0 4px;
    }

    .map {
        padding-top: 20px;
    }

    .map a {
        font-size: 0.8rem;
    }

    /* バッジ＋コピーライト縦並び */
    .footer__badge {
        align-items: center;
        gap: 16px;
    }

    .footer__badge img {
        width: 150px;
        padding-bottom: 0;
        /* SP は余白無しでOK */
    }

    .footer__copyright {
        font-size: 0.75rem;
        text-align: center;
        margin-top: 8px;
    }

    /* 使っていない footer__bottom は非表示でOK */
    .footer__bottom {
        display: none;
    }
}


/* レスポンシブ */
@media (min-width: 768px) {
    .header__nav {
        display: block;
    }

    .header__hamburger {
        display: none;
    }

    .company__list {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 0 40px;
    }

    .footer__inner {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
    }
}

@media (max-width: 767px) {
    .section__title {
        font-size: 2rem;
    }

    .hero__catch {
        font-size: 1.75rem;
    }

    .hero__catch-label {
        font-size: 0.75rem;
    }

    .hero__sub {
        font-size: 0.8rem;
    }

    .hero__content {
        padding: 0 20px;
    }

    .hero__scroll {
        right: 20px;
        bottom: 40px;
    }

    .hero__scroll-text,
    .hero__scroll-line {
        display: none;
    }

    /* ▼ SPメニュー：右からスライドイン ▼ */

    .header__nav {
        position: fixed;
        top: 0;
        right: 0;
        /* ← 右から出す */
        width: 100%;
        height: 100vh;
        background-color: #DCDDDD;
        z-index: 999;

        /* スライド用 */
        transform: translateX(100%);
        /* 最初は画面の外 */
        opacity: 0;
        pointer-events: none;
        transition: transform 0.35s ease, opacity 0.35s ease;

        /* 中身レイアウト */
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        padding: 80px 24px 40px;
        box-sizing: border-box;
        overflow-y: auto;
    }

    /* iOS のアドレスバー対策（対応ブラウザのみ） */
    @supports (height: 100dvh) {
        .header__nav {
            height: 100dvh;
        }
    }

    .header__nav.active {
        transform: translateX(0);
        /* 画面内へスライドイン */
        opacity: 1;
        pointer-events: auto;
        /* クリック可能に */
    }

    /* すでにあるならそのままでOKだけど、一応載せておく */
    .header__list {
        flex-direction: column;
        text-align: center;
        gap: .5rem;
        margin-top: 7rem;
    }

    .header__item {
        border-bottom: 1px solid var(--color-text);
        padding-bottom: 0.5rem;
    }

    .header__item a {
        color: var(--color-text) !important;
        font-size: .875rem;
        display: inline-block;
        width: 100%;
    }


    /* ▼ 下部ロゴ＋会社情報 ▼ */
    .header__nav-footer {
        margin-top: auto;
        /* 下側に押し下げる */
        display: flex;
        justify-content: center;
        align-items: flex-end;
        gap: 16px;
    }

    .header__nav-footer-logo img {
        height: 9.5625rem;
        width: auto;
    }

    .header__nav-footer-info p {
        margin: 0 0 4px;
        font-size: 0.75rem;
        line-height: 1.8;
        color: #666;
        text-align: left;
    }

}
@media (max-width: 375px) {
    .header__list {
        margin-top: 1rem;
    }
}

/* ロゴアニメーション */
.hero__logo-animation {
    position: absolute;
    top: 42%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    text-align: center;
}

.logo-flames {
    position: relative;
    width: 200px;
    height: 250px;
    margin: 0 auto 20px;
}

.flame {
    position: absolute;
    opacity: 0;
}

/* White cloud */
.logo-cloud {
    position: absolute;
    width: 80px;
    height: 60px;
    top: 60%;
    /* 50% → 60%：下へ */
    left: 60%;
    /* 50% → 60%：右へ */
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 50%;
    opacity: 0;
    animation: cloudFadeIn 0.8s ease-out 1.2s forwards;
}

.logo-cloud::before,
.logo-cloud::after {
    content: '';
    position: absolute;
    background: #fff;
    border-radius: 50%;
}

.logo-cloud::before {
    width: 50px;
    height: 50px;
    top: -20px;
    left: 10px;
}

.logo-cloud::after {
    width: 40px;
    height: 40px;
    top: -10px;
    right: 5px;
}

/* Logo text */
.logo-text {
    font-family: 'Oswald', sans-serif;
    font-size: 3rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
    opacity: 0;
    transform: translateY(20px);
    animation: textFadeIn 1s ease-out 1.5s forwards;
}

/* Keyframes */
@keyframes flameFromTop {
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes flameFromLeft {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes flameFromRight {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes flameFromBottom {
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes cloudFadeIn {
    to {
        opacity: 1;
    }
}

@keyframes textFadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =============== SP Hero 調整 =============== */
@media (max-width: 768px) {
    .section {
        padding: 60px 0;
    }

    /* テキストを少し下げて、FVからちょい見切れるくらいに */
    .hero {
        height: auto;
        /* ← 100vh をやめる */
        aspect-ratio: 428 / 865;
        /* 比率固定 */
        min-height: 0;
        padding-bottom: 80px;
        /* 元は 120px → 下側に寄せる */
        display: block;
        /* flex を解除 */
        overflow: hidden;
    }

    /* 背景画像はコンテナいっぱいにフィット */
    .hero__bg {
        position: absolute;
        inset: 0;
        z-index: -1;
    }

    .hero__bg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* ロゴ束：やや上寄せ */
    .hero__logo-animation {
        position: absolute;
        top: 32%;                     /* PCより少し上に */
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 5;
        pointer-events: none;
    }

    /* キャッチコピー：必ずロゴの“下側”に来る位置に固定 */
    .hero__content {
        position: absolute;
        left: 50%;
        bottom: 11%;                  /* 画面下からの距離で制御 */
        transform: translateX(-50%);
        width: min(100% - 40px, 24rem);
        padding: 0;                   /* ここで左右の余白もまとめて調整 */
        color: #fff;
        z-index: 10;
    }

    .hero__catch {
        font-size: 1.5625rem;         /* 25px */
        line-height: 2.5rem;          /* 40px */
        letter-spacing: 0.2em;
        margin-bottom: 0.5rem;
    }

    .hero__sub {
        font-size: 0.75rem;           /* 12px */
        line-height: 1.25rem;         /* 20px */
        letter-spacing: 0.1em;
        margin-top: 0.25rem;
    }

    /* スクロール表示はSPでは非表示のままでOK */
    .hero__scroll {
        display: none;
    }

    /* CONTACTボタン：現状のデザインを維持して、
        画像の下端に半分かぶせる */
    .hero__contact-btn {
        margin: 0 auto;
        width: min(calc(100vw * 336 / 428), 21rem);
        padding: 1.5rem 1.5rem;
        border-radius: 3rem;
        gap: 0.75rem;
        transform: translateY(-50%);  /* ここで“半分かぶせ” */
    }

    .hero__contact-btn:hover {
        transform: translateY(-50%);
    }

    .hero__content {
        padding: 0 1.5rem;
    }

    /* 「地域に根ざし…」キャッチ */
    .hero__catch {
        font-size: 1.5625rem;
        /* フォントサイズ 25px */
        line-height: 2.5rem;
        /* 行間 40px */
        letter-spacing: 0.2em;
        /* 文字間隔 20% 相当 */
        margin-bottom: 1rem;
    }

    /* 英文キャッチ */
    .hero__sub {
        font-size: 0.75rem;
        /* フォントサイズ 12px */
        line-height: 1.25rem;
        /* 行間 20px */
        letter-spacing: 0.1em;
        /* 文字間隔 10% 相当 */
        margin-top: 0.5rem;
    }
}

@media (max-width: 768px) {

    /* ラッパに少し余白 */
    .philosophy__slider-wrapper {
        padding: 0 1rem;
        overflow: hidden;
    }

    /* カード間の余白は少なめに */
    .philosophy__slider {
        gap: 1.5rem;
    }

    /* カード本体：画面幅428pxに対して392px */
    .philosophy__slide {
        width: min(calc(100vw * 392 / 428), 24.5rem);
        /* 392px ≒ 24.5rem */
        flex: 0 0 auto;
        height: auto;
    }

    .philosophy__slide.card-design {
        margin-bottom: 2.5rem;
        /* ボタンがはみ出すぶん下に余白 */
    }

    /* ▼ ここからボタンのSPサイズ調整 ▼ */
    /* 画像の下に30px空けて配置＋中央揃え */
    .btn-slide-custom {
        position: relative;
        margin-top: 1.875rem;
        /* 30px */
        left: 50%;
        bottom: -24px;
        transform: translateX(-50%);
        /* ボタン自体をカード中央に */
        display: flex;
        align-items: center;
        justify-content: center;
        width: min(calc(100vw * 260 / 428), 16.25rem);
        /* だいたい260px */
        height: 4.375rem;
        /* アイコンに合わせて高さ固定 */
    }

    /* 丸アイコンはボタンの中で絶対配置 */
    .btn-slide-custom .icon-circle {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 4.375rem;
        /* 70px */
        height: 4.375rem;
    }

    .btn-slide-custom .icon-circle img {
        width: 100%;
        height: auto;
    }

    /* オレンジの帯はボタン幅いっぱいを使う */
    .btn-slide-custom .text-pill {
        position: relative;
        width: 100%;
        margin-left: -30px;
        border-radius: 999px;
        font-size: 0.875rem;
        /* 14px */
        padding: 0.75rem 1.5rem 0.75rem 5.75rem;
        /* 上右下左：12px 24px 12px 76px（アイコン分＋余白） */
        text-align: right;
        white-space: nowrap;
    }
}

/* =========================
    WORKS（施工事例）
========================= */
.works {
    background-color: #fff;
    padding-bottom: 160px;
}

/* カード一覧のグリッド */
.works__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 110px 40px;
    /* 上下 60px, 左右 40px */
    max-width: calc(450px * 3 + 40px * 2);
    /* = 1430px */
    margin: 0 auto;
    /* ページ中央に配置 */
}

/* カード本体：PCでは最大 450px */
.work-card {
    width: min(450px, 100%);
    font-size: 0.75rem;
    /* ベース 12px 相当 */
}

/* サムネイル */
.work-card__thumb {
    display: block;
    width: 100%;
    max-width: 450px;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 1.25rem;
    /* 20px */
    /* cursor: pointer; */
}

.work-card__thumb img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    /* 450 x 450 想定 */
    object-fit: cover;
    transition: transform 0.4s ease;
}

/* ホバーでピンチイン（ズーム） */
.work-card__thumb:hover img {
    transform: scale(1.05);
}

/* 日付・場所行 */
.work-card__meta {
    display: flex;
    gap: 0.75rem;
    /* 12px */
    font-size: 0.75rem;
    /* 12px */
    margin-bottom: 0.5rem;
}

/* 日付ラベル */
.work-card__date {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    background-color: #f47d2b;
    /* オレンジ */
    color: #fff;
}

/* 施工場所 */
.work-card__place {
    color: #777;
}

/* タイトル：18px */
.work-card__title {
    font-size: 1.125rem;
    /* 18px */
    font-weight: 700;
    margin-bottom: 0.75rem;
}

/* KEYWORDS 行 */
.work-card__keywords {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
    font-size: 0.75rem;
    /* 12px */
}

/* KEYWORDS ラベル */
.work-card__kw-label {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    background-color: #f47d2b;
    color: #fff;
    letter-spacing: 0.12em;
}

/* キーワード本文 */
.work-card__kw-item {
    color: #555;
}

/* -----------------
    レスポンシブ
------------------ */
@media (max-width: 1024px) {
    .works__grid {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .works__grid {
        gap: 40px 0;
    }

    .work-card {
        margin: 0 auto;
        width: min(392px, 100%);
        /* SPカンプに近い幅 */
    }
}

/* ========== WORKS モーダルギャラリー ========== */

.work-modal {
    position: fixed;
    inset: 0;
    display: none;
    /* 初期は非表示 */
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.work-modal.is-open {
    display: flex;
}

.work-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
}

.work-modal__content {
    position: relative;
    z-index: 1;
    background: #fff;
    max-width: 960px;
    width: 90%;
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
}

/* 閉じるボタン */
.work-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: #444;
    color: #fff;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
}

/* 上段：左に画像、右にテキスト */
.work-modal__main {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.work-modal__image {
    flex: 0 0 min(480px, 55%);
}

.work-modal__image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    border-radius: 8px;
    opacity: 1;
    transition: opacity 0.2s ease;
    /* フェード用 */
}

.work-modal__info {
    flex: 1;
    font-size: 0.9rem;
}

.work-modal__date,
.work-modal__place {
    font-size: 0.8rem;
    color: #999;
    margin-bottom: 4px;
}

.work-modal__title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-top: 8px;
}

/* 下段：サムネイル */
.work-modal__thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
}

.work-modal__thumb-btn {
    border: none;
    padding: 0;
    background: none;
    cursor: pointer;
    border-radius: 8px;
    overflow: hidden;
}

.work-modal__thumb-btn img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    display: block;
    opacity: 0.5;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.work-modal__thumb-btn.is-active img {
    opacity: 1;
    transform: scale(1.05);
}

/* スマホ調整 */
@media (max-width: 768px) {
    .work-modal__content {
        width: 94%;
        padding: 16px;
    }

    .work-modal__main {
        flex-direction: column;
    }

    .work-modal__image {
        flex: none;
    }

    .work-modal__thumbs {
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    .work-modal__thumb-btn img {
        width: 64px;
        height: 64px;
    }
}


/* =========================
    CONTACT page hero
   ========================= */

.page-contact {
    background-color: #fff;
}

/* =========================
    WORKS ヒーロー見出し
   ========================= */
/* ヒーロー全体のラッパー（クラス名は実際のものに合わせて変更してください） */
.hero--works {
    position: relative;
    /* すでに指定済みなら重複OK */
}

/* キャッチブロック */
.hero-works__catch {
    position: absolute;
    left: 8%;          /* CONTACT と同じくらいの左寄せ */
    top: 45%;          /* 画面中央より少し上 */
    transform: translateY(-50%);
    color: var(--color-text-white);    /* 他ページの見出しと同系のダークグレー想定 */
}

/* 英字タイトル：WORKS */
.hero-works__title {
    margin: 0 0 0.5em;
    font-weight: 900;
    font-size: 4.375rem;   /* 70px */
    letter-spacing: 0.2em; /* 文字間隔 20% */
    line-height: 1;
}

/* サブタイトル：施工事例 */
.hero-works__subtitle {
    margin: 0;
    font-weight: 700;
    font-size: 1.875rem;   /* 30px */
    letter-spacing: 0.1em; /* 文字間隔 10% */
    line-height: 1.5;
}

/* PC（最大幅1600px時：578 x 73px 想定） */
.hero-works__info {
    position: absolute;
    left: 0;
    bottom: 40px;
    width: 36.125rem;           /* 578px / 16 */
    max-width: calc(100% - 80px); /* 画面が狭いときの保険 */
    min-height: 4.5625rem;      /* 73px / 16 */
    padding: 1rem 1.5rem;
    box-sizing: border-box;

    background-color: rgba(217, 217, 217, 0.79);
    display: flex;
    align-items: center;

    font-size: 0.75rem;         /* 12px */
    line-height: 1.7;
    color: #555;                /* お好みで var(--color-text) などに変更OK */
}

.hero-works__info-text {
    margin: 0;
}

/* スマホ調整 */
@media (max-width: 767px) {
    .hero-works__catch {
        left: 20px;
        right: 20px;
        top: 32%;
        bottom: auto;
        transform: translateY(-50%);
    }

    .hero-works__title {
        font-size: 2.8125rem; /* 45px */
    }

    .hero-works__subtitle {
        font-size: 1.25rem;   /* 20px */
    }

    .hero-works__info {
        left: 0;
        bottom: 88px;             /* CONTACTボタンと被らないように。必要なら調整お願いします */
        width: 22.9375rem;        /* 367px / 16 */
        max-width: calc(100% - 24px);
        min-height: 3.75rem;      /* 60px / 16 */
        padding: 0.75rem 1rem;

        font-size: 0.625rem;      /* 10px */
    }
}




/* =========================
    CONTACT ヒーロー見出し
   ========================= */
.contact-hero__heading {
    position: relative;
    z-index: 1;
}

/* 大きい CONTACT */
.hero__title {
    margin: 0 0 0.75rem;
}

.hero__title-main {
    display: inline-block;
    font-family: var(--font-english);
    font-size: 4.375rem;
    /* 70px */
    font-weight: 900;
    letter-spacing: 0.2em;
    /* 文字間隔 20% 相当 */
    line-height: 1.2;
    color: var(--color-text);
    /* #464654 想定 */
}

/* 「お問い合わせ」 */
.hero__subtitle {
    margin: 0;
    font-size: 1.875rem;
    /* 30px */
    letter-spacing: 0.1em;
    /* 文字間隔 10% 相当 */
    font-weight: 700;
    line-height: 1.4;
    color: var(--color-text);
}

/* ヒーロー本体 */
.contact-hero {
    position: relative;
    padding: 410px 0 237px;
    overflow: hidden;
}

/* ビルのシルエットライン */
.contact-hero__bill {
    position: absolute;
    left: 50%;
    bottom: -40px;
    transform: translateX(-50%);
    width: 100vw;

    /* デスクトップの見た目のサイズ感 */
    height: 220px;
    /* カンプくらいの細さ */
    background-image: url("../images/contact/hero-bill.svg");
    background-repeat: repeat-x;
    background-position: center bottom;
    background-size: auto 220px;
    /* ← 縦 80px でラインっぽく */

    pointer-events: none;
    z-index: 0;
    /* コンテンツより背面。上に被るようなら -2 にしてOK */
}

/* 背景ロゴ（黄色＋グレーの炎）を右上に */
.contact-hero__bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    /* ビルよりさらに奥側 */
}

.contact-hero__bg-inner {
    position: absolute;
    top: 0;
    right: 0;
    width: min(520px, 38vw);
    height: 100%;
    background-image: url("../images/contact/hero.svg");
    background-repeat: no-repeat;
    background-position: right top;
    background-size: contain;
    opacity: 1;
}

/* 中身のレイアウト */
.contact-hero__inner {
    position: relative;
    max-width: var(--width-container);
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 320px;
}

/* 見出しまわり */
.contact-hero__label {
    font-family: var(--font-english);
    font-size: 2.75rem;
    font-weight: 900;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--color-text);
    margin-bottom: 16px;
}

.contact-hero__subtitle {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-text);
}

/* CONTACT ページ本文側（フォームなど） */
.contact-page-main {
    padding: 80px 0 120px;
    background-color: #fff;
}

.contact-page-main__body {
    /* ここはあとでフォームデザインを当てる前提で軽めに */
    max-width: 960px;
    margin: 0 auto;
}

.contact__title__wrap {
    margin-bottom: 70px !important;
}

.contact__sub {
    font-size: 1.25rem;
    font-weight: 700;
}

/* フォーム全体 */
.c-form,
.contact__title__wrap {
    max-width: 1200px;
    /* 指定どおり 1200px */
    margin: 0 auto;
    /* 中央寄せ */
}

.c-form__row {
    margin-bottom: 40px;
}

/* ラベル行（件名／お名前…） */
.c-form__label {
    margin-bottom: 1.25rem;
    font-size: 1.125rem;
    /* 18px */
    letter-spacing: 0.2em;
    /* 20% */
    font-weight: 700;
}

/* 必須ラベル */
.c-form__required {
    color: #DEA900;
    font-size: 0.875rem;
    /* 14px */
    letter-spacing: 0.2em;
    /* 20% */
}

/* 入力フィールド側（テキスト／ラジオ／テキストエリアなど包む箱） */
.c-form__field {
    background-color: #EFEFEF;
    padding: 0;
}

/* テキスト入力・メール・確認用など共通 */
.c-form__field .c-form__input,
.c-form__field input[type="text"],
.c-form__field input[type="email"],
.c-form__field input[type="tel"],
.c-form__field input[type="url"] {
    width: 100%;
    height: 56px;
    border: none;
    background: transparent;
    padding: 0 20px;
    font-size: 1.125rem;
    /* 18px */
    letter-spacing: 0.1em;
    /* 10% */
    box-sizing: border-box;
}

/* テキストエリア */
.c-form__field textarea,
.c-form__field .c-form__textarea {
    width: 100%;
    min-height: 260px;
    border: none;
    background: transparent;
    padding: 18px 20px;
    font-size: 1.125rem;
    /* 18px */
    letter-spacing: 0.1em;
    box-sizing: border-box;
    resize: vertical;
}

/* プレースホルダーの色 */
.c-form__field input::placeholder,
.c-form__field textarea::placeholder {
    color: #b7b7b7;
}


/* =========================
   CONTACT hero : SP レイアウト
   ========================= */
@media (max-width: 768px) {
    .contact-hero {
        padding: 320px 0 280px;
    }

    /* スマホで少しだけ縮めたい場合（お好みで） */
    .hero__title-main {
        font-size: 2.8125rem;
        /* 48px くらいに */
        letter-spacing: 0.18em;
    }

    .hero__subtitle {
        font-size: 1.25rem;
        /* 20px くらい */
        letter-spacing: 0.08em;
    }

    .contact-hero__bg-inner {
        width: 80vw;
        background-image: url("../images/contact/hero_sp.svg");
        background-position: right top;
    }

    .contact-hero__bill {
        height: 242px;
        background-size: auto 242px;
        /* ちょっとだけ細めに */
    }

    .contact-hero__inner {
        min-height: 420px;
    }

    .c-form,
    .contact__title__wrap {
        padding: 0 25px;
    }

    .c-form__row {
        margin-bottom: 32px;
    }

    .c-form__label {
        font-size: 1rem;
        letter-spacing: 0.16em;
    }

    .c-form__field .c-form__input,
    .c-form__field input[type="text"],
    .c-form__field input[type="email"],
    .c-form__field input[type="tel"],
    .c-form__field input[type="url"] {
        height: 52px;
        padding: 0 16px;
        font-size: 1rem;
    }

    .c-form__field textarea,
    .c-form__field .c-form__textarea {
        min-height: 200px;
        padding: 14px 16px;
        font-size: 1rem;
    }

    .contact-hero__subtitle {
        font-size: 1rem;
    }

    .contact-hero__breadcrumb {
        align-self: center;
        margin-top: 40px;
    }

    .contact-hero::before {
        /* SP 用の背景画像＆サイズ調整 */
        background-image: url("../images/contact/hero_sp.svg");
        width: 100%;
        height: 100%;
        right: -10%;
        top: 0;
        background-size: auto 100%;
        background-position: right top;
        opacity: 1;
    }

    .contact-hero::after {
        height: 90px;
        background-size: auto 90px;
    }
}

/* =========================
   CONTACT – ファイルの添付
   ========================= */

.c-form__row--file {
    margin-top: 40px;
}

/* グレー帯全体 */
.c-form__row--file .c-form__field {
    background-color: #EFEFEF;
    padding: 12px 20px;
}

/* ファイル選択ボックス */
.c-form__row--file .c-form__file {
    max-width: 320px;
    font-size: 0.875rem;
}

/* 注意書きテキスト */
.c-form__row--file .c-form__note {
    margin-top: 1rem;
    /* font-size: 0.75rem; */
    line-height: 2;
    color: #555;
}

/* =========================
   CONTACT – プライバシーポリシー同意
   ========================= */

.c-form__row--privacy {
    margin-top: 32px;
}

/* チェックボックス行（背景は白のまま） */
/* .c-form__row--privacy .c-form__field {
    padding: 16px 0 24px;
} */

/* 実際のチェックは非表示にして、隣のラベルをカスタム表示に使う */
.c-form__checkbox {
    position: absolute;
    opacity: 0;
}

.wpcf7-list-item {
    margin-left: 30px;
    font-size: 1.125rem;
}

.c-form__field:has(.c-form__radio) {
    padding: 20px 0;
}

/* 「下記のプライバシーポリシーに同意します。」のテキスト部分 */
.c-form__checkbox+.wpcf7-list-item-label {
    position: relative;
    padding-left: 32px;
    cursor: pointer;
    font-size: 0.9375rem;
    /* 約 15px */
}

/* 外側の白い○ */
.c-form__checkbox+.wpcf7-list-item-label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #ccc;
    background-color: #fff;
}

/* チェック時の中の● */
.c-form__checkbox:checked+.wpcf7-list-item-label::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #DEA900;
}

/* =========================
   SP 調整
   ========================= */
@media (max-width: 768px) {
    .c-form__row--file .c-form__field {
        padding: 10px 12px;
    }

    .c-form__row--file .c-form__note {
        font-size: 0.7rem;
    }

    .c-form__row--privacy .c-form__field {
        padding: 12px 0 20px;
    }

    .c-form__checkbox+.wpcf7-list-item-label {
        font-size: 0.875rem;
    }

}

/* =========================
   CONTACT – プライバシーポリシー本文
   ========================= */

.c-form__row--policy-text {
    margin-top: 24px;
}

/* グレーの大きなボックス */
.c-form__row--policy-text .c-form__field {
    background-color: #EFEFEF;
    padding: 24px 32px;
    /* font-size: 0.875rem; */
    /* ≒14px */
    line-height: 2;
    letter-spacing: 0.05em;
}

/* 見出し行 */
.c-form__policy-title {
    font-weight: 700;
    font-size: 0.9375rem;
    /* ≒15px */
    letter-spacing: 0.12em;
    margin-bottom: 12px;
}

/* 本文テキスト */
.c-form__policy-text {
    margin: 0;
}

/* SP 調整 */
@media (max-width: 768px) {
    .c-form__row--policy-text .c-form__field {
        padding: 16px 18px;
        font-size: 0.8125rem;
        /* ≒13px */
    }

    .c-form__policy-title {
        font-size: 0.875rem;
        /* ≒14px */
        line-height: 1.6;
    }
}

/* =========================
   CONTACT：送信ボタン
   ========================= */
.c-form__actions {
    position: relative;
    display: inline-block;
    margin: 3rem auto 0;
    transform: translateX(-50%);
    left: 50%;
}

/* CONTACT フォーム専用の送信ボタンデザイン */
.c-form__actions .btn-contact-large {
    display: block;
    padding: 30px 150px 30px 30px;
    background-color: var(--color-contact);
    color: #fff;
    border: none;
    border-radius: 999px 999px 0 999px;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    line-height: 1;
    cursor: pointer;
    outline: none;
    box-shadow: none;
}

/* hover 時のちょい浮き */
.c-form__actions .btn-contact-large:hover {
    opacity: 0.9;
    transform: none;
    box-shadow: none;
}

/* 右側の白丸＋▶（疑似要素で上から被せる） */
.c-form__actions::after {
    content: "▶";
    position: absolute;
    top: 50%;
    right: 90px;
    transform: translateY(-50%);
    width: 2.5rem;
    /* 40px */
    height: 2.5rem;
    /* 40px */
    border-radius: 50%;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: var(--color-contact);
    pointer-events: none;
}

fieldset.c-form__fieldset {
    border: 0;
}

/* スマホ調整 */
@media (max-width: 768px) {
    .c-form__actions {
        margin-top: 2.5rem;
    }

    .c-form__actions .btn-contact-large {
        width: 100%;
        max-width: 330px;
        margin: 0 auto;
        /* padding: 1.1rem 3rem 1.1rem 2rem; */
        font-size: 1.0625rem;
        /* 17px くらい、少しだけ縮めるなら */
    }

    .c-form__actions::after {
        width: 2.5rem;
        height: 2.5rem;
        right: 1.2rem;
        font-size: 0.95rem;
    }
    .wpcf7-spinner {
        width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
    }
}

/* =========================
   CONTACT：ボタン下テキスト
   ========================= */
.c-form__bottom {
    margin-top: 3rem;
    margin-bottom: 252px;
    text-align: left;
    line-height: 2;
}

.c-form__bottom-text {
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--color-text);
}

.c-form__bottom-tel {
    margin-top: 1.5rem;
    font-size: 2.5rem;
    letter-spacing: 0.16em;
    font-weight: 700;
}

.c-form__bottom-tel-label {
    margin-right: 0.25rem;
    font-size: 1.25rem;
    letter-spacing: 0.12em;
    color: var(--color-contact);
}

.c-form__bottom-tel-number {
    color: var(--color-contact);
    /* 黄色強調 */
}

/* スマホ時の文字サイズ微調整 */
@media (max-width: 768px) {
    .c-form__bottom {
        margin-top: 2.5rem;
    }

    .c-form__bottom-text {
        font-size: 0.875rem;
        line-height: 1.9;
    }

    .c-form__bottom-tel {
        font-size: 1.5rem;
    }

    .c-form__bottom-tel-label {
        font-size: 1rem;
    }
}

/* =========================
    CF7 メッセージトースト（CONTACT ページ専用）
   ========================= */

/* CF7 メッセージの位置を画面下に固定 */
.wpcf7 .wpcf7-response-output {
    position: fixed;
    left: 50%;
    bottom: 16px;                     /* 画面下からの距離 */
    transform: translateX(-50%);
    z-index: 1200;                    /* ヘッダーより上に出したい場合は調整 */
    background-color: #fff;

    max-width: min(600px, calc(100% - 32px));
    box-sizing: border-box;
    margin: 0;                        /* デフォルトの大きな余白を打ち消し */
    padding: 10px 16px;

    font-size: 1.125rem;
}

/* スマホ用に少しだけ調整 */
@media (max-width: 767px) {
    .wpcf7 .wpcf7-response-output {
        bottom: 12px;
        max-width: calc(100% - 24px);
        font-size: 0.75rem;
        padding: 8px 12px;
    }
}

.u-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;
}

/* ================================
   CONTACT：共通レイアウト
================================ */

/* セクション全体 */
.page-contact .contact-section {
  max-width: 1200px;
  margin: 0 auto 140px;
  padding: 0 40px;
}

/* リード文（「お問い合わせ・お見積りは…」） */
.contact-section__lead {
  margin-top: 24px;
  font-size: 0.9375rem; /* 15px */
  line-height: 2;
}

/* STEP バー画像 */
.contact-section__step {
  margin: 40px auto 56px;
  text-align: center;
}
.contact-section__step img {
  max-width: 100%;
  height: auto;
  display: inline-block;
}

/* ================================
   CONTACT：フォーム本体
================================ */

.c-form {
  max-width: 1200px;
  margin: 0 auto;
}

/* row ごとの余白 */
.c-form__row {
  margin-bottom: 32px;
}

/* ラベル（件名／お名前…） */
.c-form__label {
  font-size: 1.125rem;       /* 18px */
  letter-spacing: 0.2em;     /* 20% 相当 */
  font-weight: 500;
  margin-bottom: 8px;
  display: block;
}

/* 必須マーク */
.c-form__required {
  margin-left: 0.5em;
  font-size: 0.875rem;       /* 14px */
  letter-spacing: 0.2em;
  color: #DEA900;
}

/* 入力エリア共通（グレー帯） */
.c-form__field {
  background-color: #EFEFEF;
  /* padding: 16px 24px; */
  font-size: 1.125rem;       /* 18px */
  letter-spacing: 0.1em;
}

/* テキスト・メール・確認用・ファイルなど */
.c-form__input,
.c-form__textarea,
.c-form__file {
  width: 100%;
  border: none;
  background: transparent;
  font: inherit;
  letter-spacing: inherit;
  padding: 8px 0;
  box-sizing: border-box;
}

/* テキストエリアの高さ */
.c-form__textarea {
  min-height: 220px;
  resize: vertical;
}

/* ラジオボタン行 */
.c-form__field--radio {
  display: flex;
  align-items: center;
  gap: 48px;
}

/* ラジオボタン＋ラベル */
.c-form__radio {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  letter-spacing: 0.08em;
}

/* ▼ ラジオボタンの見た目（円形） */
.c-form__radio input[type="radio"] {
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #ccc;
  background-color: #fff;
  position: relative;
}
.c-form__radio input[type="radio"]:checked {
  border-color: #DEA900;
}
.c-form__radio input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background-color: #DEA900;
}

/* ▼ プライバシーポリシー行（タイトルなし） */
.c-form__row--privacy .c-form__label {
  font-size: 0.9375rem; /* 少し小さめ */
  letter-spacing: 0.08em;
}

/* チェックボックス＋テキストまとまり */
.c-form__checkbox-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* チェックボックスの見た目 */
.c-form__checkbox-wrap input[type="checkbox"] {
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #ccc;
  background-color: #fff;
  position: relative;
}
.c-form__checkbox-wrap input[type="checkbox"]:checked {
  border-color: #DEA900;
}
.c-form__checkbox-wrap input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background-color: #DEA900;
}

/* プライバシーポリシー本文ボックス */
.c-form__privacy-box {
  margin-top: 24px;
  padding: 24px 32px;
  background-color: #EFEFEF;
  font-size: 0.875rem;
  line-height: 2;
}

/* 備考テキスト（ファイルサイズなど） */
.c-form__note {
  margin-top: 8px;
  font-size: 0.75rem;
  line-height: 1.8;
}

/* ================================
   送信ボタン
================================ */

.c-form__actions {
  margin-top: 48px;
  text-align: center;
}

.page-contact .c-form__actions .btn-contact-large {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px 96px 24px 72px;
  border-radius: 999px;
  background-color: #E5BA1E;
  border: none;
  color: #fff;
  font-size: 1.125rem;       /* 18px */
  font-weight: 700;
  letter-spacing: 0.18em;
  cursor: pointer;
}

/* ○▶ マーク（直径40px） */
.page-contact .c-form__actions .btn-contact-large::after {
  content: "";
  position: absolute;
  right: 32px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #fff;
  background-image:
    linear-gradient(90deg, transparent 0 40%, #E5BA1E 40% 60%, transparent 60% 100%);
  clip-path: polygon(35% 28%, 35% 72%, 68% 50%);
}