/* ▼ 全体 ▼ */
* {
 scrollbar-width: thin;
 scrollbar-color: var(--dark-grey) transparent;
}

*::-webkit-scrollbar {
 width: 6px;
 height: 6px;
}

*::-webkit-scrollbar-track {
 background: transparent;
}

*::-webkit-scrollbar-thumb {
 background-color: var(--dark-grey);
 border-radius: 3px;
}

*::-webkit-scrollbar-thumb:hover {
 background-color: var(--dark-grey);
}

/* 色指定 */
:root {
 --white: #fff;
 --light-grey: #e9e6e3;
 --mid-grey: #d6d1cc;
 --dark-grey: #615e5c;
 --black: #333333;
 --main: #ec6d01;
}

html {
 font-family: "Noto Sans JP";
 font-style: normal;
 overflow-x: hidden;
 color: var(--black);
}

body {
 display: flex;
 flex-direction: column;
 min-height: 100vh;
 background-color: var(--light-grey);
}

main {
 padding: 70px 0 0;
}

footer {
 margin-top: auto;
 background-color: var(--light-grey);
}

h2 {
 font-weight: 600;
}

p {
 font-size: 14px;
 font-weight: 400;
 line-height: 1.7;
}

/* ▲ 全体 ▲ */

/* スライド */
/* =========================
   スライド外枠
========================= */

.top_slide {
 width: 100%;
 margin: 0 0 10px;
 padding: 0 10px;
 overflow: hidden;
}

@media (min-width:800px){
   .top_slide {
 margin: 0 0 20px;
}

}

.slide {
 width: 100%;
 margin: 20px 0;
 overflow: hidden;
}

/* =========================
   slick基本リセット
========================= */

.slider {
 width: 100%;
 padding: 0;
 margin: 0;
}

.slider .slick-list {
 overflow: hidden;
}

.slider .slick-track {
 display: flex;
}

.slider li {
 list-style: none;
 position: relative;
 overflow: hidden;
 border-radius: 10px;
}

/* =========================
   トップスライド
   2000:750 → 37.5%
========================= */

.topSlider li {
 padding-top: 37.5%;
}

/* =========================
   ノーマルスライド
   3:2 → 66.666%
========================= */

.normalSlider li {
 padding-top: 66.666%;
}

/* =========================
   画像トリミング共通
========================= */

.slider img {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
 object-fit: cover; /* 自動トリミング */
 object-position: center; /* 中央基準 */
}

/* ▼ フッター ▼ */

.footer_text {
 color: var(--black);
 font-size: 12px;
 padding: 10px 0;

 text-align: center;
}
/* ▲ フッター ▲ */

.content {
 width: 100%;
 max-width: 1200px;
 margin: 0 auto 20px;
 padding: 0 10px 10px;
}

@media (min-width:800px){
   .content {
       padding: 10px;

}
}

/* 検索 */
.search {
 margin: 10px 0 30px;
}

/* 検索窓 */
.freeword {
 display: inline-block;
 width: calc(100% - 40px);
}

.search-form-1 {
 display: flex;
 justify-content: space-between;
 align-items: center;
 overflow: hidden;
 border-radius: 10px;
 background-color: var(--white);
 margin: 10px 10px 0 10px;
}

.search-form-1 img {
 width: 24px;
}

.search-form-1 input {
 height: 40px;
 padding: 5px 15px;
 border: none;
 box-sizing: border-box;
 font-size: 1em;
 outline: none;
}

.search-form-1 input::placeholder {
 font-size: 14px;
 color: var(--mid-grey);
}

.search-form-1 button {
 display: flex;
 justify-content: center;
 align-items: center;
 width: 50px;
 height: 40px;
 border-left: solid 1px var(--mid-grey);
 cursor: pointer;
 transition: 0.3s;
}

.search-form-1 button::after {
 width: 24px;
 height: 24px;
}

.search-form-1 button:hover {
 background-color: var(--main) !important;
}

.search-form-1 button:hover img {
 filter: brightness(0) invert(1) !important;
}

