:root { --accent: #c70000; } @keyframes spin3 { 0%, 100% { box-shadow: 10px 10px rgba(35, 35, 35, 1), -10px 10px rgba(35, 35, 35, 0.2), -10px -10px rgba(35, 35, 35, 1), 10px -10px rgba(35, 35, 35, 0.2); } 25% { box-shadow: -10px 10px rgba(35, 35, 35, 0.2), -10px -10px rgba(35, 35, 35, 1), 10px -10px rgba(35, 35, 35, 0.2), 10px 10px rgba(35, 35, 35, 1); } 50% { box-shadow: -10px -10px rgba(35, 35, 35, 1), 10px -10px rgba(35, 35, 35, 0.2), 10px 10px rgba(35, 35, 35, 1), -10px 10px rgba(35, 35, 35, 0.2); } 75% { box-shadow: 10px -10px rgba(35, 35, 35, 0.2), 10px 10px rgba(35, 35, 35, 1), -10px 10px rgba(35, 35, 35, 0.2), -10px -10px rgba(35, 35, 35, 1); } } #wpadminbar { top: 0 !important; } #c27-site-wrapper { background-color: #efefef }/* GOJAPAN関連URLの色を赤にする */ .gojapanurl a { color: #c70000 !important ; } .gojapanurl h5 { color: #c70000 !important ; } /* MyListingロケーションボタンのスタイル　表示場所例）https://gosanpo.com/listing/4088 */ .location-address a { /* ボタンの見た目のためのスタイルはそのまま残す */ display: inline-block; background-color: #000000; color: #ffffff !important; padding: 8px 15px; border-radius: 30px; text-decoration: none; font-weight: 600; transition: background-color 0.3s ease; } /* ステップ2: ::before を使って、アイコンと新しいテキストを表示する */ .location-address a::before { /* アイコンのコードと、表示したい新しいテキストを両方書く */ content: "\f5eb"; /* ← ここで新しいテキストを指定 */ /* アイコンとテキストのスタイルを設定 */ font-family: "Font Awesome 5 Free"; /* サイトに合ったフォントを指定 */ font-weight: 900; font-size: 16px; /* ← 重要！非表示にした文字サイズを元に戻す */ vertical-align: middle; /* 垂直方向の中央揃えを調整 */ margin-right: 5px; /* 必要に応じて余白を追加 */ } /* ボタンにマウスを乗せた時のスタイル */ .location-address a:hover { background-color: #333333; color: #ffffff !important; } /* Listing Type 場所のSNS ① まずはPC（大きい画面）で非表示にする */ #lineshare { display: none; } #lineshare h5 { display: none; } /* ② 画面の横幅が767px以下（一般的なスマホのサイズ）の場合に表示する */ @media screen and (max-width: 767px) { #lineshare { display: block; /* もしくは inline-block など、デザインに合わせて調整してください */ } } /* 前回のCSSはそのまま */ .share-buttons-container { display: flex; align-items: center; gap: 15px; justify-content: center; /* ← この一行を追加して中央揃えにする */ } .share-image-btn { width: 64px; height: auto; vertical-align: middle; transition: opacity 0.3s ease; } .share-image-btn:hover { opacity: 0.75; } /* ▼▼ ここから追加 ▼▼ */ /* モーダルの背景 */ .qr-modal { display: none; /* 初期状態では非表示 */ position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.6); } /* モーダルのコンテンツ部分 */ .qr-modal-content { background-color: #fff; margin: 15% auto; padding: 20px; border: 1px solid #888; width: 220px; /* QRコードに合わせたサイズ */ text-align: center; border-radius: 10px; position: relative; box-sizing: border-box; /* ← この一行を追加 */ } /* 閉じるボタン */ .qr-modal-close { color: #aaa; position: absolute; top: 10px; right: 15px; font-size: 28px; font-weight: bold; } .qr-modal-close:hover, .qr-modal-close:focus { color: black; text-decoration: none; cursor: pointer; } /* QRコードが表示されるエリアの調整 */ #qrcode img { margin: 0 auto; }