@charset "utf-8";
/*===== フッター =====*/
:root {
  --color-primary: #1E2A44/*#555555*/;
  --color-secondary: #C6B7A3/*#8B6D5E*/;
  --color-accent: #F5F4F0/*#DCC4B8*/;
  --color-frame: #CCCCCC;	
  --color-text: #444444;
  --color-back: #E8D5CC;
  --color-light: #F5F5F5;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-sand: #B4A27B;	
  --color-pink: #D8A7A7;
  --color-mint: #A8C3A3;
  --color-blue: #A7C6D8;
  --color-green: #3E6C68/*#88B175*/;
  --color-attn: #D59B09;
  --color-sale: #A24C5A/*#C30002*/;
  --color-line: #3D863D;	
  --color-rakuten: #BF0000;
  --color-yahoo: #FF0033;
  --transition: all 0.4s ease}

footer {
  background-color: var(--color-primary);
  color: var(--color-white); 
  padding: 15px;
  text-align: center}

.footer-info h6 {
  font-size: 1.0rem;
  letter-spacing: 0.5em;
  margin: 30px 0 0 0}

.footer-logo {
  width: 150px;
  margin: 16px 0 8px}

.footer-info {
  margin-bottom: 18px}

.footer-info p {
  font-size: 0.8rem;
  margin-bottom: 1rem;
  margin: 30px 0 0 0}

.footer-logo {
  width: 150px;
  margin: 0 auto}

.footer-info {
  margin-bottom: 18px}

.footer-info p {
  font-size: 0.8rem;
  margin-bottom: 1rem}

/*===== ヘッダー2段め in フッター =====*/
.footer-bottom-wrap {
	width: 328px;
	max-width: 100%;
	margin: 15px auto}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 18px 0 10px;
  background-color: var(--color-primary)}

/*===== shopping guide ボタン =====*/
.shopping-guide {
  font-size: 0.75rem;
  font-weight: normal;
  color: var(--color-primary);
  text-decoration: none;
  letter-spacing: 0.04em;
  padding: 5px 15px;
  border-radius: 25px;

  /* 白背景でも見えるリキッド感（影控えめ） */
  background: linear-gradient(145deg, rgba(255,255,255,0.7), rgba(240,240,240,0.4));
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: inset 0 1px 3px rgba(255,255,255,0.3),
              0 2px 6px rgba(0,0,0,0.15); /* ←影を短め＆控えめ */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.icons-white {
  display: flex;
  gap: 20px}

.icons-white a {
  color: var(--color-white);
  font-size: 20px;
  transition: color 0.4s ease}

.icons-white a:hover {
  color: var(--color-black)}
/*===== =====*/