/* 検索ボタン */
.search_button_container {
 display: flex;
 margin: 10px 10px;
 gap: 10px;
}

.search_button_container a {
 width: calc(50%);
}

.search_button {
 margin: 0px;
 border-radius: 10px;
 background-color: var(--white);
 height: 40px;
 padding: 5px 0px 5px 0px;
}

.search_button p {
 font-size: 14px;
 font-weight: 600;
 line-height: 1.2; /* 少し高さを抑える */
 margin: 0;
 /* 文字数が多い場合に備えて微調整 */
 max-width: 8em; /* 8文字分程度の幅に制限（お好みで調整） */
 overflow: hidden;
 text-overflow: ellipsis;
}

/* --- 検索ボタン（市区町村・現在地・お気に入り・カード）のホバー挙動 --- */

/* 1. ホバー時に背景を緑にする */
.search_button_container a:hover .search_button {
 background-color: var(--main);
 transition: 0.3s;
}

/* 2. ホバー時に文字を白にする */
.search_button_container a:hover .search_button p {
 color: var(--white);
}

/* 3. ホバー時にアイコンを白くする (filter使用) */
.search_button_container a:hover .search_button img {
 filter: brightness(0) invert(1);
}

/* 4. タップ・クリック時の枠線などの微調整（必要に応じて） */
.search_button_container a:active .search_button {
 opacity: 0.8;
}

.search_button img {
 width: 24px;
 height: 24px;
 margin-right: 2px; /* アイコンと文字の間隔（お好みで0〜4px） */
 flex-shrink: 0;
}

.search_button_text {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 6px;
 height: 30px;
 white-space: nowrap;
 overflow: visible; /* はみ出しを許容して省略を防ぐ */
}

.cp_tab img {
 width: 24px;
 margin-right: 8px;
}
/* カテゴリ検索タブメニュー */
.cp_tab *,
.cp_tab *:before,
.cp_tab *:after {
 box-sizing: border-box;
}
.cp_tab {
 background-color: var(--white);
 border-radius: 10px;
 border: solid 1px var(--mid-grey);
 margin: 0 10px;
 position: relative;
 color: var(--black);
}

.cp_tab input[type="radio"] {
 margin: 0;
 padding: 0;
 border: none;
 border-radius: 0;
 outline: none;
 background: none;
 appearance: none;
 display: none;
}
.cp_tab .cp_tabpanel {
 display: none;
}
.cp_tab > input:first-child:checked ~ .cp_tabpanels > .cp_tabpanel:first-child,
.cp_tab
 > input:nth-child(3):checked
 ~ .cp_tabpanels
 > .cp_tabpanel:nth-child(2),
.cp_tab
 > input:nth-child(5):checked
 ~ .cp_tabpanels
 > .cp_tabpanel:nth-child(3),
.cp_tab
 > input:nth-child(7):checked
 ~ .cp_tabpanels
 > .cp_tabpanel:nth-child(4),
.cp_tab
 > input:nth-child(9):checked
 ~ .cp_tabpanels
 > .cp_tabpanel:nth-child(5),
.cp_tab
 > input:nth-child(11):checked
 ~ .cp_tabpanels
 > .cp_tabpanel:nth-child(6) {
 display: block;
}
.cp_tab .cp_tabpanels {
 position: absolute;
 top: 0;
 left: calc(50% + 10px);
 display: block;
 height: 200px;
 width: calc(50% - 10px);
}
.cp_tab > input + label {
 position: relative;
 font-weight: 600;
 font-size: 14px;
 z-index: 100;
 top: 0px;
 left: 0px;
 height: 40px;
 display: flex;
 align-items: center;
 width: calc(50%);
 cursor: pointer;
 border-bottom: solid 1px var(--mid-grey);
 border-right: 1px solid var(--mid-grey);
}

.cp_tab > input + label:last-of-type {
 margin-bottom: 0px;
 border-bottom: none;
}
/* --- タブ切り替えの修正（角丸維持版） --- */

