/* ===================================
   基本設定・共通スタイル
   =================================== */
:root {
    --custom-blue: #032E6A;
    --custom-gray: #f0f2f5;
    --text-color: #333333;
    --border-color: #dddddd;
    --button-navy: #032E6A;
}

body {
    font-family: 'Noto Sans JP', sans-serif;
    color: var(--text-color);
    background-color: #fff;
    line-height: 1.7;
    font-size: 16px;
    margin: 0;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

a {
    color: var(--custom-blue);
    text-decoration: none;
    transition: opacity 0.3s;
}

a:hover {
    opacity: 0.8;
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

.section {
    padding: 48px 0;
}

/* ===================================
   ヘッダー
   =================================== */
.header {
    background-color: #fff;
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 100;
}
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
}
.header-logo img {
    height: 60px;
}
.header-nav-pc {
    display: flex;
    align-items: center;
    gap: 24px;
    font-size: 14px;
}
.header-nav-pc a {
}
.external-link::after {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 4px;
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="%23333"%3E%3Cpath stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"%3E%3C/path%3E%3C/svg%3E');
    background-size: contain;
}
.btn-header-contact {
    background-color: var(--button-navy);
    padding: 10px 24px;
    border-radius: 9999px;
    font-weight: bold;
    white-space: nowrap;
    transition: background-color 0.3s, color 0.3s; /* スムーズな色の変化 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #fff;
    font-size: 1rem;
    border: none;
    text-decoration: none;
}
.btn-header-contact:hover {
    background-color: #0b254b; /* 少し暗い青色に変更 */
    color: #e0e0e0; /* 文字色を少しだけ暗くする */
    opacity: 1; /* 親のa:hoverのopacityを上書き */
}


/* ===================================
   ハンバーガーメニュー
   =================================== */
.hamburger-btn {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 200;
}
.hamburger-btn span {
    display: block;
    width: 24px;
    height: 2px;
    background-color: #333;
    margin: 6px 0;
    transition: all 0.3s ease-in-out;
}
.hamburger-btn.is-open span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
.hamburger-btn.is-open span:nth-child(2) {
    opacity: 0;
}
.hamburger-btn.is-open span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

.sp-nav {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 150;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    padding: 80px 20px 20px;
    box-sizing: border-box;
}
.sp-nav.is-open {
    transform: translateX(0);
}
.sp-nav-links a {
    display: block;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
    font-weight: bold;
}
.sp-nav-contact {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.btn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px;
    border-radius: 9999px;
    font-weight: bold;
    font-size: 16px;
}
.btn-email {
    background-color: var(--custom-blue);
    color: #fff;
    border: 2px solid var(--custom-blue);
}
.btn-tel {
    background-color: #fff;
    color: var(--custom-blue);
    border: 2px solid var(--custom-blue);
}
.btn::before { /* アイコン用 */
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 8px;
    background-size: contain;
}
.btn-email::before {
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="white"%3E%3Cpath d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"%3E%3C/path%3E%3Cpath d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"%3E%3C/path%3E%3C/svg%3E');
}
.btn-tel::before {
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="%230d2c54"%3E%3Cpath d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z"%3E%3C/path%3E%3C/svg%3E');
}

.sp-nav-info {
    margin-top: 32px;
    font-size: 14px;
    line-height: 1.6;
}
.sp-nav-info .company-name {
    font-weight: bold;
}
#close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 40px;
    color: #666;
    background: none;
    border: none;
    cursor: pointer;
}

/* ===================================
   メインコンテンツ
   =================================== */
