/* リセット・共通設定 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #cccccc;
  background-image: url("images/bg_body.png");
  font-size: 16px;
  font-family: "ＭＳ ゴシック", sans-serif;
  line-height: 1.5;
  color: #333333;
  padding: 10px;
}

#pagebody {
  max-width: 1000px;
  margin: 0 auto;
  background-color: #ffffff;
  background-image: url("images/bg_pagebody.png");
  background-repeat: repeat-y;
  padding: 10px;
}

/* ヘッダー */
header#header {
  background-color: #ffffaa;
  padding: 20px;
  text-align: center;
}
header#header h1 {
  font-size: 1.8em;
}
header#header h1 a {
  text-decoration: none;
  color: #000080;
  font-family: Impact, sans-serif;
}

/* 画像エリア */
style="width:100%;
/* メニュー */
nav#menu ul {
  list-style: none;
  display: flex;
  flex-direction: column; 
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 0;
  margin: 10px 0;
}
nav#menu ul li {
  flex: 1;
  text-align: center;
  margin: 5px;
list-style-type: none;
}
nav#menu ul li a {
  display: block;
  background-color: #008000;
  color: #ffffff;
  padding: 10px;
 border-radius: 50px;
  text-decoration: none;
}
nav#menu ul li a:hover {
  background-color: #008080;
}

/* サブメニュー */
aside#submenu {
  margin: 10px 0;
  padding: 10px;
  background-color: #f9f9f9;
}
aside#submenu ul {
  list-style: none;
  padding: 0;
}
aside#submenu ul li {
  border-bottom: 1px dotted gray;
  padding: 10px 0;
}
aside#submenu ul li a {
  text-decoration: none;
  color: #005500;
  padding-left: 30px;
  display: block;
  background: url("images/bg_submenu.png") no-repeat left center;
}
aside#submenu ul li a:hover {
  text-decoration: underline;
}
aside#submenu .red {
  margin-top: 20px;
  padding-left: 10px;
  color: #990000;
}

/* メインコンテンツ */
main#info {
  margin: 10px 0;
  padding: 10px;
  background-color: #ffffcc;
}
main#info h5 {
  font-size: 1.2em;
  margin: 10px 0;
  color: #005500;
}
main#info hr {
  border: 1px dotted #cccccc;
  margin: 10px 0;
}
main#info .car {
  list-style: disc inside;
  margin: 10px;
  padding-left: 20px;
}

/* フッター */
footer#footer {
  text-align: center;
  font-size: 0.8em;
  padding: 10px 0;
  margin-top: 20px;
}

/* スマホ用調整 */
@media (max-width: 600px) {
  header#header h1 {
    font-size: 1.5em;
  }
  nav#menu ul li a {
    padding: 8px;
  }
  main#info h5 {
    font-size: 1em;
  }
}
/* aisatu：ごあいさつ用の画像 */
.aisatu {
  margin: 10px 15px 10px 0;
  width: 80px;
  height: auto;
}

/* ki：強調テキスト */
.ki {
  font-size: 1.1em;
  color: #cc3300;
}

/* yellow：背景や文字色を調整した強調エリア */
.yellow {
  color: #000080;
  background-color: #ffffe0;
  display: block;
  padding: 5px;
  margin: 10px 0;
}

/* 横並びにするためのコンテナ */
.horizontal-container {
  display: flex; /* 横並び */
  align-items: center; /* 縦方向の中央揃え */
  justify-content: center; /* 必要なら中央揃え */
  flex-wrap: nowrap; /* 折り返しを防ぐ */
  gap: 10px; /* 要素間の間隔 */
}


/* sentaku：各工程説明ボックス（モバイルでは幅100%に調整） */
.sentaku {
  width: 100%;
  background-color: #d7eeff;
  margin: 10px 0;
  padding: 10px;
  box-sizing: border-box;
}

/* kh：sentaku内の画像 */
.kh {
  width: 100%;
  max-width: 125px;
  height: auto;
  display: block;
  margin-bottom: 5px;
}

/* dani：ダニ画像 */
.dani {
  width: 100px;
  height: auto;
  margin: 0 10px 10px 0;
}

/* 600px以下ではダニ画像のフロート解除 */
@media (max-width: 600px) {
  .dani {
    float: none;
    display: block;
    margin: 0 auto 10px;
  }
}
/* 地図表示用のコンテナ調整 */
.map-container {
  width: 100%;
  overflow: hidden;
  margin-bottom: 10px;
}
.map-container iframe {
  border: 0;
  width: 100%;
  height: auto;
  min-height: 300px;
}
/* ===================================
 カートの数字バッジ
=================================== */

.cart-count{

  position:absolute;             /* カート上に配置 */
  top:-6px;                      /* 上位置 */
  right:-6px;                    /* 右位置 */

  background:#d00;               /* 赤背景 */
  color:#fff;                    /* 白文字 */

  font-size:12px;                /* 文字サイズ */
  font-weight:bold;              /* 太字 */

  border-radius:50%;             /* 丸型 */

  min-width:20px;                /* 最小幅 */
  height:20px;                   /* 高さ */

  display:flex;                  /* 中央配置 */
  align-items:center;
  justify-content:center;

  padding:0 5px;                 /* 内側余白 */
}
.cart-float{
  position:fixed;
  right:16px;
  top:80px;
  width:55px;              /* 外側の丸の大きさ */
  height:55px;             /* 外側の丸の大きさ */
  border-radius:50%;
  background:#fff;
  box-shadow:0 4px 12px rgba(0,0,0,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
  text-decoration:none;
}

.cart-icon{
  width:50px;              /* 中のカートだけ大きさ調整 */
  height:auto;
  display:block;
}

.cart-count{
  position:absolute;
  top:-6px;
  right:-6px;
  min-width:34px;
  height:34px;
  padding:0 8px;
  border-radius:999px;
  background:#d00;
  color:#fff;
  font-size:24px;
  font-weight:700;
  line-height:34px;
  text-align:center;
  box-sizing:border-box;
  border:3px solid #fff;
}