/* ホバー時およびチェック時の基本挙動 */
.cp_tab > label:hover,
.cp_tab > input:focus + label,
.cp_tab > input:checked + label {
 background-color: var(--main);
 color: var(--white) !important;
 transition: 0.3s;
 border-color: var(--main);
}

/* アイコンを白くする */
.cp_tab > label:hover img,
.cp_tab > input:focus + label img,
.cp_tab > input:checked + label img {
 filter: brightness(0) invert(1);
}

/* 選択中の右境界線を緑に */
.cp_tab > input:checked + label {
 border-right: 1px solid var(--main);
}

/* ▼ 角丸を復活させるための指定 ▼ */

/* 一番上のラベル（食べる・飲む）の左上を丸く */
.cp_tab > label:first-of-type {
 border-top-left-radius: 10px;
}

/* 一番下のラベル（車・仕事・その他）の左下を丸く */
.cp_tab > label:last-of-type {
 border-bottom-left-radius: 10px;
}

.cp_tab > label {
 justify-content: center;
}

.category_list {
 height: 250px;
}

.cp_tabpanel ul {
 font-weight: 400;
 overflow: scroll;
 height: 200px;
 padding: 10px;
 list-style: none;
}

.cp_tabpanel ul li {
 padding: 10px 0;
 font-size: 14px;
 display: flex; /* 点とリストを横並びに */
 align-items: center; /* 垂直方向に中央揃い */
}

.cp_tabpanel ul li::before {
 content: "⚫︎"; /* 記号(黒丸)を挿入 */
 color: var(--main); /* 好きな色にする */
 font-size: 10px; /* 黒丸の大きさに差異があるので調整 */
 margin-right: 5px; /* 余白 */
}

/* タブ全体の囲み線を消す */
.cp_tab,
.cp_tab_wrap,
.tab_area {
 border: none !important;
 box-shadow: none !important;
}

/* 店舗一覧 */
.store {
 margin: 20px 0;
}

/* 吹き出し東京 緑 */
.speechBubble {
 position: relative;
 display: inline-block;
 margin-bottom: 20px;
 margin-left: 10px;
 padding: 10px 20px 10px 20px;
 border-radius: 20px;
 text-align: left;
 font-size: 14px;
 font-weight: 600;
 line-height: 1;
 background-color: var(--main);
 color: white;
}

.speechBubble::after {
 content: "";
 position: absolute;
 bottom: 0;
 left: 30px;
 border-style: solid;
 border-width: 16px 12px 0 0;
 border-color: var(--main) transparent transparent;
 translate: calc(-50% - 0.4px) 100%;
}

.store_container {
 display: flex;
 flex-wrap: wrap;
 margin-bottom: 10px;
 padding: 5px;
}

@media (max-width: 800px) {
 .store_container {
  margin-bottom: 15px;
 }
}

.store_container a {
 width: 50%;
}

@media (max-width: 800px) {
 .store_container {
  display: block;
 }
}

.store_content {
 background-color: var(--white);
 display: flex;
 margin: 5px;
 height: 120px;
 border-radius: 10px;
 overflow: hidden;
 position: relative;
 z-index: 1;
}

@media (max-width: 800px) {
 .store_content {
  margin-bottom: 10px;
 }
}

.store_content img {
 width: 120px;
 height: 120px;
 object-fit: cover;
 object-position: center;
 display: block;
 flex-shrink: 0;
}

.store_text {
 padding: 12px;
 width: 100%;
}

.store_name {
 font-size: 16px;
 font-weight: 600;
 margin-bottom: 6px;
 margin-top: 2px;
 display: -webkit-box;
 -webkit-box-orient: vertical;
 -webkit-line-clamp: 1; /* ←ここを2行に設定 */
 overflow: hidden;
}

.store_comment {
 margin-bottom: 20px;
 display: -webkit-box;
 -webkit-box-orient: vertical;
 -webkit-line-clamp: 1; /* ←ここを2行に設定 */
 overflow: hidden;
}

.store_caption {
 margin-bottom: 20px;
 display: -webkit-box;
 -webkit-box-orient: vertical;
 -webkit-line-clamp: 1; /* ←ここを2行に設定 */
 overflow: hidden;
}