.main-visual {
    position: relative;
    height: 500px;
    background-image: url('./images/hero-main.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
.main-visual-content {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start; /* テキストを左寄せ */
    padding: 0 15%; /* 左右に余白 */
}
@media (max-width: 1200px) {
    .main-visual-content {
        padding: 0 12%; /* 左右に余白 */
    }
}
@media (min-width: 1450px) {
    .main-visual-content {
        padding: 0 20%; /* 左右に余白 */
    }
}

.main-visual-text-wrapper {
    color: #fff;
    text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
.tagline {
    border: 1px solid #fff;
    padding: 16px 24px;
    display: inline-block;
    margin-bottom: 190px;
    font-size: 1.3rem;
}
.main-visual h1 {
    font-size: 2.4rem;
    line-height: 1.4;
    margin: 0 0 16px 0;
}
.br-sp {
    display: none; /* PCでは改行を無効化 */
}
.sub-headline {
    font-size: 1.4rem;
    line-height: 1.6;
}

/* --- 物件概要 --- */
.property-overview-wrapper {
    display: grid;
    /* 左の画像(1.3)と右のテーブル(1)の比率を指定 */
    grid-template-columns: 1.8fr 1fr;
    gap: 40px;
    align-items: flex-start;
}
.property-overview-img img {
    width: 100%;
}
.property-overview-table {
    background-color: var(--custom-gray);
    padding: 24px;
}
.overview-table-header {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 16px;
    text-align: center; /* タイトルを中央揃え */
}
.overview-table-header h3 {
    font-size: 1.6rem;
    color: var(--button-navy);
    margin: 0;
    font-weight: bold;
}
.overview-table-header p {
    margin: 4px 0 0;
    color: var(--button-navy);
    font-size: 1rem;
}
.property-overview-table table {
    width: 100%;
    border-collapse: collapse;
}
.property-overview-table th, .property-overview-table td {
    padding: 14px 0; /* 上下のパディングを調整して高さを揃える */
    border-bottom: 1px solid var(--border-color);
    vertical-align: top;
    font-size: 0.9rem;
}
.property-overview-table tr:last-child th,
.property-overview-table tr:last-child td {
    border-bottom: none;
}
.property-overview-table th {
    font-weight: bold;
    color: var(--button-navy);
    width: 30%;
    padding-right: 16px;
}
.property-overview-table td {
    font-weight: normal;
    color: var(--text-color);
}
.price-row th, .price-row td {
    padding-top: 0;
}
.price-row td {
    line-height: 1;
}
.price {
    font-size: 2.5rem;
    font-weight: bold;
    color: #c00;
}
.unit {
    font-size: 1rem;
    font-weight: bold;
    color: var(--button-navy);
    margin-left: 8px;
}
.property-description {
    margin-top: 48px;
    font-size: 1rem;
    line-height: 2;
    font-weight: bold; /* テキストを太字に */
    margin-left: 22%; /* テキストブロックを右に寄せる */
}


/* --- 物件詳細 --- */
.details-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: flex-start;
}
.details-gallery-column img {
    /* img単体ではなく、親要素で制御するように変更 */
    margin-bottom: 16px;
}

/* ギャラリー内の各アイテム（写真とウォーターマーク）のスタイル */
.details-gallery-item {
    position: relative;
    margin-bottom: 16px;
}

.details-gallery-item > img {

}

.watermark-icon {
    position: absolute;
    bottom: 10px;
    right: 10px;
    /* ウォーターマークのサイズを調整 */
    width: 40px;
    height: 40px;
    opacity: 0.8;
}

.details-table-column table {
    width: 100%;
    border-collapse: collapse;
    border-top: 1px solid var(--border-color); /* 上の罫線を追加 */
}
.details-table-column th, .details-table-column td {
    padding: 16px 8px;
    border-bottom: 1px solid var(--border-color);
    vertical-align: top;
    font-size: 0.9rem;
}
.details-table-column th {
    font-weight: bold;
    color: var(--button-navy);
    width: 30%;
    padding: 16px 16px 16px 0; /* パディングを調整 */
    border-right: 1px solid var(--border-color); /* 縦の仕切り線 */
    text-align: left; /* 左揃え */
}
.details-table-column td {
    color: var(--text-color);
    padding-left: 16px;
}
.details-table-sub-header {
    font-weight: bold;
    color: var(--custom-blue);
    padding-bottom: 8px;
    margin-top: 42px; /* テーブル間の余白 */
    margin-bottom: 6px;
    text-align: center; /* 小見出しを中央揃え */
}
.remarks-text {
    font-size: 0.9rem;
    line-height: 1.8;
    border-top: 1px solid var(--border-color); /* 上の罫線 */
    border-bottom: 1px solid var(--border-color); /* 下の罫線 */
    padding: 8px 0;
}
.remarks-text p {
    margin: 0;
    padding: 1px 0;
}


/* --- 間取り図 --- */
.floorplan-container {
    margin-top: 42px;
    text-align: center;
}
.floorplan-header h3 {
    font-size: 1.6rem;
    color: var(--button-navy);
    margin: 0;
    font-weight: bold;
}
.floorplan-header p {
    margin: 4px 0 0;
    color: var(--button-navy);
    font-size: 1rem;
}
.floorplan-image {
    margin-top: 24px;
}
.floorplan-image img {
    max-width: 100%;
    border: 1px solid var(--border-color);
}


/* ===================================
   フッター
   =================================== */
.contact-section {
    padding: 60px 0;
    background-color: #E2E2E2; /* 背景色を変更 */
    text-align: center;
}
.contact-header h3 {
    font-size: 1.8rem;
    color: var(--custom-blue);
    margin: 0;
    font-weight: bold;
}
.contact-header p {
    margin: 4px 0 0;
    color: var(--button-navy);
}
.contact-buttons {
    margin: 32px auto;
    display: flex;
    justify-content: center;
    gap: 40px; /* ボタンの間隔を広げる */
}
.btn-contact {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background-color: #032E6A; /* ボタンの背景色 */
    color: #fff;
    padding: 18px 32px;
    border-radius: 9999px; /* 長丸にする */
    font-weight: bold;
    font-size: 1rem;
    border: none;
    text-decoration: none;
    min-width: 320px;
}
.btn-contact .btn-icon {
    width: 24px;
    height: 24px;
}

.company-info-section {
    padding: 80px 0;
    background-image: url('./images/footer-back.jpg'); /* 背景画像 */
    background-size: cover;
    background-position: center;
    color: #fff;
}

.company-info-section .container {
    position: relative; /* オーバーレイの上にコンテンツを配置 */
    z-index: 2;
}
.company-info-header {
    text-align: center;
    margin-bottom: 40px;
}
.company-info-header h3 {
    font-size: 1.8rem;
    margin: 0;
}
.company-info-header p {
    margin: 4px 0 0;
}
.info-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: stretch; /* 高さを揃える */
}
.info-card {
    display: flex; /* Flexboxを有効化 */
    flex-direction: column; /* 子要素を縦に並べる */
    background-color: #fff; /* 背景を白に */
    color: var(--text-color); /* テキスト色をデフォルトに */
    text-align: left;
}
.info-card-image {
    position: relative;
}
.info-card-image img {
    width: 100%;
    display: block;
}
.info-card-image h4 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5rem;
    margin: 0;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
    text-align: center;
    width: 100%;
}
.info-card-text {
    padding: 18px;
    flex-grow: 1; /* 高さを揃えるために残りのスペースを埋める */
    display: flex;
    flex-direction: column;
}
.info-card p {
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
    flex-grow: 1;
}
.card-link {
    display: inline-block;
    margin-top: 16px;
    font-size: 0.9rem;
    font-weight: bold;
    color: var(--custom-blue);
    text-decoration: none;
    border-bottom: 2px solid var(--custom-blue);
    padding-bottom: 2px;
}
.card-link::after {
    content: '→';
    margin-left: 8px;
}

