.search-cemetery-page { background: #fff; } .sc-container { max-width: 960px; margin: 0 auto; } .sc-title { text-align: center; font-size: 32px; font-weight: 700; margin: 0 0 20px; } .sc-form { background: #fff; border-radius: 10px; box-shadow: 0 2px 12px rgba(0,0,0,.06); padding: 24px; } .sc-field + .sc-field { margin-top: 24px; } .sc-label { display: block; font-size: 20px; font-weight: 700; margin-bottom: 8px; position: relative; } .sc-label::after { content: ''; display: block; width: 160px; height: 3px; background: var(--color_main); margin-top: 8px; } .sc-input select { width: 100%; height: 56px; border: 1px solid #e1e4e8; border-radius: 6px; padding: 0 14px; background: #fff; font-size: 16px; } .sc-actions { margin-top: 24px; } .sc-submit { width: 100%; height: 64px; background: var(--color_main); color: #fff; font-size: 22px; font-weight: 700; border: none; border-radius: 8px; transition: opacity .2s ease; } .sc-submit:hover { opacity: .88; } @media (max-width: 768px) { .sc-title { font-size: 24px; } .sc-input select { height: 52px; } .sc-submit { height: 60px; font-size: 20px; } } /* ====== 結果一覧 ====== */ .sc-results { margin-top: 32px; } .sc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .sc-card1 { background: #fff; border-radius: 0; /* ←角丸をなくす */ box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15), /* メインの影 */ 0 2px 4px rgba(0, 0, 0, 0.08); /* 補助で自然に */ overflow: hidden; font-weight: bold; /* 必要なら太字 */ position: relative; /* ← これを追加 */ } .search-cemetery-page .sc-card-body { position: relative; /* 右側のクリック面の基準 */ cursor: pointer; /* クリックできる見た目 */ } /* 住所ブロックを左端に揃える */ .search-cemetery-page .sc-card-address { display: flex; /* アイコンと住所を横並び */ align-items: center; /* アイコンと文字の縦位置を揃える */ justify-content: flex-start;/* 左端に寄せる */ text-align: left; /* テキストも左揃え */ margin-top: 6px; /* 上に余白 */ font-weight: 700; /* ★文字を太くする */ } /* 📍アイコンを左に固定 */ .search-cemetery-page .sc-card-address::before { content: "📍"; font-size: 16px; margin-right: 6px; /* アイコンと住所の間の余白 */ flex-shrink: 0; /* アイコンが潰れないよう固定 */ } @media (max-width: 768px) { .search-cemetery-page .sc-card-address { position: relative; padding-left: 1.6em; /* ← アイコン分の隙間を確保 */ display: block; /* お好みで inline/block どちらでもOK */ } .search-cemetery-page .sc-card-address::before { content: "📍"; position: absolute; left: 0; top: -0.25em; /* 縦の微調整 */ font-size: 16px; } } .sc-thumb img { display:block; width:100%; object-fit: cover; } .sc-card1 .sc-thumb { position: relative; /* オーバーレイの基準 */ overflow: hidden; /* 拡大部分をはみ出させない */ } .sc-card1 .sc-thumb img { display: block; min-width: 100%; object-fit: cover; /* 枠いっぱいにトリミング */ transition: transform 0.4s ease; } @media (max-width: 768px) { .sc-card1 .sc-thumb{ width: 35%; } .sc-card1 .sc-thumb img { width: 100%; /* スマホでは横幅いっぱい */ height: 100%; /* 高さを変更 */ object-fit: cover; min-height: 100px; } } /* オーバーレイ（初期は透明） */ /* ホバー時 */ .sc-card1:hover .sc-thumb img { transform: scale(1.05); /* 拡大 */ } .sc-card1:hover .sc-thumb::after { opacity: 1; /* 白いオーバーレイを表示 */ } .sc-card-title { font-size: 18px; margin: 0 0 8px; font-weight: 700; } .sc-card-address { color: #333; font-size: 14px; } .sc-noresult { text-align: center; padding: 24px; } @media (max-width: 1024px) { .sc-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .sc-grid { grid-template-columns: 1fr; } } /* おすすめ霊園セクション */ .recommended-cemetery-section { margin: 60px 0; padding: 40px 0; } .rc-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } .rc-title { text-align: center; font-size: 32px; font-weight: 700; color: var(--color_main); margin-bottom: 10px; } .rc-arrow-down { text-align: center; font-size: 16px; color: var(--color_main); margin-bottom: 30px; } .rc-slider-container { overflow-x: auto; overflow-y: hidden; white-space: nowrap; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; cursor: grab; } .rc-slider-container.active { cursor: grabbing; } .rc-slider { display: inline-flex; gap: 20px; padding: 0 10px; } /* ▼ ホバー時のアニメーションを追加 */ .rc-slider .rc-thumb { position: relative; overflow: hidden; } .rc-slider .rc-thumb img { display: block; width: 100%; object-fit: cover; transition: transform 0.4s ease; } /* 画像だけ拡大 */ .rc-slider .rc-card:hover .rc-thumb img { transform: scale(1.05); } /* カード全体は浮かせないで影だけ */ .rc-slider .rc-card { transition: box-shadow 0.3s ease; } .rc-slider .rc-card:hover { transform: none; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); } /* 白いオーバーレイ */ .rc-slider .rc-card .rc-thumb { position: relative; overflow: hidden; } .rc-slider .rc-card:hover .rc-thumb::after { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.2); pointer-events: none; } .rc-slider .rc-card:hover .rc-thumb::after { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.2); /* 薄い白 */ pointer-events: none; transition: background 0.3s ease; } .rc-card { flex: 0 0 300px; background: white; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; white-space: normal; display: flex; flex-direction: column; } .rc-card:hover { transform: translateY(-5px); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); } .rc-thumb { display: block; width: 100%; height: 200px; overflow: hidden; } .rc-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .rc-card:hover .rc-thumb img { transform: scale(1.05); } .rc-card-body { padding: 20px; display: flex; flex-direction: column; flex: 1; } @media (max-width: 768px) { /* タイトルだけ視覚的に上へ */ .rc-card-title { transform: translateY(-8px); /* 数値はお好みで */ } /* 下線も少し近づけたい場合（任意） */ .rc-card-title::after { bottom: 3px; /* 2〜6pxあたりで調整 */ } } .sc-card-title { font-size: 18px; margin: 0 0 8px; font-weight: 700; color: #000; /* ← ここを追加（黒文字に固定） */ } .sc-card-title a { color: #000; /* リンク文字も黒に */ text-decoration: none; /* 下線を消すなら追加 */ } /* a 自体は相対配置にしない（staticのまま） */ .search-cemetery-page .sc-card-title a { position: static; } /* 疑似要素で .sc-card-body 全体に透明のクリック面を被せる */ .search-cemetery-page .sc-card-title a::after { content: ""; position: absolute; inset: 0; /* ← .sc-card-body 全域を覆う */ z-index: 2; /* CTAなどと衝突する場合は③でCTA側を上に */ } .sc-card-title a:hover { color: #000; /* ホバー時も黒のままにする */ } .search-cemetery-page .sc-card-title { position: static; /* ← relative をやめるのが超重要 */ display: block; padding-bottom: 6px; color: #000; border-bottom: 1px solid #f2f2f2; /* 下線は擬似要素でなく border で */ } /* 下線をグラデーションで作成 */ .search-cemetery-page .sc-card-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: linear-gradient( to right, #000 0%, /* 最初は黒 */ #000 10%, /* 30%まで黒 */ transparent 100% /* そこから透明へ */ ); } @media (min-width: 769px) { .rc-card-title a { position: relative; /* ::after を相対配置 */ display: block; /* ブロック化 → 横幅いっぱい使う */ padding-bottom: 10px; /* 文字と線の間隔 */ color: #000 !important; /* 黒文字固定 */ } /* グラデーションの下線 */ .rc-card-title a::after { content: ""; position: absolute; left: 0; bottom: 8px; /* 値を調整して線の位置を上げ下げ */ width: 100%; /* 幅全体に線 */ height: 2px; background: linear-gradient( to right, #000 0%, #000 10%, transparent 100% ); } } @media (max-width: 768px) { .rc-card-title a { color: #000 !important; /* 黒に固定 */ text-decoration: none; /* 下線消したい場合 */ margin-top: -4px; /* 上に寄せる（数値はお好みで） */ } .rc-card-title a:hover { color: #000 !important; /* ホバー時も黒 */ } } /* 擬似要素の下線は使わない */ .search-cemetery-page .sc-card-title::after { content: none; } /* 同じ見た目のグラデ下線を背景で再現 */ .search-cemetery-page .sc-card-title { position: static; /* ← 伸びるリンクの基準を sc-card-body にする */ padding-bottom: 6px; border-bottom: none; /* ← SP側で入れてた下線があれば打ち消す */ /* ▼ 下線（左10%だけ実線→右に向かって透明） */ background-image: linear-gradient( to right, #000 0%, #000 10%, transparent 100% ); background-repeat: no-repeat; background-position: left bottom; /* 下端に配置 */ background-size: 100% 2px; /* 太さ2px */ } .rc-card-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; /* 線の太さ */ background: linear-gradient( to right, #000 0%, /* 最初は黒 */ #000 10%, /* 少しの間だけ黒 */ transparent 100% /* そこから透明へ */ ); } @media (max-width: 768px) { .rc-card-title::after { bottom: 5px; /* デフォルトより少し上に */ } } .rc-card-location { display: flex; align-items: center; margin-bottom: 15px; font-size: 14px; color: #666; } .rc-location-icon { margin-right: 5px; font-size: 12px; margin-top: -10px; /* ← 数値を調整して好みの位置に */ } .rc-address { flex: 1; font-weight: 700; margin-top: -10px; /* ← 数値を調整して好みの位置に */ } .rc-card-price { margin-bottom: 20px; min-height: 40px; display: flex; flex-direction: column; align-items: flex-start; margin-top: -10px; /* ← 数値を調整して好みの位置に */ } .rc-price-item1 { font-size: 14px; color: #333; margin-bottom: 5px; font-weight: 700; } /* 数字を強調する（単位はそのまま） */ .rc-price-value { font-size: 16px; } .rc-price-value::first-letter { color: #d42a2a; font-size: 20px; font-weight: bold; } .rc-card-action { text-align: center; margin-top: auto; } .rc-detail-btn { display: inline-block; padding: 10px 20px; background: var(--color_main); color: white; text-decoration: none; border-radius: 4px; font-size: 14px; font-weight: 500; transition: background-color 0.3s ease; } .rc-detail-btn:hover { background: #3a5a3a; color: white; } /* レスポンシブ対応（おすすめ霊園セクション） */ @media (max-width: 768px) { .recommended-cemetery-section { margin: 40px 0; padding: 30px 0; } .rc-container { padding: 0 15px; } .rc-title { font-size: 24px; } .rc-card { flex: 0 0 280px; } .rc-thumb { height: 180px; } .rc-card-body { padding: 15px; } .rc-card-title { font-size: 16px; } } /* ── パターンA：
… */ .nav-links{ display:flex !important; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px; margin:10px 0; /* ここで灰色の帯を消す */ background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; } /* ── パターンB：