.store_address {
 margin-right: 30px;
 display: -webkit-box;
 -webkit-box-orient: vertical;
 -webkit-line-clamp: 1; /* ←ここを2行に設定 */
 overflow: hidden;
}

/* お気に入りボタン */
.btn {
 position: absolute;
 right: 10px;
 bottom: 10px;
 z-index: 10;
 display: flex;
 align-items: center;
 justify-content: center;
 background-image: url(../ico/favorite_off.svg);
 background-repeat: no-repeat;
 background-size: contain;
 width: 24px;
 height: 24px;
 cursor: pointer;
}

.checkbox {
 display: none;
}

.checkbox:checked + .btn {
 background-image: url(../ico/favorite_on.svg);
}

/* お知らせ */
.info {
 margin-top: 0px;
}

.modal-info {
 margin-top: 0;
 padding-top: 10px;
 padding-bottom: 10px;
}

@media (max-width: 800px) {
 .info {
  margin-top: 10px;
 }

 .modal-info {
  padding-top: 10px;
  margin-top: 0px;
 }
}

.info_container {
 background-color: var(--white);
 padding: 20px;
 margin: 10px;
 border-radius: 10px;
}

.info_section {
 margin-bottom: 10px;
 border-bottom: solid 1px var(--mid-grey);
}

.info_date {
 font-size: 14px;
 font-weight: 400;
 color: var(--dark-grey);
}

.info_text {
 margin-bottom: 10px;
}

.more {
 display: block;
 text-align: center;
 vertical-align: middle;
 text-decoration: none;
 width: 200px;
 margin: 40px auto 20px;
 padding: 10px;
 font-weight: 600;
 border: 1px solid var(--main);
 color: var(--main);
 border-radius: 20px;
 transition: 0.5s;
 font-size: 14px;
}
.more:hover {
 color: var(--white);
 background: var(--main);
}

/* 検索結果ページ */

/* ページネーション */
.pagination {
 display: flex;
 flex-flow: row wrap;
 justify-content: center;
 gap: 10px;
}
.pagination li a,
.pagination li span {
 display: flex; /* ←ここを変更 */
 align-items: center; /* 縦中央 */
 justify-content: center; /* 横中央 */
 color: var(--black);
 height: 40px;
 width: 40px;
 background-color: var(--white);
 border-radius: 10px;
 text-decoration: none; /* リンク下線消去 */
}

.pagination li span {
 color: var(--white);
 background-color: var(--main);
}
.pagination li a:hover {
 color: var(--white);
 background-color: var(--main);
}
.pagination li a.prev::before {
 font-family: "Font Awesome 5 Free";
 content: "\f053";
 font-size: 0.8rem;
 font-weight: 900;
}
.pagination li a.next::after {
 font-family: "Font Awesome 5 Free";
 content: "\f054";
 font-size: 0.8rem;
 font-weight: 900;
}

/* 店舗ページ */

/* アイコン類 */
.article_icon_container {
 display: flex;
 width: 300px;
 margin: 0 auto;
}

.article_icon img {
 width: 30px;
 height: 30px;
 margin: 0 10px;
}

.article_icon {
 display: block;
 width: 50px;
}

.article_icon_text {
 color: var(--dark-grey);
 text-align: center;
 font-size: 12px;
 font-weight: 400;
}

.article_icon :hover {
 color: var(--main);
}

/* 店舗情報 */

.article_content {
 background-color: var(--white);
 border-radius: 10px;
 padding: 20px;
 margin: 0 10px 10px;
}

.article_content p {
 font-size: 16px;
 line-height: 28px;
 text-align: justify;
}
.article_category {
 background-color: var(--main);
 border-radius: 10px;
 color: var(--white);
 font-size: 14px;
 padding: 5px 10px;
 margin-bottom: 10px;
 display: inline-block;
}

.article_comment {
 margin-bottom: 20px;
}

.article_name {
 font-size: 22px;
 font-weight: 600;
 margin-bottom: 16px;
}