.company-info-footer-text {
    margin-top: 30px;
    text-align: left; /* 左揃えに変更 */
    font-size: 0.875rem;
    line-height: 1.8;
    max-width: 80%; /* 幅を制限 */
    margin-left: 10%; /* 左からのマージンで右に寄せる */
}
.company-info-footer-text p {
    margin: 0 0 16px;
}
.company-info-footer-text p:last-child {
    margin-bottom: 0;
}

.final-footer {
    background-color: #E2E2E2;
    padding: 40px 0;
}
.final-footer-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.footer-left {
    font-size: 0.875rem;
    color: #666;
}
.footer-left p {
    margin: 0 0 8px;
}
.copyright-text {
    font-size: 0.75rem;
}
.btn-site {
    display: inline-flex;
    align-items: center;
    gap: 16px; /* アイコンとテキストの間隔を調整 */
    background-color: #fff;
    color: var(--custom-blue); /* テキスト色を青に */
    padding: 16px 40px; /* パディングを調整 */
    border-radius: 9999px; /* 長丸にする */
    font-weight: bold;
    text-decoration: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    font-size: 1rem;
}
.btn-site .btn-icon {
    width: 32px; /* アイコンサイズを調整 */
    height: 32px; /* アイコンサイズを調整 */
    color: var(--custom-blue);
}

