/* This is a CSS file */
/* color.css - 色に関するテーマ */

/*//メイン色変数//*/
:root {
  --color-primary:     #bfa2db;  /* 藤色：主テーマ */
  --color-secondary:   #ede4f3;  /* 薄藤：補助背景 */
  --color-background:  #fdfaff;
  --color-surface:     #ffffff;
  --color-error:       #e53935;
  
  --color-on-primary:  #fff;
  --color-on-secondary:#3f2d56;
  --color-on-surface:  #3f2d56;
  --color-on-background: #3f2d56;
  --section-heading-color: #0b3c91; /* 濃い青：統一見出し色 */
  
/*/ピンク系変数/:/
:root {
  /* === 基本ピンク系テーマ === */
  --color-pink-light:  #ffe4ec;  /* ごく薄いピンク（背景） */
  --color-pink:        #f48fb1;  /* メインピンク（ボタン等） */
  --color-pink-deep:   #ec407a;  /* 濃いピンク（アクセント） */
  --color-pink-text:   #880e4f;  /* 深い紫がかったピンク（本文・見出し） */
  
}

:root {
  --button-gradient: linear-gradient(to bottom, #64b5f6, #42a5f5);
  /* 通常時の背景グラデーション色 */

  --button-border: #fff;
  /* ボタンの境界線（白） */

  --button-shadow: rgba(76, 175, 245, 0.21);
  /* ボタン周囲のシャドウ色 */

  --button-hover-gradient: linear-gradient(to bottom, #2196f3, #1976d2);
  /* ホバー時の背景グラデーション色 */
}


:root {
  --button-gradient: linear-gradient(to bottom, #64b5f6, #42a5f5);
  --button-border: #fff;
  --button-shadow: rgba(76, 175, 245, 0.21);
  --button-hover-gradient: linear-gradient(to bottom, #2196f3, #1976d2);
}

/*//赤枠//*/
.alert-red {
  border-color: #d32f2f;
  background-color: #fff0f0;
}

.alert-red .alert-title {
  background-color: #d32f2f;
  color: #fff;
}

.alert-red .alert-button a {
  background-color: #d32f2f;
}

.alert-red .alert-button a:hover {
  background-color: #b71c1c;
}

/*//黄色枠ゆず色に変更#FCE27D//*/
.alert-yellow {
  border-color: #FCE27D;
  background-color: #fffde7;
}

.alert-yellow .alert-title {
  background-color: #FCE27D;
  color: #333;
}

.alert-yellow .alert-button a {
  background-color: #F6C555;
  color: #333;
}
.alert-yellow .alert-button a:hover {
  background-color: yellow;
}

/*//青色枠//*/
.alert-blue {
  border-color: #2196f3;
  background-color: #e3f2fd;
}

.alert-blue .alert-title {
  background-color: #2196f3;
  color: #fff;
}

.alert-blue .alert-button a {
  background-color: #2196f3;
  color: #fff;
}
.alert-blue .alert-button a:hover {
  background-color: #1976d2;
}

/* --- グローバルナビ（header.html用）カラー部分 --- */



.button-grid a {
  background-color: #ffffff;
  color: var(--color-fuji-text); /* 例：#3f2d56 上品な濃紫 */
  border: 2px solid var(--color-fuji); /* 例：#bfa2db 藤色枠 */
  box-shadow: 0 4px 8px rgba(191, 162, 219, 0.3); /* 藤色っぽい影 */
}

/* ホバー/フォーカス時の色 */
.button-grid a:hover,
.button-grid a:focus {
  background-color: #f3e9fb; /* ほんのり紫がかった白 */
  border-color: #a88dc8;     /* 少し濃い藤色 */
  color: var(--color-fuji-text);
  transform: translateY(-2px);
}

/*//ホームページテーマカラー//*/
/* ページ全体背景色（例） */
body {
  background-color: var(--color-secondary);
}

/* ヘッダー背景色（全体色調整ならbodyへも指定可） */
.header {
  background: linear-gradient(to bottom, #bfa2db, #ede4f3);
}

/* フッター背景色（グラデーション） */
.footer {
  background: linear-gradient(to bottom,#ede4f3,#bfa2db);
  color: white;
  padding: 1.5rem 1rem;
  text-align: center;
}

/*//ナビボタンTOPHOMETEL//*/
.fixed-buttons a {
  color: var(--color-pink-text);/*ナビボタンの文字*/
}

.fixed-buttons span {
  background-color: var(--color-pink-light);/*ナビボタン背景*/
}

.fixed-buttons span:hover {
  background-color: var(--color-pink-deep);/*ナビボタンホバー時*/
}

/*//店舗カテゴリボタン背景色//*/
.category-button {
  background-color:var(--color-pink);
  color: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.category-button:hover {
  background-color: var(--color-pink-deep);; /* 好みで調整 */
  cursor: pointer;
}

/*//店舗カードカラー//*/
/* === color.css に入れるべき変数 === */
:root {
  --color-shop-bg: #fffaf0;
  --color-shop-border: #e0c97f;
  --color-text-main: #333;
  --color-text-bold: #000;
  --color-support-ok: red;
  --color-support-ng: gray;
}

/*//店舗カード対応有無表示//*/
.badge {
  padding: 0.2rem 0.6rem;
  border-radius: 12px;
  font-size: 0.8rem;
  color: white;
  font-weight: bold;
}

.badge-yes {
  background-color: red; /* 対応時の色（青系） */
}

.badge-no {
  background-color: #aaa;     /* 非対応時の色（グレー系） */
}

.shop-name {
  font-weight: bold;
  font-size: 1.2rem;
  color: #333;

  /* ✅ 白いフチ取り */
  text-shadow:
    -1px -1px 0 #fff,
     1px -1px 0 #fff,
    -1px  1px 0 #fff,
     1px  1px 0 #fff;
}

/*//特定店舗のカード色変更//*/
.shop-card.highlight {
  background-color: var(--color-on-background);  /* 上品な薄紫 */
  border: 2px solid #bfa2db;  /* 藤色の枠線 */
  color: white;               /* ★ 全体の文字を白に */
}

.shop-card.highlight .shop-name,
.shop-card.highlight .shop-district,
.shop-card.highlight .shop-category,
.shop-card.highlight .shop-address,
.shop-card.highlight .shop-tel,
.shop-card.highlight .shop-support {
  color: white;  /* ★ 各要素の文字色も白に明示 */
}


/*//トップページ常設チラシ//*/
.pdf-button {
  background-color: var(--color-pink); 
  color: white;
  padding: 8px 16px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  transition: background-color 0.3s ease;
}

.pdf-button:hover {
  background-color: var( --color-pink-deep);  
}

/*//ふじちゃん専用常設ウィンドウ①origin-window-notice//*/
.alert-origin {
  border-color: var(--color-pink-text); 
  background-color: #fffde7;
}

.alert-origin .alert-title {
  background-color: var(--color-pink-light); 
  color: #333;
}

.alert-origin .alert-button a {
  background-color: var(--color-pink-light); 
  color: #333;
}
.alert-origin .alert-button a:hover {
  background-color: var(--color-pink-light); 
}

/*//お知らせカード色//*/
.news-card {
  background-color: #fff;
  border: 1px solid #ccc;
  border-left: 5px solid #f9b000;
}

/*//重要なお知らせカード色//*/
.important-card {
  border-left: 5px solid red; /* ピンク系 */
  background-color: #fff;    
}

/*/////////*/
/*//ふじちゃん専用常設ウィンドウ①origin-window-notice//*/
.alert-origin-F {
  border-color: var(--color-pink-text); 
  background-color: #fffde7;
}

.alert-origin-F .alert-title {
  background-color: var(--color-primary); 
  color: #333;
}

.alert-origin-F .alert-button a {
  background-color: var(--color-pink-light); 
  color: #333;
}
.alert-origin-F .alert-button a:hover {
  background-color: var(--color-pink-light); 
}


/*//利用規約ボタン//*/
/* 藤の花をテーマにしたリンクボタン（色・装飾） */
.tokutei-button {
  background: linear-gradient(to bottom right, #dcd0e8, #b497bd);
  color: #4b3b58;
  text-decoration: none;
  box-shadow: 0 4px 8px rgba(180, 151, 189, 0.4);
  transition: all 0.3s ease;
}

.tokutei-button:hover {
  background: linear-gradient(to bottom right, #ede3f2, #c1a3d3);
  box-shadow: 0 6px 12px rgba(180, 151, 189, 0.6);
}

/*//--json内文字色修飾--//*/
.red-title {
  color: red;
}