/* カード提示特典・優待割引の表 */
.article_content table {
 margin-top: 20px;
}

.article_content td {
 border-top: 1px solid var(--mid-grey);
 border-bottom: 1px solid var(--mid-grey);
 border-collapse: collapse;
 padding: 10px;
 line-height: 24px;
 font-size: 14px;
}

.article_content a {
 overflow-wrap: anywhere;
 word-break: break-word;
 text-decoration: underline;
}

/* マップ */
.map {
 position: relative;
 width: calc(100% - 20px);
 padding-top: 60%;
 height: 0;
 margin: 10px 10px 20px 10px;
 border-radius: 10px;
 border: solid 1px var(--mid-grey);
}

.map iframe {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 border-radius: 10px;
}

/* 住所検索 */
.address_container {
 display: flex;
 background-color: var(--white);
 border-radius: 10px;
 border: solid 1px var(--mid-grey);
 margin: 10px;
}

.address_container ul {
 font-weight: 700;
 font-size: 20px;
 padding: 10px;
 list-style: none;
 width: 50%;
}

.address_container ul li {
 padding: 15px 10px;
 display: flex; /* 点とリストを横並びに */
 align-items: center; /* 垂直方向に中央揃い */
}

.address_container ul li::before {
 content: "⚫︎"; /* 記号(黒丸)を挿入 */
 color: var(--main); /* 好きな色にする */
 font-size: 10px; /* 黒丸の大きさに差異があるので調整 */
 margin-right: 5px; /* 余白 */
}

.address_title {
 font-size: 16px;
 font-weight: 700;
 padding: 10px;
 color: var(--main);
}

/* お気に入り */
.print .article_icon {
 margin: 0 0 0 auto;
}

/* カード */
.card {
 margin: 0;
 background-color: var(--light-grey);
 position: relative;
 display: flex;
 justify-content: center;
 align-items: center;
 height: 90dvh; /* PC・スマホ共通で画面高さいっぱい */
 overflow: hidden; /* スクロールなし */
}

/* 画像（高さ基準に統一） */
.card img {
 display: block;
 width: 100%;
 max-width: 100%;
 height: auto;
 max-height: 100dvh;
 object-fit: contain;
}

/* 戻るボタン */
.back_button {
 position: absolute;
 top: 10px;
 right: 10px;
}

/* 閉じるボタン（枠なし） */
.card button {
 background: none;
 border: none;
 color: var(--black);
 font-size: 30px;
 font-weight: 400;
 padding: 0;
 cursor: pointer;
}

/* =========================
   認証モーダル
========================= */

.auth-modal {
 position: fixed;
 inset: 0;
 z-index: 9998;
 display: flex;
 align-items: center;
 justify-content: center;
 visibility: hidden;
 opacity: 0;
 transition: opacity 0.3s ease;
}

.auth-modal.is-active {
 visibility: visible;
 opacity: 1;
}

.auth-modal-overlay {
 position: absolute;
 inset: 0;
 background: rgba(0, 0, 0, 0.6);
}

.auth-modal-content {
 position: relative;
 z-index: 2;
 width: 90%;
 max-width: 360px;
 background: var(--white);
 border-radius: 16px;
 padding: 32px 24px;
 transform: scale(0.9);
 transition: transform 0.3s cubic-bezier(0.33, 1, 0.68, 1);
}

.auth-modal.is-active .auth-modal-content {
 transform: scale(1);
}

.auth-close-btn {
 position: absolute;
 top: 12px;
 right: 16px;
 background: none;
 border: none;
 font-size: 24px;
 color: var(--dark-grey);
 cursor: pointer;
 line-height: 1;
 padding: 0;
}

.auth-inner {
 display: flex;
 flex-direction: column;
 align-items: center;
 text-align: center;
 gap: 12px;
}

.auth-title {
 font-size: 20px;
 font-weight: 700;
 color: var(--main);
 margin: 0;
}

.auth-desc {
 font-size: 16px;
 color: var(--dark-grey);
 margin: 0;
}

.auth-note {
 font-size: 16px;
 color: var(--dark-grey);
 margin: 0;
 text-align: center;
}