/* 白背景・長丸ボタン（既存の見た目を踏襲） */
.footer-right .btn-site {
    display: inline-flex;
    align-items: center;
    gap: 10px;               /* アイコンと文字の間隔 */
    padding: 12px 20px;
    background: #fff;
    color: var(--button-navy, #0a2b4d);
    border: 1px solid var(--border-color, rgba(0,0,0,0.12));
    border-radius: 9999px;
    font-weight: 600;
    font-size: 16px;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .05s ease;
}

/* アイコン（擬似要素）。通常は濃紺、ホバーで白に差し替え */
.footer-right .btn-site::before {
    content: "";
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    display: inline-block;
    background: url("./images/site-icon-navy.png") center/contain no-repeat;
}


/* ===================================================
   スマートフォン表示 (768px以下)
   =================================================== */
@media (max-width: 768px) {
    body {
        font-size: 14px;
    }
    .section {
        padding: 32px 0;
    }

    .header-nav-pc {
        display: none;
    }
    .hamburger-btn, .sp-nav {
        display: block;
    }

    .main-visual {
        height: 0;
        padding-bottom: 133.33%;
        background-image: url('./images/hero-main-sp.jpg');
    }
    .main-visual-content {
        align-items: flex-end;
        padding: 8%;
    }
    .tagline {
        font-size: 1.4rem;
        padding: 10px 20px;
        margin-bottom: 240px;
    }
    .main-visual h1 {
        font-size: 2.25rem;
        line-height: 1.6;
    }
    .br-sp {
        display: block;
    }
    .sub-headline {
        font-size: 1.1rem;
        line-height: 1.7;
    }

    .property-overview-wrapper {
        grid-template-columns: 1fr;
    }
    .property-overview-img {
        margin-bottom: 24px;
    }
    .property-description {
        margin-left: 0;
        text-align: left;
    }

    .details-wrapper {
        grid-template-columns: 1fr;
    }
    .details-gallery-column {
        margin-bottom: 24px;
    }

    .contact-buttons {
        flex-direction: column;
        gap: 16px;
    }
    .btn-contact {
        width: 100%;
        box-sizing: border-box;
        padding: 16px;
    }

    .info-cards {
        grid-template-columns: 1fr;
    }

    .company-info-footer-text {
        max-width: 100%;
        margin-left: 0;
    }

    .final-footer-container {
        flex-direction: column;
        gap: 24px;
        text-align: center;
    }
    /* ウォーターマークのサイズを調整 */
    .watermark-icon {
        width: 25px;
        height: 25px;
        bottom: 5px;
        right: 5px;
    }
}


/* ========== 画像モーダル（CSSのみで開閉） ========== */
.img-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: block;             /* :target のため保持 */
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, visibility .2s ease;
}
.img-modal:target {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}
/* 背景（クリックで閉じる） */
.img-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.8);
    display: block;
}
/* 中央の画像 */
.img-modal__content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 90vw;
    max-height: 80vh;
    z-index: 1;
}
.img-modal__content img {
    max-width: 100%;
    max-height: 80vh;
    display: block;
    box-shadow: 0 8px 24px rgba(0,0,0,.5);
}

/* ========== ギャラリーのクリックしやすさ調整 ========== */
.details-gallery-item a { display: block; cursor: zoom-in; }
.details-gallery-item { position: relative; }
.details-gallery-item .watermark-icon {
    position: absolute;
    right: 8px;
    bottom: 8px;
    width: 28px; height: 28px;
    pointer-events: none;       /* クリック阻害を防ぐ */
}
@media (max-width: 600px) {
    .img-modal__content { max-width: 95vw; max-height: 75vh; }
    .img-modal__content img { max-height: 75vh; }
}

/* PCでさらに大きく（従来: 90vw/80vh → 96vw/92vh） */
@media (min-width: 769px) {
    .img-modal__content {
        max-width: 96vw;
        max-height: 92vh;
    }
    .img-modal__content img {
        max-width: 100%;
        max-height: 92vh;
    }
}

/* スマホは幅いっぱい。縦にスクロール可能に調整 */
@media (max-width: 768px) {
    /* 背景の上でスムーズにスクロールできるように */
    .img-modal {
        overflow: auto;
    }
    /* 中央固定だと縦長画像で見切れやすいので、通常フローで上から表示 */
    .img-modal__content {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        width: 100vw;
        max-width: 100vw;
        margin: 0 auto;
        padding: 16px 0;
    }
    .img-modal__content img {
        width: 100vw;   /* 幅いっぱい */
        height: auto;   /* 縦比率維持で自動 */
        max-height: none;
    }
}