.auth-form {
 width: 100%;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 10px;
}

.auth-input {
 width: 100%;
 padding: 10px 14px;
 border: 1px solid var(--mid-grey);
 border-radius: 8px;
 font-size: 16px;
 outline: none;
 box-sizing: border-box;
}

.auth-input:focus {
 border-color: var(--main);
}

.auth-error {
 color: #d9534f;
 font-size: 16px;
 margin: 0;
}

.auth-submit {
 width: 100%;
 padding: 12px;
 background: var(--main);
 color: var(--white);
 border: none;
 border-radius: 8px;
 font-size: 16px;
 font-weight: 600;
 cursor: pointer;
}

.auth-submit:hover {
 opacity: 0.85;
}

/* =========================
   カードモーダル
========================= */

.card-modal {
 position: fixed;
 inset: 0;
 z-index: 9999;

 display: flex;
 align-items: flex-end;

 visibility: hidden;
 opacity: 0;
 transition: opacity 0.3s ease;
}

.card-modal.is-active {
 visibility: visible;
 opacity: 1;
}

.card-modal-overlay {
 position: absolute;
 inset: 0;
 background: rgba(0, 0, 0, 0.6);
}

.card-modal-content {
 position: relative;
 z-index: 2;
 width: 100%;
 height: 90vh;
 max-height: 90vh;

 background: var(--light-grey);
 border-radius: 20px 20px 0 0;

 display: flex;
 justify-content: center;
 align-items: center;

 transform: translateY(100%);
 transition: transform 0.4s cubic-bezier(0.33, 1, 0.68, 1);
}

.card-modal.is-active .card-modal-content {
 transform: translateY(0);
}

.card-modal-content img {
 height: 90%;
 width: auto;
 object-fit: contain;
}

.card-close-btn {
 position: absolute;
 top: 20px;
 right: 20px;

 background: none;
 border: none;
 font-size: 28px;
 color: var(--dark-grey);
 cursor: pointer;
}

/* エリア */

.prefectures_accordion .accordion_button {
 width: 100%;
 text-align: left;
 padding: 12px;
 border: none;
 background: var(--white);
 margin-top: 10px;
 border-radius: 10px;
 font-size: 1rem;
 font-weight: 600;
 cursor: pointer;
}

.prefectures_accordion .panel {
 display: none;
}

.prefectures_accordion .panel.open {
 display: block;
}

.prefectures_accordion .row_button {
 width: 100%;
 text-align: left;
 padding: 8px;
 cursor: pointer;
 font-weight: 600;
}

.prefectures_accordion .row_button:first-child {
 width: 100%;
 text-align: left;
 padding: 8px 12px;
 border-top: none;
 cursor: pointer;
 font-weight: 400;
 font-size: 14px;
}

.prefectures_accordion .row {
 border-radius: 10px;
 margin-top: 5px;
 overflow: hidden;
}

.prefectures_accordion .mun-list {
 list-style: none;
 padding: 6px 0 0 0;
 margin: 0;
 display: flex;
 flex-wrap: wrap;
 gap: 0px;
 background-color: var(--white);
}

.prefectures_accordion .mun-list li {
 background: var(--light-grey);
 padding: 6px 10px;
 border-radius: 10px;
 margin: 10px 0px 14px 14px;
 font-weight: 400;
 font-size: 14px;
}

.prefectures_accordion a {
 color: inherit;
 text-decoration: none;
 display: block;
}

.prefectures_accordion .accordion_button::after {
 content: "+";
 float: right;
 font-size: 1.2rem;
}

.prefectures_accordion .accordion_button[aria-expanded="true"]::after {
 content: "−";
}

.prefectures_accordion .accordion_button[aria-expanded="true"] {
 background: var(--main);
 color: var(--white);
}

.prefectures_accordion .row_button::after {
 content: "+";
 float: right;
 font-size: 1.1rem;
}

.prefectures_accordion .row_button {
 background: var(--white);
 color: inherit;
}

.prefectures_accordion .row_button[aria-expanded="true"]::after {
 content: "−";
}

.prefectures_accordion .row_button[aria-expanded="true"] {
 background: var(--dark-grey);
 color: var(--white);
}

.pref-search {
 margin: 0 10px auto;
}

/* ハンバーガーメニュー */
.menu-btn {
 background: none;
 border: none;
 padding: 0;
 cursor: pointer;
 width: 40px;
 height: 40px;
 display: block;
 align-items: center;
 justify-content: center;
}

.menu-icon {
 display: inline-block;
 width: 20px;
 height: 28px;
 margin-left: 10px;
}

.menu-icon span {
 display: block;
 height: 2px;
 width: 100%;
 background: var(--dark-grey);
 border-radius: 2px;
 margin: 6px 0;
 transition: all 0.3s;
}

.menu-btn:hover .menu-icon span {
 background: var(--main);
}

/* モーダル用CSS */
.menu-modal {
 position: fixed;
 inset: 0;
 z-index: 9999;
 display: flex;
 align-items: flex-end;
 visibility: hidden;
 opacity: 0;
 transition: opacity 0.3s ease;
}

/* メニューが開いた時 */
.menu-modal.is-active {
 visibility: visible;
 opacity: 1;
}

/* 背景を暗くするオーバーレイ */
.menu-modal-overlay {
 position: absolute;
 inset: 0;
 background: rgba(0, 0, 0, 0.6); /* ← 暗さ調整可 */
}

/* 下から出るメニュー本体 */
.menu-modal-content {
 position: relative;
 z-index: 2;
 background: var(--light-grey);
 width: 100vw;
 height: 90vh;
 max-height: 90vh;

 border-radius: 20px 20px 0 0;
 overflow-y: auto;

 transform: translateY(100%);
 transition: transform 0.4s cubic-bezier(0.33, 1, 0.68, 1);
}

.menu-modal.is-active .menu-modal-content {
 transform: translateY(0);
}

.menu-modal-content .content {
 padding-top: 20px;
}