/* 影や角丸はそのまま活かす（必要なら微調整） */
.img-modal__content img {
    box-shadow: 0 8px 24px rgba(0,0,0,.5);
}

/* 中央寄せ＆大きさ最大化（PCもスマホも中央） */
.img-modal {
    display: flex;                 /* Flex で中央寄せ */
    align-items: center;           /* 縦中央 */
    justify-content: center;       /* 横中央 */
    padding: 2vh 2vw;              /* 端の余白（PC） */
    overflow: auto;                /* はみ出す場合はスクロール */
}

/* 背景オーバーレイは一番下の層に */
.img-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.85);
    z-index: 0;
}

/* コンテンツは中央、オーバーレイの上に */
.img-modal__content {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    z-index: 1;
    max-width: 98vw;              /* PC: ほぼ画面幅いっぱい */
    max-height: 96vh;             /* PC: ほぼ画面高いっぱい */
}

.img-modal__content img {
    display: block;
    width: auto;                   /* アスペクト比維持 */
    height: auto;
    max-width: 98vw;
    max-height: 96vh;
    box-shadow: 0 8px 24px rgba(0,0,0,.5);
}

/* PCは限界まで拡大（体感「約2倍」） */
@media (min-width: 769px) {
    .img-modal { padding: 2vh 1.5vw; }
    .img-modal__content { max-width: 98vw; max-height: 96vh; }
    .img-modal__content img { max-width: 98vw; max-height: 96vh; }
}

/* スマホは幅いっぱい＆中央表示 */
@media (max-width: 768px) {
    .img-modal {
        padding: 0;                  /* 端まで使う */
    }
    .img-modal__content {
        max-width: 100vw;            /* 幅いっぱい */
        max-height: 95vh;            /* 端末UIを考慮して少し余裕 */
    }
    .img-modal__content img {
        max-width: 100vw;            /* 幅いっぱい（縦長画像は高さ側で制限） */
        max-height: 95vh;
    }
}

.notofont {
    font-family: "Noto Serif JP", serif;
}







/* 別荘管理のご案内：arrow01.png を背景に使った下線装飾（右端が左上へ跳ね上げ） */
.info-card-text .card-link {
    /* 調整用の変数（スクショの寸法に合わせてください） */
    --u-len: 160px;  /* 背景画像の“見える長さ”（横幅） */
    --u-h: 14px;     /* 背景画像の高さ（arrow01.pngのデザインに合わせる） */
    --u-gap: 4px;    /* 文字と装飾の距離（小さいほど近づく） */

    position: relative;
    display: inline-block;       /* テキスト幅にフィット */
    white-space: nowrap;         /* 改行で装飾がズレないように */
    padding-bottom: var(--u-gap);
    color: #0a2b4d;              /* 見本の濃紺 */
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    background: none !important; /* 既存の背景/下線を無効化 */
    border: 0 !important;
}

/* 以前の擬似要素を無効化する保険（残っている場合） */
.info-card-text .card-link::before { content: none !important; }

/* 背景装飾（arrow01.png）を擬似要素に描画 */
.info-card-text .card-link::after {
    content: "";
    position: absolute;
    left: -10px;
    bottom: -2px;                      /* テキスト直下に配置 */
    width: var(--u-len);
    height: var(--u-h);
    pointer-events: none;
    background-repeat: no-repeat;
    background-position: left bottom; /* 左端から表示（右端が跳ね上げになる想定） */
    /* まず通常解像度の画像を指定（フォールバック） */
    background-image: url("./images/arrow01.png");

    /* 横幅に合わせて等比拡大縮小。arrow01.pngが横長であれば 100% auto でOK */
    background-size: 93% auto;
}

/* フォーカスリング（アクセシビリティ） */
.info-card-text .card-link:focus-visible {
    outline: 2px solid rgba(10,43,77,.35);
    outline-offset: 2px;
}

/* モバイルで少し短くする例（任意） */
@media (max-width: 480px) {
    .info-card-text .card-link {
        --u-len: 140px;
        --u-h: 12px;
        --u-gap: 3px;
    }
}