/* 閉じるボタンを見やすく調整 */
.close-btn {
 position: absolute; /* menu-modal-contentに対して絶対配置 */
 top: 12px;
 right: 16px;
 z-index: 10001;
 background: none;
 border: none;
 font-size: 28px;
 color: var(--dark-grey);
 cursor: pointer;
 visibility: hidden;
 opacity: 0;
 transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* モーダル開時はボタンを表示 */
.menu-modal.is-active .close-btn {
 visibility: visible;
 opacity: 1;
}

/* ヘッダー */

.mainlogo img {
 width: 100%;
 display: block;
 margin-left: 0;
 max-width: 240px;
}

.mainlogo {
 display: block;
}

.header {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 background-color: #fff;
 box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
 transition: transform 0.3s ease;
 z-index: 1000;
}

.header__inner {
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin: 0 auto;
 padding: 5px 15px 5px 20px;
}

/* ヘッダーを隠すクラス */
.header--hidden {
 transform: translateY(-100%);
}

.article_img {
 display: block;
 margin: 10px auto;
 width: 100%;
}

.article_hr {
 color: var(--mid-grey);
 margin: 20px 0;
}
.dokencard_button {
 display: inline-block !important; /* 他の指定を強制上書き */
 transform: scaleX(0.8);
 transform-origin: left center; /* 左端を起点にしてアイコンに密着させる */

 /* 省略（...）を解除する設定 */
 overflow: visible !important;
 text-overflow: clip !important;
 display: block !important;
 -webkit-line-clamp: none !important;
 -webkit-box-orient: horizontal !important;

 /* 文字の占有幅を調整 */
 width: auto !important;
 margin-right: -2.5em; /* 縮小して余った右側の空白を削る（文字数に合わせて調整） */

 font-size: 14px;
 font-weight: 600;
 line-height: 1;
}

/*　住所選択結果での絞り込み */
/*　住所選択結果での絞り込み（幅の微調整版） */

.filter-buttons {
 display: grid;
 /* 1列の最小幅を少し広げて、隙間(gap)を10pxに固定 */
 grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
 gap: 10px;
 /* 左右の余白を他の要素（.cp_tabなど）と同じ 10px に設定 */
 margin: 0px 10px 30px;
}

@media (max-width: 1200px) {
 .filter-buttons {
  /* スマホ・タブレットで3列にする際、左右の余白を 10px に維持 */
  grid-template-columns: repeat(3, 1fr);
  gap: 5px; /* 隙間を10pxで統一 */
  margin: -10px 10px 30px 10px;
 }
}

.filter-btn {
 /* ボタン自体の幅を100%にして、グリッドの枠いっぱいに広げる */
 width: 100%;
 padding: 4px 8px;
 display: flex;
 align-items: center;
 justify-content: center;
 background: var(--white);
 cursor: pointer;
 border-radius: 10px;
 color: var(--black);
 flex-wrap: nowrap; /* 改行を防いで1行に収める */
 gap: 10px;
 font-size: 14px;
 height: 40px;
 transition: all 0.3s ease;
 font-weight: 600;
 overflow: hidden;
 box-sizing: border-box; /* 枠線を含めた幅計算にする */
}
@media (max-width: 599px) {
 .filter-btn {
  font-size: 12px;
  height: 35px;
 }
}

/* ホバー・アクティブ時の挙動は維持 */
.filter-btn:hover,
.filter-btn.active {
 background-color: var(--main) !important;
 color: var(--white) !important;
 border-color: var(--main) !important;
}

.filter-icon {
 display: none;
 width: 26px;
 height: 26px;
}

@media (min-width: 800px) {
 .filter-icon {
  display: inline-block;
 }
}

.filter-btn:hover img,
.filter-btn.active img {
 filter: brightness(0) invert(1);
}

/* ================================
   土建リンク
================================ */

.doken_link {
 display: flex;
 flex-direction: column;
 width: calc(100% - 10px);
 margin: 20px 5px;
 padding: 0;
 gap: 10px;
 list-style: none;
}

.doken_link li {
 flex: none;
 width: 100%;
 background-color: var(--dark-grey);
 border-radius: 10px;
 overflow: hidden;
 transition: all 0.3s ease;
}

.doken_link li a {
 display: flex;
 align-items: center;
 justify-content: center;
 text-align: center;
 text-decoration: none;
 color: var(--white);
 font-weight: 600;
 padding: 14px 10px;
 font-size: 14px;
 width: 100%;
 height: 100%;
 transition: all 0.3s ease;
}

/* hover効果 */
.doken_link li:hover {
 background-color: var(--main);
 transform: translateY(-3px);
}

.doken_link li:hover a {
 color: var(--white);
}

/* ================================
   レスポンシブ
================================ */

/* タブレット */
@media (max-width: 1024px) {
}

/* スマホ */
@media (max-width: 600px) {
}

/* ================================
   PC フォントサイズ（16px基準）
================================ */
@media (min-width: 800px) {
 p {
  font-size: 16px;
 }
 .store_name {
  font-size: 18px;
 }
 .store_comment {
  margin-bottom: 14px;
 }
 .search-form-1 input::placeholder {
  font-size: 16px;
 }
 .search_button p {
  font-size: 16px;
 }
 .cp_tab > input + label {
  font-size: 16px;
 }
 .cp_tabpanel ul li {
  font-size: 16px;
  padding: 9px 0;
 }
 .speechBubble {
  font-size: 16px;
 }
 .info_date {
  font-size: 16px;
 }
 .more {
  font-size: 16px;
 }
 .article_category {
  font-size: 16px;
 }
 .article_content td {
  font-size: 16px;
 }
 .article_icon_text {
  font-size: 14px;
 }
 .prefectures_accordion .row_button:first-child {
  font-size: 16px;
 }
 .prefectures_accordion .mun-list li {
  font-size: 16px;
 }
 .dokencard_button {
  font-size: 16px;
  transform: scaleX(1);
  margin-right: 0;
 }
 .filter-btn {
  font-size: 16px;
 }
 .doken_link li a {
  font-size: 16px;
 }
}